Display Javascript Confirmation box on form submit with form contents

I'd like to pop open a javascript alert box and show the details of a form before submitting.

Below is what I have so far for the JavaScript. Could someone assist? Thank you.

<form name="myForm" onsubmit="confirm()">
<input type="text" id="theNumber" name="theNumber" />
<input type="text" id="theName" name="theName" />

<script language="javascript">
function Confirm(){
      var theNumber = document.getElementById("theNumber").value;
      var theName = document.getElementById("theName").value;
	var r=confirm("Are you sure you want to submit these details?");
		if (r==true)
		 {
//show something like the below here
The Number: theNumber here
The Name: theName here

		 }
		else
		 {
		  alert("You pressed Cancel!");
		 }
</script>

Open in new window

earwig75Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
try:
<form name="myForm" action="#" onsubmit="return Confirm()">
<input type="text" id="theNumber" name="theNumber" />
<input type="text" id="theName" name="theName" /><input type="submit"/>
</form>
<script language="javascript">
function Confirm(){
      var theNumber = document.getElementById("theNumber").value;
      var theName = document.getElementById("theName").value;

		var r=confirm("Are you sure you want to submit these details?");
		
		if (r==true)
		 {
			var str="You submitted:";
			  str+="\n    Name: " + theName;
			  str+="\n  Number: " + theNumber;
			  alert(str);
			return true;
		 }
		else
		 {
		  alert("You pressed Cancel!");
		 }
return false;
}
</script>

Open in new window


NOTE: Javascript is case sensitive, so you need onsubmit="Confirm()" -- with capital "C"
0
earwig75Author Commented:
I apologize, I need the form details to come before the if r==true... I'd like them to see the form details before clicking Ok.
0
earwig75Author Commented:
Also, when I pressed cancel it submitted the form instead of returning false.
0
hieloCommented:
>>Also, when I pressed cancel it submitted the form instead of returning false.
Did you use onsubmit="return Confirm()"?

Copy and paste the following and try again:
<form name="myForm" action="#" onsubmit="return Confirm()">
<input type="text" id="theNumber" name="theNumber" />
<input type="text" id="theName" name="theName" /><input type="submit"/>
</form>
<script language="javascript">
function Confirm(){
      var theNumber = document.getElementById("theNumber").value;
      var theName = document.getElementById("theName").value;
		
			var str="Are you sure you want to submit these details?";
			  str+="\nYou submitted:";
			  str+="\n    Name: "+theName;
			  str+="\n  Number: "+theNumber;
		var r=confirm(str);
		
		if (r==false)
		 {
		  alert("You pressed Cancel!");
		 }
return r;
}
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.