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

Question

我有一个表单有两个字段（这里只是举例），我使用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标签，但不确定如何操作。

请有经验的人指点一下。

- Kath W.

---

你想知道如何显示div id="Msg"，还是想知道如何等待提交完成后再显示div，或者两者都想知道？ - theGleep

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>

- Abslen Char

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>

- Saeed