如何隐藏表单，如果第一种形式是不正确验证

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() + '">'); 

更新 - 小提琴：https://jsfiddle.net/blocknotes/copyuwyd/