Display Message on page after form submitted

Question

I have a form with 2 fields (for this example) which I validate using JavaScript and if the fields contain data, the form will submit when user clicks the Submit button. I am using an iframe in the form tag to send the output to the same page.

What I would like to do is to have a message display below the form saying "Thank you for your submission". I am having difficulty trying to figure this part out.

 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> 

I have added in a div tag, but am not sure how to do this.

Could someone please point me in the right direction.

Answer 1

Simply change the style of the msg div when the form is submited

 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

Try this

 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>