We Keep Coding

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

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.

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

Is there a workaround to submitting a form by clicking on a div without using JavaScript

This is the idea, there is a limited number of users, each has their own "box", when they click it, if they chose not to have a password they should be auto logged-in, if they do have a password a form will popup and they can type their password, click the submit button, and log in the normal way.
I know I could achieve this by using JavaScript and posting the hidden form, but then what if someone disabled JavaScript in their browser.
I could wrap the div in <a> tags and target another method in my controller that could use GET parameters for those auto-logins, but I do not want to use GET.
Am I missing an obvious way to achieve this? Or is there a way to use JavaScript if enabled and doing something close enough if disabled?

Wrap each box with a form. Post the form when user click the box. On server side depending upon user need authenticated or not load the same page in client but this time with the popup(if need authentication), you can control the popup by setting a session variable in server and access it on asp page.
Not sure if this make sense .
Edit :
<form action="server side url " method="post">
<input type="submit" value="Submit">
</form>
Now use css to make the "Submit" button look like the "box" you want
So when use hit the "box" it calls the action from the form

Correct way to have an input of type submit and avoid spam-bots?

I used to have a form which submit button was just a div, like this:
<div class='submit-form'>Submit</div>
However, that didn't let my users to submit the form when pressing the enter key, so I added the following
<div class='submit-form'>Submit</div>
<input type='submit'>
A submit button, that I hide with CSS, so it's transparent to the user, but it's still functional.
What has happened since I added that is that I have gotten several spam submissions. So, my question is:
Should I remove the input of type submit and somehow add a jQuery listener for the enter key in the form?
OR
Should I add some kind of anti spam security?

I would suggest to use standard html elements in forms, so you can have graceful degradation.
A form without a submit button can cause you more than one trouble (accessibility, javascript enabled in browser, etc...).
This is a general good rule.
Then you can implement a standard (do not reinvent the wheel!), accessible anti spam feature in your form, such as recaptcha.

Button vs link vs input type="submit" on a form

A user logs in to his control panel and sees his incoming messages. Near each message there is a "Reply" button. What is the correct way to implement that button?
I see three main options:
Use a link:
Reply.
Disadvantage:
We need to style that link to look like a button. Because I think that action "Reply" should be represented by a button, not a link (in my opinion links should be used when they link to some resource and when we have a noun in link text; and if we want to make an action and have a verb (action) in a caption - button should be used).
Use a button:
<button onclick="location.href='customer.php?reply&messageid=1234'">Reply</button>`
Disadvantage:
The user must have JavaScript enabled. Though based on our statistics 99.8% of our users have JavaScript enabled, and if they don't it will be really difficult for them to work on our website anyway (we have many features implemented with JavaScript). So I think that 100% of our actual active users have JavaScript enabled.
Use a form with <input type="submit">:
<form action="customer.php?reply" method="get">
<input name="messageid" type="hidden" value="1234" />
<input type="submit" value="Reply" />
</form>
Disadvantage:
I think using form here is "artificial". A user doesn't enter anything. We use the form just to make our button work. I also think that using POST request when we don't change anything and just need to show a reply form to a user - violates REST principles. But even with using GET I still think that using form is artificial in this case.
Some other notes:
Using a button inside a link doesn't work in IE.
It's a private section of our website so search engines can't see it and we don't really need a link to help search engine follow it and index the resource (it's a usual argument for using links in web instead of buttons)
Which one would you choose and why?
UPD. Well, I have decided to use a link. Thank you everyone for discussion!

I would definitely use a link: progressive enhancement.
You want the button to be usable even with Javascript turned off (remember: every user is a non-javascript-user for the duration of the page load. If they're on a slow connection (e.g. mobile), they should be able to reply as soon as they see the button).
Styling is a non issue (you weren't gonna use the default button styles, were you?).
Using POST when the user isn't submitting anything sure is wrong. Even with GET, it's still not really form material...

It's pretty easy to style <a> and <button> identically, just use a common class name. <input type="button"> can be a little trickier, but you don't need to use it.
Your tag choice should never be dictated by your intended presentation, but what the element is and what it does. Links should be marked up as
<a>.

I agree that a POST is wrong. So, set your form to use method="get". Use just one form and leave out the hidden fields. Using <button>, the displayed text can differ from the submitted value.
<form action="customer.php" method="get">
<input type="hidden" name="reply" />
<div class="message">
<div class="messageBody">..</div>
<button name="messageid" value="1234">Reply</button>
</div>
<div class="message">
<div class="messageBody">..</div>
<button name="messageid" value="1235">Reply</button>
</div>
...
</form>

All methods are correct, except that method 2 is correct only under the assumption that you can safely ignore non-JavaScript browsing.
The assumptions and comments presented about forms are incorrect, or at least misleading. A form need not involve user input; forms can be used e.g. to submit previously collected data, with no other fields but a submit field. And the POST method can be used even when not changing anything, e.g. due to the amount of input data (as there are fairly low upper limits on GET data); besides, the form presented in the question uses GET, the default method.
Otherwise, this is mostly a non-constructive question, calling for discussion and argumentation rather than technical solutions.

One can always use both, like;
<button>Click Me</button>

Can I share data between forms on HTML pages? Or can submitting one form, submit another?

I wonder if anyone can advise? I have a JSP which contains two forms, both of which are mapped to the same servlet on the server.
Everything seems fine although when I submit one form, a necessary piece of data entered on the other form is not being submitted at the same time.
The first form is used to add or delete the address of an RSS feed. As there may be several addresses on the page, a table is used to store them. Each cell of the table contains a form like this for deletion:
<form action = "<c:url value = '/deleteRSSFeed?rssFeedURL=${rssFeedURL}' />" method = "post">
<input type = "image" src = "${imageFileURL}myApp_rightArrow.png" />
<input name = "writeWordcloud" type = "hidden" value = "true" />
</form>
And there is another form for adding a feed.
The situation is that upon submission of either of these forms, a wordcloud must be redrawn on the page. But the wordcloud's settings are contained in the other form.
As it not possible for me to merge the forms, can anyone tell me if I can share data betwen forms in HTML? Or better yet, is it possible to submit one form, and have this action submit the second form?
At this point, it is not practical for me to have the forms served by different servlets.
Thanks
Mr Morgan

By using Javascript (or better, jQuery), you can have hidden fields in one form get the other form's fields values before submitting.
Update
This fiddle shows the code you need: http://jsfiddle.net/MqsK8/1/

You should probably use a single form, and have the server-side script perform both actions.
Depending on your scenario, you may want to have two submit buttons for different tasks; the server can check which button was clicked.

It would if you can provide detail of what you are trying to do. You can use Javascript to add elements to DOM but again all of this will depend on your use-case.