отключить страницу перезагрузки после отправки формы

Question

У меня есть сценарий, который создает динамическую таблицу. После того, как пользователь нажмите на кнопку, рядом row в нижней части таблицы добавляются .:

function createRow() 
     { 
      var options='<select name="nameselect'> 
      options+='<option>one</option>'; 
      options+='</select>'; 
     options+='<input type=\'submit\' name=\'loadReq\' value=\'Pobierz dane\' />'; 
      var form = document.createElement('form'); // create row node 
      var row = document.createElement('tr'); // create row node 
      var col = document.createElement('td'); // create column node 
      var col2 = document.createElement('td'); // create second column node 
      var col3 = document.createElement('td'); // create column node 
      var col4 = document.createElement('td'); // create second column node 
      var col5 = document.createElement('td'); // create column node 
      var col6 = document.createElement('td'); 
      form.appendChild(col); 
      row.appendChild(form); // append first column to row 
      row.appendChild(col2); // append second column to row 
      row.appendChild(col3); // append first column to row 
      row.appendChild(col4); // append second column to row 
      row.appendChild(col5); // append first column to row 
      //row.appendChild(col6); 
      col.innerHTML = options; 

      col2.innerHTML = 'some text'; // put data in second column 
      col3.innerHTML = 'some text'; 
      col4.innerHTML = 'some text';   
      col5.innerHTML = 'some text'; 
      table.insertAdjacentElement('beforeEnd', row); 
      counter++; 
     } 

Так что сейчас им добавив строку с some text значения в 2-5 столбцах и drop down list с кнопкой в ​​качестве формы в первая колонка.

Но всякий раз, когда я представляю свою форму, страница перезагрузки, так Эфект моей JavaScript функции больше не существует, в результате я получаю exacly ту же страницу, как я открыл перед и ряд я добавил исчезнуть.

Можно ли отправить форму и не потерять efect от JavaScript Функция?

Answer 1

Я думаю, что вы потеряли все возможности PHP/Javascript.

Чтобы обновить то, что вы показываете пользователю, вам не нужно отправлять форму, даже если вы хотите использовать данные, введенные пользователем в форме. Это может быть сделано с помощью Javascript (без перезагрузки страницы):

var userInput = document.getElementById('userInput').value; 

Теперь, если вы хотите, чтобы отправить форму, чтобы получить и использовать пользовательский ввод в вашем PHP (для обновления базы данных, например ...) вы можете отправьте форму и когда вы повторно отобразите ее (после перезагрузки страницы), инициализируйте ее предыдущим вводом пользователя. Делая что-то подобное:

echo '<input type="text" name="userInput" value="'.$_POST['userInput'].'">'; 

Answer 2

Вы можете изучить с помощью AJAX для отправки формы: http://www.malsup.com/jquery/form/

Таким образом, вы можете использовать эти данные в форме, чтобы выполнить какие-либо действия, а также обеспечить обратную связь с пользователем, без необходимости запуска полного обновления страницы ,

Answer 3

Либо отмените действие кнопки по умолчанию, либо поменяйте его с <input type="submit"> на <input type="button"> или <button> (оба варианта не имеют поведения по умолчанию).

Answer 4

Если вы добавите return false; к функции, которая была вызвана при отправке формы, это предотвратит отправку формы.

function createRow(){ 
    /*Code*/ 
    return false; 
} 

Answer 5

table.insertAdjacentElement('beforeEnd', row); 
    counter++; 
    return false; 
} 

Дополнительный return false; делает это так форма не будет представлен, как это обычно было бы.