JavaScript Forum

**tobeyt23** · 12-08-2005, 05:59 PM

I would like to create link based off form inputs. So as a user inputs information and selects options I want to have a link that has those inputs attached to it. Can this be done?

**funkdaddu** · 12-08-2005, 10:47 PM

Yes, if you can be more specific about what you want, I can try to help you out.

**tobeyt23** · 12-09-2005, 12:16 PM

When they fill in the form before they click the submit button i have another submit button to popup a window with a preview of the inputs so they can see what it looks like.

**funkdaddu** · 02:03 PM

Is htis what you were looking for?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function showVar() {
	var formVar = "";
	for (i=0; i <= myForm.length-1; i++) {
			switch (myForm.elements[i].type) {
				case "radio":
					if (myForm.elements[i].checked) {
						formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "\n";
					}
     			break;
				
				case "checkbox":
					if (myForm.elements[i].checked) {
						formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "\n";
					} else {
						formVar += myForm.elements[i].name.replace(/_/g," ") + " : Not Checked\n";					
					}
				break;

				case "text":
					formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "\n";
				break;
									
				case "textarea":
				break;

				default:
				break;
			}
	}
	return confirm("Please confirm. Is this the info you wish to send?\n\n" + formVar);
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="myForm" action="#" method="get" name="myForm" onsubmit="return showVar();">
			<label>Your Name:</label><input type="text" name="Your_Name" value="Grifty McGriff" size="24">
			<p><label>Your Age:</label><input type="text" name="Your_Age" value="83" size="24"></p>
			<p><label>Are You Cool?</label> <input type="radio" name="Are_You_Cool" value="Yes" checked>Yes <input type="radio" name="Are_You_Cool" value="No">No</p>
			<p> <label>Are You a Geek?</label> <input type="checkbox" name="Are You a Geek" value="Yes" checked></p>
			<p><input type="submit"></p>
		</form>
		<p></p>
	</body>

</html>

When you click submit it show you the form data you are about to sent, if you click cancel, it doesn't send, if youi click OK it sends.

**tobeyt23** · 12-12-2005, 12:46 PM

Almost ... however I would like inputs to be displayed in the same page not a popup.

**funkdaddu** · 12-12-2005, 02:09 PM

How about this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

       <head>
               <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
               <title>Untitled Page</title>
               <style><!--
               	#confirm {
               		display: none
               	}
               
               --></style>
               <script type="text/javascript"><!--
var sendMe = false;

function resetForm() {
    document.getElementById("formFields").style.display = "block";
	document.getElementById("confirm").style.display = "none";
}

function confirmForm() {
	resetForm();
	
	if (sendMe == true) {
		return true;
	} else {
	       var formVar = "";
	       for (i=0; i <= myForm.length-1; i++) {
				switch (myForm.elements[i].type) {
					case "radio":
				        if (myForm.elements[i].checked) {
				        	formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "<br>";
				        }
					break;
					case "checkbox":
				        if (myForm.elements[i].checked) {
				                formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "<br>";
				        } else {
				                formVar += myForm.elements[i].name.replace(/_/g," ") + " : Not Checked<br>";                                      
				        }
					break;
									
					case "submit":
					break;
				
					default:
						formVar += myForm.elements[i].name.replace(/_/g," ") + " : " + myForm.elements[i].value + "<br>";
					break;
				}
	       }
	       document.getElementById("formFields").style.display = "none";
	       document.getElementById("confirmData").innerHTML  = formVar;
	       document.getElementById("confirm").style.display = "block";
	       return false;
	}
}
//-->
</script>
       </head>

	<body bgcolor="#ffffff">
		<form id="myForm" action="#" method="get" name="myForm" onsubmit="return confirmForm();">
			<div id="formFields">
				<label>Your Name:</label><input type="text" name="Your_Name" value="Grifty McGriff" size="24">
				<p><label>Your Age:</label><input type="text" name="Your_Age" value="83" size="24"></p>
				<p><label>Are You Cool?</label> <input type="radio" name="Are_You_Cool" value="Yes" checked>Yes <input type="radio" name="Are_You_Cool" value="No">No</p>
				<p> <label>Are You a Geek?</label> <input type="checkbox" name="Are You a Geek" value="Yes" checked></p>
				<input type="submit" id="confirmButton" value="Confirm &amp; Send..." >
			</div>
			<div id="confirm">
				<p style="font-weight: bold">Please confirm this the info you wish to send:</p>
				<blockquote id="confirmData"></blockquote>
				<input type="submit" value="Go Back and Change" onclick="resetForm(); return false;"> <input type="submit" id="confirmButton" value="Send" onmousedown="sendMe=true;"></p>
			
		</form>
	</body>

</html>

It will hide the form input, show the output and give the option to go back and change.