0

所以我正在加载一个带有基本脚本和基本表单的 html 页面。但是，当页面加载时，用户可以选择两个单选按钮，是或否。如果您的用户都不选择，我想显示一个警告框。我成功地显示了警报框，但是当用户单击警报框中的“确定”按钮时，用户被重定向到不同的页面。我添加了语句，return false；希望这不会发生。

代码如下，

<!-- Javascript radiobutton form validation -->

<script type="text/javascript">

function valForm(form) {

    if(!document.getElementById('splash_false').checked && !document.getElementById('splash_true').checked  ) {
        alert('You either like splash pages or dislike em, choose one ...please');
        return false;
    }
}

</script>

<!-- Javascript radiobutton form validation END -->


</head>

<body>
<img src="pics/DSCN1566-300x225.jpg" alt="" width="640" height="auto"  />
<h1>Hello Javascript redirection.</h1><br />

<p>
<form name="tosplashornottosplash" action="splash-process.php" method="post">
Splash pages are stupid.

<input type="radio" name="splash" id="splash_false" value="false" /> No
<input type="radio" name="splash" id="splash_true" value="true" /> Yes

<input type="submit" name="splashSubmit" onClick="return valForm(tosplashornottosplash)" value="Enter" />
</form>
</p>
4

3 回答 3

1

You should place your handler in the form's onsubmit callback

<form onsubmit="return valForm(this)" action="splash-process.php" method="post">

Returning false to the onsubmit handler will prevent your form from being posted

于 2013-01-12T22:44:35.540 回答
1

Try to make it an onsubmit-callback on the form, instead of an onclick-callback on the button. That way, returning false will stop the form from posting.

Side note:

Since you don't seem to use the reference to the form in your callback, there is no need to pass it to the callback function. So you could just as well call it like this, from the onsubmit-attribute on the form:

onsubmit="return valForm()"

And get rid of the the form variable in the callback signature:

function valForm() {
   ...
}
于 2013-01-12T22:44:40.067 回答
1

You need to bind to the form's onsubmit event:

<form onsubmit="return valForm()">

(Note that the form parameter in your valForm function was never actually used nor was it properly filled in either. The return valForm(tosplashornottosplash) referred to an non-existant tosplashornottosplash JavaScript variable and thus evaluated to undefined.)

However it's recommended that you bind your event handlers in the JavaScript code itself instead of wiring them in the HTML markup:

document.getElementById("myform").addEventListener("submit", valForm, false);

This assumes you gave your form the ID myform and that this code is executed after the form element is loaded into the DOM. You can ensure this by putting your JavaScript at the bottom of the page (just before closing body) or by binding to the DOMContentLoaded event of the document.

To support older IE browsers as well, you need to use attachEvent when addEventListener is not available. The article on addEventListener at MDN suggests something like:

if (form.addEventListener) {
  form.addEventListener("submit", valForm, false);
} else if (form.attachEvent)  {
  form.attachEvent("onsubmit", valForm);
}

Alternatively, you can throw jQuery in which facilitates DOM selection (e.g. $("form[name=myform])") and takes care of the cross-browser compatibility issues for you (e.g. $.on('submit', valForm)).

于 2013-01-12T22:45:16.423 回答