提交表單后在頁面上顯示消息

Question

我有一個包含2個字段的表單（對於此示例），我使用JavaScript驗證，如果字段包含數據，則表單將在用戶單擊“提交”按鈕時提交。 我在表單標簽中使用iframe將輸出發送到同一頁面。

我想做的是在表單下面顯示一條消息，說“感謝您的提交”。 我很難想出這個部分。

 function SubmitRentalForm() { var bValid = true; var sFirst = document.getElementById("fname").value; var sLast = document.getElementById("lname").value; if ( (sFirst.trim() == "") || (sLast.trim() == "") ) { bValid = false; return bValid; } return bValid; } 

  <div class="main"> <form name="RentalForm" action="email-rental.php" method="POST" onsubmit="return SubmitRentalForm()" target="myFrame"> <table id="form_corners_rental" border="0" cellspacing="5"> <tr> <td>First Name</td> <td><input type="text" id="fname" name="fname" size="50" maxlength="60" placeholder="Enter First Name" onblur="ValidateField(name)" /> <span id="errorname" style="font-size:9px;color:darkred;"></span> </td> <td>Last Name</td> <td><input type="text" id="lname" name="lname" size="50" maxlength="60" placeholder="Enter Last Name" onblur="ValidateField(name)" /></td> </tr></table> <div id="Msg" style="display:none"> Thank you for your form submission. </div> <br/><br/> <input id="submit-btn-rental" type="submit" value="Rent Now"> </form> </div> <iframe name="myFrame" width="1" height="1" style="border:none"></iframe> 

我添加了div標簽，但我不知道該怎么做。

有人可以指出我正確的方向。

Answer 1

提交表單時，只需更改msg div的樣式即可

 function SubmitRentalForm() { var msg =document.getElementById("Msg") var bValid = true; var sFirst = document.getElementById("fname").value; var sLast = document.getElementById("lname").value; if ( (sFirst.trim() == "") || (sLast.trim() == "") ) { bValid = false; return bValid; } msg.style.display="inline-block" return bValid; } 

 <div class="main"> <form name="RentalForm" action="email-rental.php" method="POST" onsubmit="return SubmitRentalForm()" target="myFrame"> <table id="form_corners_rental" border="0" cellspacing="5"> <tr> <td>First Name</td> <td><input type="text" id="fname" name="fname" size="50" maxlength="60" placeholder="Enter First Name" /> <span id="errorname" style="font-size:9px;color:darkred;"></span> </td> <td>Last Name</td> <td><input type="text" id="lname" name="lname" size="50" maxlength="60" placeholder="Enter Last Name" /></td> </tr></table> <div id="Msg" style="display:none"> Thank you for your form submission. </div> <br/><br/> <input id="submit-btn-rental" type="submit" value="Rent Now"> </form> </div> <iframe name="myFrame" width="1" height="1" style="border:none"></iframe> 

Answer 2

試試這個

 function submitForm() { if(checkFieldsValidation()) { document.getElementById("Msg").style.display = "inline-block"; } } function checkFieldsValidation() { var sFirst = document.getElementById("fname").value; var sLast = document.getElementById("lname").value; if ( (sFirst.trim() == "") || (sLast.trim() == "") ) { return false; } return true; } 

  <div class="main"> <form name="RentalForm" action="email-rental.php" method="POST" onsubmit="submitForm()" target="myFrame"> <table id="form_corners_rental" border="0" cellspacing="5"> <tr> <td>First Name</td> <td><input type="text" id="fname" name="fname" size="50" maxlength="60" placeholder="Enter First Name" onblur="ValidateField(name)" /> <span id="errorname" style="font-size:9px;color:darkred;"></span> </td> <td>Last Name</td> <td><input type="text" id="lname" name="lname" size="50" maxlength="60" placeholder="Enter Last Name" onblur="ValidateField(name)" /></td> </tr></table> <div id="Msg" style="display:none"> Thank you for your form submission. </div> <br/><br/> <input id="submit-btn-rental" type="submit" value="Rent Now"> </form> </div> <iframe name="myFrame" width="1" height="1" style="border:none"></iframe>