Javascript setting value of textbox by function, without getting reset

Question

My goal is to have a text box and a button. If I enter "Hello" in the text box and press the submit button I would like to have see the text box filled with "World.

For the moment the value of the text box will be changed betweeen the

<html>
   <body>
         <script>
            function validateForm() {
                var x = document.forms["myForm"]["Input"].value;
                if (x == "Hello") {
                    alert("test");
                    document.getElementById("Input").value = "World";
                    alert("test2");
                }
            }
        </script>

        <form name="myForm" action="test.html" onsubmit="return validateForm()" method="post">
        Input: <input type="text" id="Input"><br>
        <input type="submit" value="Submit">
        </form>

   </body>
</html>

I tried the code locally (Firefox and Chrome) and the text box gets filles with "World" — Benjamin
– Benjamin, Commented Aug 26, 2015 at 11:46
I'm running it on my Windows 10 machine with chrome and the field is empty once i click away the second alert message. Could it be the extension of my html file is wrong? I'm saving my code in a .html file and just open it in my browser — demathieu
– demathieu, Commented Aug 26, 2015 at 11:51

nils · Accepted Answer · 2015-08-26 12:01:37Z

The problem is that the form gets submitted right after the validation. So you are redirected to test.html again.

If you don't want that to happen, add event.preventDefault(); to your Event Handler (check out the fiddle to see it working):

<html>
   <body>
         <script>
            function validateForm(event) {
                event.preventDefault();

                var x = document.forms["myForm"]["Input"].value;
                if (x == "Hello") {
                    alert("test");
                    document.getElementById("Input").value = "World";
                    alert("test2");
                }
            }
        </script>

        <form name="myForm" action="test.html" onsubmit="return validateForm(event)" method="post">
        Input: <input type="text" id="Input"><br>
        <input type="submit" value="Submit">
        </form>

   </body>
</html>

You can learn more about event.preventDefault() at MDN.

Just as a sidenote: It is generally better to use addEventListener instead of the onsubmit attribute (Better separation of concerns, you can add multiple event listeners, etc.).

Clement Amarnath · Accepted Answer · 2015-08-26 11:50:34Z

0

When you submit your page, then the content in the action page will be loaded.

In your case test.html will be loaded.

If you want the value "World" to be shown in the text box on hitting the submit, then return false on your validateForm() method.

answered Aug 26, 2015 at 11:50

Clement Amarnath

5,4761 gold badge23 silver badges34 bronze badges

Comments

nils · Accepted Answer · 2015-08-26 12:06:26Z

0

Use return false; to stay on the same page and stop form submission.

function validateForm() {
    var x = document.forms["myForm"]["Input"].value;
    if (x == "Hello") {
        document.getElementById("Input").value = "World";
        return false;
    }
}

edited Aug 26, 2015 at 12:06

nils

27.4k6 gold badges73 silver badges82 bronze badges

answered Aug 26, 2015 at 11:52

Dandy

2,20716 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript setting value of textbox by function, without getting reset

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related