Geek Answers Handbook

Disable page reload after form submission

I have a script that create a dynamic table. After the user clicks the button, the next row added to the bottom of the table .:

 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++; }

So now I am adding a row with some text value in 2-5 columns and a drop down list with a button in the form in the first column.



But whenever I submit my form, the page reloads, so the my JavaScript function no longer exists, as a result I get exacly the same page as before, and the line I added disappears,

Is it possible to submit a form and not lose efect JavaScript functions?

+4
source share
5 answers

I think you have lost all the features of PHP / Javascript.

To update what you show to the user, you do not need to submit the form, even if you want to use the data entered by the user in the form. This can be done using Javascript (without reloading the page):

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

Now, if you want to submit a form to receive and use user input in your PHP (to update the database, for example ...), you can submit the form and when you re-display it (after reloading the page), initialize this with the previous one user input. Do something like this:

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

You can learn about using AJAX to submit a form: http://www.malsup.com/jquery/form/

Thus, you can use the data in the form to perform certain actions and provide feedback to the user without having to start a full page refresh.

+1
source

Either cancel the default behavior of the button click, or change it from <input type="submit"> to <input type="button"> or <button> (both have no default behavior).

0
source

If you add return false; to the function called when the form is submitted, this will prevent the form from being submitted.

 function createRow(){ /*Code*/ return false; }
0
source 
  table.insertAdjacentElement('beforeEnd', row); counter++; return false; }

Optional return false; makes sure that the form does not submit as usual.

0
source

More articles:


All Articles