我有一个包含 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 标签,但我不知道该怎么做。
有人能给我指明正确的方向吗。
最佳答案
试试这个
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>
关于javascript - 提交表单后在页面上显示消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50120705/