提交表单后在页面上显示消息

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>