Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preview button to display inputted text into a form

    I am having problems with my code. What I am trying to achieve is that click the Preview button it should display the values that the user has entered below the form. What's happening instead is that when I click the Preview it clears the form instead.

    (I have included the whole HTML code so you can paste it into a text editor and view the form in web browser.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Registration Form</title>
    
    
    <style type="text/css" media="screen">
    	form div {
    		margin-bottom: 1em;
    	}
    
    	div.submit input {
    		margin-left: 165px;
    	}
    
    	label.field {
    		display: block;
    		float: left;
    		margin:-right: 15px;
    		width: 150px;
    		text-align: right;
    	}
    
    	input[type="text"], select, textarea {
    		width: 300px;
    		font: 18px Verdana;
    		border: solid 2px #666;
    		background-color: #ada;
    	}
    
    	div.required label.field {
    		font-weight: bold;
    	}
    
    	div.required input, div.required select {
    		background-color: #6a6;
    		border: solid 2px #000;
    		font-weight: bold;
    	}
    
    
    </style>
    </head>
    <body>
    <h1>Registration Form</h1>
    
    <p>Please fill out the form below to register for our site. Fields
    with bold labels are required.</p>
    <p><script language="JavaScript">
    	function checkform(thisform) {
    	var errors = [];
    	var errorMessage = "Please correct the following errors:\n\n";
    
    	if (!thisform.name.value) {
    		errors.push("You must enter a name.");
    	}
    
    	var selected = false;
    
    	for (var i = 0; i < thisform.gender.length; i++) {
    		if (thisform.gender[i].checked) {
    			selected = true;
    		}
    	}
    
    	if (!selected) {
    		errors.push("You must choose a gender.");
    	}
    
    	if (errors.length > 0) {
    		for (var i = 0; i < errors.length; i++) {
    			errorMessage += errors[i] + "\n";
    		}
    
    		alert(errorMessage);
    
    		return false;
    	}
    	else {
    		return true;
    	}
    }
    </p>
    <p>	function preview() {
    		<p>name</p>
    		<p>Gender: "gender"</p>
    		<p>Operating System: "os"</p>
    		<p>Toys: "toy"</p>
    	}
    
    </script></p>
    <form method="post" onsubmit="return checkform(this)" enctype="multipart/form-data">
    
    <div class="required">
    	<label class="required field" for="name">Name</label>
    	<input name="name" />
    </div>
    
    <div class="required">
    	<label class="required field">Gender</label>
    	<label><input type="radio" name="gender" value="male" />
    male</label>
    	<label><input type="radio" name="gender" value="female" />
    female</label>
    	</div>
    
    	<div class="required">
    		<label class="required field">Operating System</label>
    		
    		<select name="os">
    			<option value="windows">Windows</option>
    			<option value="macos">Mac OS</option>
    			<option value="linux">Linux</option>
    			<option value="other">Other...</option>
    		</select>
    	</div>
    
    	<div>
    		<label class="field">Toys</label>
    		<label><input type="checkbox" name="toy" value="digicam" />
    		Digital Camera</label>
    		<label><input type="checkbox" name="toy" value="mp3" />
    		MP3 Player</label>
    		<label><input type="checkbox" name="toy" value="wlan" />
    		Wireless LAN</label>
    	</div>
    
    	<div>
    		<label class="field">Portrait</label>
    		<input type="file" name="portrait" />
    	</div>
    
    	<div>
    		<label class="field">Mini Biography</label>
    		<textarea name="bio" rows="6" cols="40"></textarea>
    	</div>
    
    	<div class="submit">
    		<input type="submit" value="register" />
    	</div>
    	
    	<div class="preview">
    		<button onclick=preview()><b><i>Preview</b></i></button>
    	</div>
    </form>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    First you need to remove all the <p> tags from within the script.

    Second, preview() doesn't actually have any code within it to do anything, so I'm pretty sure that since the form submits to itself that all you are doing is submitting the form and doing nothing with it, which just reloads the page.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by asadali View Post
    I am having problems with my code. What I am trying to achieve is that click the Preview button it should display the values that the user has entered below the form. What's happening instead is that when I click the Preview it clears the form instead.
    Well it submits the form
    which causes a page refresh
    and that clears the form
    to prevent this default action
    make the button type a button
    <button type="button" onclick = .....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •