Question

我创建了两个提交按钮，但我希望这些功能一个接一个地运行。

点击提交按钮时运行函数validateBoxes 等结束了运行函数validateBooking

我在下面粘贴了我的代码。新手所以真的很感激帮助。谢谢。

<html>
<head>
<title>Jet2it Booking Service</title>
<script language="javascript" type="text/javascript">
function validateBoxes() {
    var result = true;
    var msg = "";
    if (document.Holiday.firstname.value == "") {
        msg += "You must enter your firstname \n";
        document.Holiday.firstname.focus();
        document.getElementById('firstname').style.color = "red";
        result = false;
    }
    if (document.Holiday.secondname.value == "") {
        msg += "You must enter your secondname \n";
        document.Holiday.secondname.focus();
        document.getElementById('secondname').style.color = "red";
        result = false;
    }
    if (msg == "") {
        return result;
    }
    {
        alert(msg)
        return result;
    }
}

function validateBooking() {
    var result = true;
    var msg = "";
    var booking = "";
    if (Holiday.bookings[0].checked == true) {
        booking = "Italy";
    }
    if (Holiday.bookings[1].checked == true) {
        booking = "Malta";
    }
    if (Holiday.bookings[1].checked == true) {
        booking = "Portugal";
    }
    if (confirm("You have selected " + booking + ". Continue?")) {
        if (msg == "") {
            return result;
        }
        {
            alert(msg)
            return result;
        }
    }
    else {
        alert("booking Error");
        return false;
    }
}
</script>
</head>
<body>
<form name="Holiday" method="post" action="confirmed.html">
<table width="50%" border="0">
<tr>
<td id="firstname">First firstname</td>
<td><input type="text" name="firstname" /></td>
</tr>
<tr>
<td id="secondname">Second name</td>
<td><input type="text" name="secondname" /></td>
</tr>
<tr>
      <td><label>
        <input type="radio" name="bookings" value="Italy"/>
        Italy</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="bookings" value="Malta"/>
        Malta</label></td>
    </tr>
    <tr>
      <td><label>
        <input type="radio" name="bookings" value="Portugal"/>
         Portugal</label></td>
    </tr>
<tr>
<td><input type="submit" name="Submit_firstname_etc" 
value="Submit_firstname_etc" onClick="return validateBoxes();" /></td>           
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit_Destination" 
value="Submit_Destination"  onClick="return validateBooking();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

Answer 1

创建一个按所需顺序调用两个函数的函数，例如：某些之类的：

function validateBoth() {
    var result = validateBoxes();
    if (result) {
        result = validateBooking();
    }
    return result;
}

...然后在任何地方使用该功能，您希望使用这两个功能。

Answer 2

添加一个封装两个函数的新函数并将其绑定到一个按钮。如果函数返回false，则它不会发布到您的确认页面。

<script language="javascript" type="text/javascript">
function validateBoth() {
    if (validateBoxes() && validateBooking()) {
        return true;
    } else {
        return false;
    }
}
</script>

或者你可以看中代码;这跟前面的代码块说的一样。如果两个函数都返回true，那么validateBoth将返回true;否则，validateBoth将返回false。

<script language="javascript" type="text/javascript">
function validateBoth() {
    return (validateBoxes() && validateBooking());
}
</script>

然后，在表单的某处，将validateBoth函数绑定到按钮的onClick函数：

<input type="submit" name="One Button" onClick="return validateBoth();" />

Javascript - 如何调用第二个函数

2 个答案: