Question

我在一个包含两个单选按钮的网站上有一个简单的表单，并且我在单击这两个单选按钮时添加了一些Javascript表单验证。（非常感谢）但是当用户点击“okay”按钮时，页面将被重定向到表单的“process”页面。当用户点击警告框中的“确定”按钮时，我更喜欢重新加载页面或关闭警报框的行为。

要进一步了解我在说什么，你可以去chrisrjones.com，它应该将你重定向到chrisrjones.com/splash.php然后点击回车。（不选择单选按钮）应出现一个警告框，按下 okay 按钮后，页面将重定向到表单处理页面（不是我想要的）。

<!DOCTYPE html>

<html lang="en">

<head>
<title>chrisRjones.com - Splash</title>

 <?php
function getImagesFromDir($path) {
    $images = array();
    if ( $img_dir = @opendir($path) ) {
        while ( false !== ($img_file = readdir($img_dir)) ) {
            // checks for gif, jpg, png
            if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
                $images[] = $img_file;
            }
        }
        closedir($img_dir);
    }
    return $images;
}

function getRandomFromArray($ar) {
    mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed
    $num = array_rand($ar);
    return $ar[$num];
}

/////////////////////////////////////////////////////////////////////
// This is the only portion of the code you may need to change.
// Indicate the location of your images 

$root = '';
// use if specifying path from root
//$root = $_SERVER['DOCUMENT_ROOT'];

$path = 'pics/';

// End of user modified section 
/////////////////////////////////////////////////////////////////////

// Obtain list of images from directory 
$imgList = getImagesFromDir($root . $path);
$img = getRandomFromArray($imgList);
?> 





<!-- begin google analytics PHP include -->

<?php include_once("analyticstracking.php") ?>

<!-- end google analytics PHP include -->

<!-- Javascript radiobutton form validation -->

<script type="text/javascript">
function valForm(form) {
    var btn1 = parseInt(form.splash.value, 10) || 0;
    btn = (btn1 )
    if (btn < 3) {
        alert('You either like splash pages or hate em, choose one ...please');
        return false; }
    else {
     alert('Button value ' + btn + ' selected');
    }
}
</script>

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


</head>

<body>
<img src="<?php echo $path . $img ?>" 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" value="false" /> No
<input type="radio" name="splash" value="true" /> Yes

<input type="submit" name="formSubmit" onClick="valForm(tosplashornottosplash)" value="Enter" />
</form>



</body>
</html>

Answer 1

在您希望保持在同一页面的情况下，从valform返回false。

例如：

function valForm(form) {
var btn1 = parseInt(form.splash.value, 10) || 0;
btn = (btn1 )
if (btn < 3) {
   alert('You either like splash pages or hate em, choose one ...please');
   return false;
}
else {
     alert('Button value ' + btn + ' selected');
} 
}

您可能还需要更改标记，如下所示添加return语句。

<input type="submit" value="Enter" onclick="return valForm(tosplashornottosplash)" name="formSubmit">

Answer 2

您只需在其中执行return false即可阻止默认操作。

function valForm(form) {
    var btn1 = parseInt(form.splash.value, 10) || 0;
    btn = (btn1 )
    if (btn < 3) { 
        alert('You either like splash pages or hate em, choose one ...please');
        return false;
    } else {
        alert('Button value ' + btn + ' selected');
    }
}

Answer 3

你可以使用JQuery。

function valForm(){
  if (!$("input[name=splash]:selected").length)
    alert('please select');
    return false;
  } else { return true; }
}

Javascript - 不受欢迎的警报框行为

3 个答案: