Menu
I have a function built in JavaScript that I want to be executed after a form submit is hit. It basically changes the look of the page completely. But I need a variable from the search box to still go through to the JavaScript. At the moment it flashes and resets what was there because it reloads the page.
So I set up a return false in my function which keeps it from doing that but the variable I want doesn't get submitted through the form. Any ideas on what I should do to get it? It's okay for the page to refresh as long as the updateTable() function works and isn't reset by the page reset.
<form action="" method="get" onsubmit="return updateTable();"> <input name="search" type="text"> <input type="submit" value="Search" > </form> This is the updateTable function:
function updateTable() { var photoViewer = document.getElementById('photoViewer'); var photo = document.getElementById('photo1').href; var numOfPics = 5; var columns = 3; var rows = Math.ceil(numOfPics/columns); var content=""; var count=0; content = "<table class='photoViewer' id='photoViewer'>"; for (r = 0; r < rows; r++) { content +="<tr>"; for (c = 0; c < columns; c++) { count++; if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>"; } content +="</tr>"; } content += "</table>"; photoViewer.innerHTML = content; } 
322
Here are ways of executing a javascript function on form submit without reload the html page. return false; is the key to prevent the from to reolad the html page. 1. When this html form is submitted, it will call the javascript function yourJsFunction (), but it won’t reload the page. 2. Use jQuery’s submit event to handle the form submit, ...
When this html form is submitted, it will call the javascript function yourJsFunction (), but it won’t reload the page. 2. Use jQuery’s submit event to handle the form submit, add return false; at the end of the submit handle function to prevent the page to reload.
3 Ways to Submit HTML Form Without Refreshing Page METHOD 1 AJAX SUBMISSION. All right, let us now get started with the first method – Submitting the form using AJAX. You... METHOD 2 FETCH SUBMISSION. Next, we move on with using fetch, the so-called “modernized AJAX”. No difference, the same... ...
No ajax, and the original page will not load. You can display the submit form as a separate page inside the iframe, and when it gets submitted the outer/container page will not reload. This solution will not make use of any kind of ajax. A further possibility is to make a direct javascript link to your function:
You can't do this using forms the normal way. Instead, you want to use AJAX.
A sample function that will submit the data and alert the page response.
function submitForm() { var http = new XMLHttpRequest(); http.open("POST", "<<whereverTheFormIsGoing>>", true); http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value http.send(params); http.onload = function() { alert(http.responseText); } } You can use jQuery serialize function along with get/post as follows:
$.get('server.php?' + $('#theForm').serialize()) $.post('server.php', $('#theform').serialize()) jQuery Serialize Documentation: http://api.jquery.com/serialize/
Simple AJAX submit using jQuery:
// this is the id of the submit button $("#submitButtonId").click(function() { var url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#idForm").serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response from the php script. } }); return false; // avoid to execute the actual submit of the form. }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
