making submit button execute a function

Question

Basicly i have this function:

function testLength(){
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

and a intputs:

<input type="text" name="input1" id="input1">
<input type="text" name="input2" id="input1">
<input type="submit" onclick="testLength();" value="press me">

the idea is if the inputs are 1 character long, not allow the submission but although even if my inputs are 1 character long, it doesn't appear to go into the if statment which (I assume) should stop submit button from submitting. Any idea as to why?

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Use the onsubmit event:

<form onsubmit="return testLength();">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" value="press me">
</form>

For more info, read: How to prevent form from being submitted?

edited May 23 '17 at 12:32

Community

1
1

answered Apr 05 '17 at 07:52

Jacob van Lingen

8,989
7
48
78

kecalace · Accepted Answer · 2017-04-05T07:59:33.647

0

You should look at things like <form onsubmit="return testLength()">.

The function will not be submitted if the function return false.

edited Apr 05 '17 at 07:59

answered Apr 05 '17 at 07:54

kecalace

117
1
16

Ok, so I managed to stop submit button from doing its thing. I still cant make it go thro the if statement, for some reason it returns false (the condition) no matter what i enter :S – Konulv Apr 05 '17 at 08:04
What code are you using ? There's a typo in the code in your question : lenght instead of length – kecalace Apr 05 '17 at 08:06
\*facepalm* So it just cames down to me not being able to spell properly. It works just fine now. Thank you <3 – Konulv Apr 05 '17 at 08:12

score 0 · Answer 3 · answered Apr 05 '17 at 07:54

Assuming that your inputs and submit button are inside a <form> element, the form's default behavior (which is to actually be submitted) is what's going to happen. What you might want to do is add an event listener for the form's submit event, and do your validations in there.

HTML

<form id="my-form">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" value="press me">
</form>

Javascript

var form = document.getElementById('my-form');
form.onsubmit = function() {
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

Lucas Oliveira · Answer 4 · 2017-04-05T08:06:27.293

Apart from onsubmit, you can also use the eventListener.

eg :

document.querySelector('').addEventListener('click', testLength);

HTML

<form id="my-form">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" id="submit" value="press me">
</form>

JAVASCRIPT

    document.getElementById('submit').addEventListener('click', testLength);
    function testLength(){
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

The event listener can be use not only with querySelector and getelementByID, but with any target you defined see here on the Documentation.

making submit button execute a function

4 Answers4