How can data be submitted to server without triggering a page refresh? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How can data be submitted to server without triggering a page refresh? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have two form elements; a SELECT drop down list which serves as an input for a javascript function, and a TEXTAREA which also is an input to the same javascript function. The textarea input needs to be submitted to PHP on the server more or less simultaneously with its use by the local javascript. Ideally, both the javascript function and the $_POST submission to the server would be triggered by the same button click, but I have not been able to get this to work because use of the textarea input by the javascript function prevents it being submitted to the server and vice versa (both these actions need the same data apparently causing interference. I have successfully worked around this problem by triggering the DOM submit() to the server with an onmouseout attribute on the input button.

The problem I now have is that the page refreshes wiping away the input values when the textarea input is submitted to the server. I don’t want this to happen: I want the selection from the dropdown list to remain selected, and the text that was input to the textarea to remain in the textarea to ramain after submission. I have tried with the elements inside FORM tags and outside – page gets refreshed wiping away the values either way. There are many similar questions and suggested solutions posted on StackExchange, but after spending many hours trying many of them, I have yet to find one that works for me. Basically, they fall into to categories: ones that prevent the submit such as preventDefault and return false, and ones that don’t prevent the refresh or don’t work at all such as various javascript/jquery submit methods. To me, such submit methods beg the question of how does the server know anything about the method used to send the submit (other than whether it is GET or POST)? Doesn’t the php code on the server receive the same $_POST array regardless of the method used to send it? How would it know the difference between an html form submit, a DOM submit or a javascript/jquery submit? It is not surprising that they all trigger the same page refresh in response.

It seems like there surely should be some simple way to retain the form values after submit because surely there are many times one would want to do this.

P.S. I am no fan of jquery, I found ajax to be much easier before jquery was created. That said, at this point I would appreciate anything that works. I have almost no familiarity with jquery so please, for any responses that use jquery, please give an example of how it would be implemented in my case (where it would be placed and how it would be triggered).

PreventDefault, return false, all manner of javascript and jquery submits, removing the FORM tags, sending the return to a hidden iframe

<select id="thisselection" class="sameline"><option selected>Select      this</option></select>

<script>
function sendTextarea() {
  document.getElementById("pform").submit();
}
</script>

<form action="" name="pform" id="pform" method="post">
<textarea id="text" class="sendbox" name="text" cols="45"    rows="10">Hello world</textarea>
</form>

<input  type="button" value="Send" id="pform"    onclick="myFunction.speak($('#text').val(),$('#thisselection').val());"   onmouseout= "sendTextarea();"

/>

Everything works OK but I have not found a way to send the textarea input to the server without triggering a page refresh.

Answer

I wish I could simply prevent the page refresh, but lacking a means to do so, it is possible to save and restore the form values after submit (as suggested by ADyson. There is something in html5 called localStorage or sessionStorage, and there are ready-made scripts that make it easy to use, including savy.js and formsaver.js There are several of them at https://www.jqueryscript.net/tags.php?/localStorage/ savy.js works for my purpose

We are here to answer your question about How can data be submitted to server without triggering a page refresh? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji