assist with js function/alert erasing form input

Question

I came across something weird that is making me realize I do not know JS stuff as well as i should. And so I thought I would ask a question about what is going on to see if that will help. I have a simple form with three "textarea" inputs and i have a "save" button. the save button triggers a js function that gathers the what is on the inputs and the does an alert showing them...

very simple application but what I was not expecting was that when you "close" the alert box; all the data entered on the form is erased...

here is my code:

<form>

<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">

</textarea><br/><br/>

<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">

</textarea><br/><br/>

<strong>Features</strong><br/>

<textarea id="features_notes" rows="4" cols="50">

</textarea>

<br/><br/>

<button onclick="side_form_js2()">Save2</button>

</form>

<script>
function side_form_js2() {

var element1 = document.getElementById("make_notes");
    var make_notes_var = element1.value;

var element2 = document.getElementById("model_notes");
    var model_notes_var = element2.value;

    var element3 = document.getElementById("features_notes");
    var features_notes_var = element3.value;

alert(make_notes_var + "I am an alert box!22222" + model_notes_var +   features_notes_var);
}
</script>

So I am really uncertain what is making the form input be erased. It is almost like the page is being reloaded but I dont think that is the case. Can anyone shed any light on this? Thanks...

P.S. dont know if this makes any difference but just running this locally using Xampp on my PC...

Default type for button is submit so the page is reloading http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked — UserEsp, Jul 27 '16 at 17:01
You can return false too in final of your function but now you know why the reason is. — UserEsp, Jul 27 '16 at 17:25

score 2 · Answer 1 · answered Jul 27 '16 at 17:04

the default is reload, change your code to this and it should work

<button onclick="return side_form_js2()">Save2</button>

and then in your function add return false after the alert like this:

alert(make_notes_var + "I am an alert box!22222" + model_notes_var +   features_notes_var);
return false;

score 0 · Answer 2 · answered Jul 27 '16 at 17:42

0

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit". If you want to use a button in a form without it submitting use type="button".

answered Jul 27 '16 at 17:42

Shalmal Sheth

41
3

assist with js function/alert erasing form input

2 Answers2