javascript - 如果第一个表单未正确验证，如何隐藏表单

Question

JavaScript:

function myFunction() { //creating the onlick function
    var locationFrom = document.getElementById("LocationFrom").value;// Getting both "from" and "to" Ids fromt he homepage.hmtl
    var locationTo = document.getElementById("LocationTo").value;

    if (locationFrom === locationTo) {  // If both have same values then give an error as below
        document.getElementById("errorLocationFrom").textContent = 'Destination cannot be the same.';
    }
    else {
        document.getElementById("errorLocationFrom").textContent = ''; // if not the same then give no error
    }

$("#Submit").click(function(){
    $("#Form-2").show(); //Display form when Submit button is clicked 
});

function SecForm(){
    var ErrorLocation = document.getElementById("errorLocationFrom");

    if(ErrorLocation == false)       //Hide form2 if ErrorLocation is false 
       $("#Form-2").hide();

    return false;
}

HTML:

<div class="full-col">
<label for="FDestination">From</label> <!---Label for select element--->
<select name="Location" id = "LocationFrom">  <!---Select element to give user options to select from-->
    <option value="" disabled selected>Please Select </option> <!---Options for departing location-->
    <option value="Newport">Newport</option>
    <option value="Mahdi">London</option>
    <option value="Cardiff">Cardiff</option>
    <option value="Cilo">Brazil </option>
</select>

<label for="FDestination">To</label>
<select name="LocationTo" id = "LocationTo" >
    <option value="" disabled selected>Please Select </option>
    <option value="Cardiff">Cardiff</option>
    <option value="Mahdi">London</option>
    <option value="Newport">Newport</option>
    <option value="Cilo">Brazil</option>
</select>
<!---Hidden Error message only shown when there is a validation error for departing and arrival--->    
<label id="errorLocationFrom"></label> 
</form>

<Form action="#" class="group" name="form2" id="Form-2" method="post" hidden = "true">
    <legend id="fixed"><span class="number">2</span>Tickets</legend> 
    <div class="half-col">
        <label for="Adult-ticket" class="center-label">Adults(+16)</label>
        <input type="number" id="adult" name="user_adult">
        <label id="AdTickError"></label>
    </div>
    <div class="half-col">
        <label for="child-ticket" class="center-label">Child</label>
        <input type="number" id="child" name="user_child">
        <label id="ChildTickError"></label>
    </div>

    <input type="checkbox" id="Standard" name="Type" value="Standard">
    <label class="light" for="Standard">Standard</label><br>

    <input type="checkbox" id="First-Class" name="Type" value="First-Class">
    <label class="light" for="First-Class">First Class</label><br><br>
    <p id="total-cost"></p>
    <button type = "button" value="checkout" id="checkoutbtn" onclick="AdultNumber(); calculateFare(); " >CHECKOUT</button>
</Form>

我正在制作一个铁路票务系统，我需要的是首先验证表单，然后单击“提交”按钮后，它将显示另一个表单，这两个表单都在同一页面上。

Answer 1

您可以将form1的提交更改为输入类型按钮。单击“button1”时，您将像以前一样进行验证，如果通过，则显示“form2”。

在form2中，您可以使用onsubmit事件将所需的字段从form1复制到form2； <form id="Form-2" onsubmit="CopyData()">

在复制功能中您可以执行以下操作:

$('#Form-2').append( '<input type="hidden" name="LocationFrom" value="' + $('#LocationFrom').val() + '">' );
$('#Form-2').append( '<input type="hidden" name="LocationTo" value="' + $('#LocationTo').val() + '">' );

更新 - fiddle :https://jsfiddle.net/blocknotes/copyuwyd/