-5

送信ボタンを 2 つ作成しましたが、関数を次々に実行したいと考えています。

送信ボタンがクリックされたら、関数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>
4

2 に答える 2

4

2 つの関数を必要な順序で呼び出す関数を作成します。たとえば、次のようになります。

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

...そして、両方の機能を使用したい場所ならどこでもその機能を使用します。

于 2013-10-13T13:56:39.847 に答える
0

両方の機能をカプセル化してボタンに結び付ける新しい機能を追加します。関数が 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();" />
于 2013-10-13T14:12:37.293 に答える