0

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.

vago
  • 75
  • 1
  • 1
  • 6
  • All you need is a little hang of the language and a little idea of asynchronous and synchronous javascript. Here is a good start: (https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean?rq=1) – Udo E. Sep 14 '19 at 16:48
  • Do you think you could summarize your question a bit? It's really hard to read through the description. You could write a brief description and let your code do the talking. – Sagar Acharya Sep 14 '19 at 16:53
  • you need to learn `ajax` it will help you to make that – Joseph Sep 14 '19 at 17:09
  • Simple summary - how can I submit a text area to the server without triggering a page refresh? I used to use AJAX quite a bit, but I have been away from the field for several years and have forgotten a lot, and it was pre-jquery. I have not had any success using current implementations of ajax such as the jquery implementations $.ajax or $.post to solve this issue. – vago Sep 14 '19 at 17:13
  • You need to use ajax call to post data without triggering a page refresh – vwadhwa3 Sep 14 '19 at 17:30
  • My current thinking is that the solution to this would lie in how the server response is dealt with rather than how the POST is sent. – vago Sep 14 '19 at 17:35
  • Unless it is the act of sending the data that triggers the page refresh rather than anything received from the server - I don't know. – vago Sep 14 '19 at 17:42
  • The older implementation of AJAX (i.e. using XmlHttpRequest) will still work if you prefer that syntax. jQuery et al just provide wrappers around that for ease of use - once you take a moment to learn one of these libraries, they aren't all that tricky. Or there is the modern fetch() interface which is well documented on MDN and elsewhere and doesn't require any plugins etc – ADyson Sep 14 '19 at 21:01
  • P.s. if you prefer not to use any Ajax at all, it's perfectly possible to write your page and server side script in such a way that it saves and restores the state of all the form values when the page is refreshed. People were doing that for years before Ajax became popular (and still are). – ADyson Sep 14 '19 at 21:05
  • Like this? https://stackoverflow.com/questions/14038499/restore-input-field-value-on-submit-of-form-using-php ? For the textarea, simple enough, but for the SELECT list which has around 80 options, not so much. Even with ajax, isn't it just the same POST array that gets sent to the server as with a form or DOM submit? Why would the server response be different? I'm sorry but I have some fundamental gaps in my understanding of the situation. – vago Sep 15 '19 at 14:05
  • The server will respond with whatever you tell it to respond with. I'm not sure quite sure what your point is in regard to that? And I'm not sure how the number of options in your select would affect anything? Only one can be selected at once, so to restore the selected value you just loop through them, displaying them, until you come to the selected option, and add the "selected" attribute as you output it. It's trivial, people do that all the time. – ADyson Sep 15 '19 at 23:52
  • P.s. no you don't need the session to do what I'm suggesting (as per that link you gave). When I'm sat properly at the computer tomorrow I'll try and find you an example – ADyson Sep 15 '19 at 23:53
  • I am floundering in the dark - what I really want is to simply stop the page refresh after submit. Could someone take a moment to enlighten me as to what specific mechanism causes the page to refresh when a form is submitted? This might point me in the right direction. I have not been able to find that information anywhere. P.S, I have the additional constraint that if I change the button from type="button" to type="submit" the javascript function stops working – vago Sep 16 '19 at 11:17
  • Thank you ADyson for your responses, but I feel a bit like someone trying to repair a car without understanding how the engine works. What I need at this point isn't how to's but some basic understanding of what is happening. Some questions I am seeking answers to are here https://stackoverflow.com/questions/57956498/what-is-the-mechanism-that-causes-the-page-to-refresh-when-data-is-submitted-to – vago Sep 16 '19 at 14:27

1 Answers1

0

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

vago
  • 75
  • 1
  • 1
  • 6