РЕДАКТИРОВАТЬ: если я могу получить доступ к данным сеанса с помощью sessionStorage в JS, независимо от того, как они были созданы, через php или AJAX, то почему я не могу удалить sessionData с помощью JS? sessionStorage (как следует из названия) доступен только на время сеанса браузера (и удаляется, когда вкладка или окно закрываются) - однако он выживает после перезагрузки страницы (исходное руководство по DOM Storage - Mozilla Developer Network)
Также, если бы кто-то мог предложить способ сделать это, используя AJAX, я был бы признателен!
Я создаю созданный пользователем конструктор форм и сохраняю значения в $_SESSIONS на странице php. Я использую генератор случайных чисел alphanumeri c для создания двух идентифицирующих атрибутов тега, которые затем будут использоваться для удаления созданного ввода, если пользователь того пожелает. Удаление выполняется с помощью vanilla JS и должно произойти до загрузки страницы.
Хорошо, для сохранения нескольких представлений данных форм каждый раз, когда форма анализируется, и данные конструируются в тег ввода я использую СЕССИИ. Я устанавливаю $_SESSIONS, используя ассоциативные массивы внутри массива $_SESSION['form'], а затем строю вывод.
Моя проблема заключается в том, что функция удаления, установленная в Javascript, отлично работает для DOM, однако я хочу использовать кнопку удаления JS, чтобы также сбросить $_SESSION['form']['content']['randomly-generated-alphanumeric-number'], который является уникальным для ввода пользователя создал.
В конце концов, я буду запускать все это через надлежащие html сущности, чтобы удалять теги и добавлять их соответствующим образом, сейчас я просто тестирую функциональность с применением кода.
Пожалуйста, имейте в виду, что случайный символ генерируется динамически и вставляется в HTML и SESSIONS через php.
Вот это vardump($_SESSION['form']['content'])
array {
["m2HRvKPdDL"]=>
string(313) "
<div id="m2HRvKPdDL" class="input-type">
<label>First Name: </label>
<input type="text" id="fname" class="input-type" name="first_name"><input type="button" alt="m2HRvKPdDL" id="deleteInput" class="deletInput" value="Delete this field"> <span id="deleteMSG"></span>
</div>
"
}
Вот функция PHP, которая создает это $_SESSION и генерирует тег ввода: Я определяю массив внутри функции, который в конечном итоге будет содержать данные для отображения в виде value и случайно сгенерированный символ -> $ran для key.
function constInputTag($ran){
$inputTitle = $_POST['inputTitle'];
$attrTypeSubmit = $_POST['attrTypeSubmit'];
$output = [];
$output[1] = $ran;
$output[0] = '
<div id="'.$output[1].'" class="input-type">
<label>'.$inputTitle.'</label>
<input type="'.$_POST['inputType'].'"';
if(isset($attrTypeSubmit)){
foreach($_POST as $name => $value){
//set post keys not included in the input tag in $omit to exclude them from input tag
$omit = array('inputTitle', 'inputType', 'attrTypeSubmit');
if(!in_array($name, $omit)) {
$output[0] .= ' '.$name.'="'.$value.'"';
}else{
unset($name);
}
}
}
$output[0] .= '><input type="button" alt="'.$output[1].'" id="deleteInput" class="deleteInput" value="Delete this field"> <span id="deleteMSG"></span>
</div>
';
return $output;
}
вывод: Этот код находится в состоянии Кроме того, он проверяет, были ли отправлены формы, затем объединяет выходную переменную и массив SESSION в зависимости от того, какой пост отправки задан.
$ran = create_random_char(10);
$output .= constInputTag($ran)[0];
if(isset($_SESSION['form']['content'])){
$_SESSION['form']['content'][constInputTag($ran)[1]] = constInputTag($ran)[0];
}
//--> $_SESSION['form']['content']['key from function'] = 'value from function';
Javascript: Код переднего плана, который проверяет, нажата ли кнопка удаления, создает кнопки «да / нет», добавляет атрибуты к этим кнопкам и отображает их, находит и задает случайный символ, который будет использоваться в качестве идентификатора для родительского элемента div, кнопки и сеанса, удаляет родительский элемент div который содержит динамически созданный элемент
NEED: Удаление ключа / значения SESSION, которое содержит соответствующий пользовательский ввод.
var getInputId = document.getElementById("deleteInput"); // get the delete button and define it
if(document.getElementById("deleteInput")){ // if the element is in the DOM
getInputId.addEventListener('click', function() { // set an event listener for click for the delete input button
const delMsg = document.getElementById("deleteMSG"); // get the delete message span by id
delMsg.innerHTML = '<span class="warning">Delete this input?</span>'; // set message and css to make sure user wishes to delete this input
const yes = document.createElement('input'); // create the yes button input element
const no = document.createElement('input'); // create the no button input element
yes.type = 'button'; // add attributes to the yes button
yes.id = 'deleteTrue';
yes.value = 'Yes';
no.type = 'button'; // add attributes to the no button
no.id = 'deleteFalse';
no.value = 'No';
delMsg.appendChild(yes); // append the buttons to the span tag asking if user wants to delete
delMsg.appendChild(no);
// click event that searches for the randomly generated character in order to delete the input from the DOM
yes.addEventListener('click', function() {
// Sets the ID for the parent div to the inputs ALT tags
// value which is set in php to the randomly generated character
let searchId = getInputId.alt;
deleteId = document.getElementById(searchId); // search for the ID set to the random character
deleteId.remove(); // remove the tag, which is the div with ID set to random character
sessionStorage.removeItem(searchId); // here is my attempt to remove session value
console.log(searchId); // log console to compare values from inspector in browser
});
no.addEventListener('click', function() { // resets delMsg span and children
delMsg.innerHTML= '';
});
});
}
Кажется, код не работает: sessionStorage.removeItem(searchId);
Опять же, searchid содержит случайно сгенерированное значение, которое устанавливается в родительском div, который используется для удаления поля ввода в пользовательский ввод, он также устанавливается в качестве значения ключа в массиве $_SESSION['form']['content'];
Этот код отлично работает в DOM и удаляет ввод со страницы. Теперь мне просто нужно выяснить, как сбросить значение ассоциативных массивов для соответствующего ввода в массиве $_SESSION. Я не против использования AJAX, однако JS и AJAX, в частности, не являются сильной стороной для меня, и мне понадобится некоторая разбивка того, как это работает, из всех представленных ответов.
Заранее спасибо! Вся помощь очень ценится !!!