javascript - Onclick vs Onsubmit issues (Truefalse and alert behaviors?)

Long story short, I'm trying to understand how to utilize onsubmit correctly. The testresults function works fine with onclick, but I can't get it to active on submit (with a button, or hitting enter). Am I missing something here? Ultimately, I just want onsubmit to run a check and give the same sorts of border change/alert as onclick would. Is this not possible?

function testResults(form) {
    var TestVar = form.firstname.value;
    if (TestVar.length > 0) {
        alert("You typed: " + TestVar);
        document.getElementById('firstname').style.border = ''
    } else {
        alert("You didn't typed!" + TestVar);
        document.getElementById('firstname').style.border = '1px solid red';
        return false;
    }
    return true;
}

HTML

<html>    
<head>
    <link rel="stylesheet" type="text/css" href="note.css">
    <script type="text/javascript" src="formJS2.js"></script>
</head>
<body>
    <form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults();"> <span>First name:</span> 
        <input type="text" name="firstname" id="firstname" value="" />
        <br>
        <input type="submit" value="Submit">
        <input type="button" name="button" value="Click" onClick="testResults(this.form)">
    </form>
</body>
</html>

function testResults(form) {
    var TestVar = form.firstname.value;
    if (TestVar.length > 0) {
        alert("You typed: " + TestVar);
        document.getElementById('firstname').style.border = ''
    } else {
        alert("You didn't typed!" + TestVar);
        document.getElementById('firstname').style.border = '1px solid red';
        return false;
    }
    return true;
}

HTML

<html>    
<head>
    <link rel="stylesheet" type="text/css" href="note.css">
    <script type="text/javascript" src="formJS2.js"></script>
</head>
<body>
    <form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults();"> <span>First name:</span> 
        <input type="text" name="firstname" id="firstname" value="" />
        <br>
        <input type="submit" value="Submit">
        <input type="button" name="button" value="Click" onClick="testResults(this.form)">
    </form>
</body>
</html>

Share Improve this question edited Apr 4, 2013 at 15:09 dfsq 193k26 gold badges242 silver badges259 bronze badges asked Apr 4, 2013 at 15:06 Efubo 852 silver badges4 bronze badges

You'll need to have onsubmit="return testResults(this);" - note the return. This will prevent the submission if the testResults function returns false – Ian Commented Apr 4, 2013 at 15:15

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

Yes, you're missing something. Your testResults function has a form parameter, but when you call it in the onSubmit attribute you're not passing any value (so form inside the function will be undefined). Change it to:

<form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults(this);">

simply use :

onSubmit="testResults(this);"

explanation : your Method expects an argument of type form, you need to pass it...

Your current approach is that you expect form as the first parameter to your onsubmit callback. The other answers already indicated that you simply have to pass it in.

Normally when you have an event handler the first parameter is the event. By overriding it with your own function in this manner you lose the ability to do anything with the event. In this example you can get away with it but if you're looking for a way to do it right then here is my suggestion:

<form method="post" action="submit.php" id="my_form">
    <input type="submit" value="submit" />
</form>

<script type="text/javascript">
    document.getElementById("my_form").addEventListener("submit", function (event) {
        if (false === form_is_valid(event.target)) {
            event.preventDefault(); // prevents submitting to submit.php
        }
    });
</script>

Disclaimer: This is code not plete and will not work in all (older) browser. It's merely to illustrate how to use event handling.

you can also use this

    <input type="button" name="button" value="Click" onClick="return testResults(this.form)">

simply put return before your function and return true or false accordingly.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745097243a4611053.html

javascript - Onclick vs Onsubmit issues (Truefalse and alert behaviors?) - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Onclick vs Onsubmit issues (Truefalse and alert behaviors?) - Stack Overflow

4 Answers 4

相关推荐