CODEWITHSUNDEEP
javascript
Kath W.
Kath W.

Reputation: 37

Display Message on page after form submitted

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.

Upvotes: 3

Views: 117

Answers (2)

Saeed
Saeed

Reputation: 5488

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>

Upvotes: 3

Abslen Char
Abslen Char

Reputation: 3135

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>

Upvotes: 3

Related Questions