Javascript and Forms

injexen

Member since: Jul. 8, 2009

Offline.

Member Level 08 Audiophile

Javascript and Forms 2012-03-17 13:11:35

So I'm trying to write an interactive form, where clicking a radio button will unhide another field in the form. It is for display purpose, so I'm not submitting anything. I'm attempting to use Javascript to validate, but needless to say, it's not working very well. A run through of my code would be appreciated.
Keep in mind I'm a novice with javascript before you laugh...

Here's the javascript:

<head>
<script type="text/javascript">
			function getShrimpa(radio, name, ext){
				//Use of form 'shrimpa'. 
				var form = document.shrimpa;  
				
				document.form.name.style.display = 'block';
				document.getElementById('shrimpa').innerHTML = ext;	
			}
		</script>
	</head>

...and we also have the form:

<form name="shrimpa"> 
								<ol>
									<li>
										<input class="radio" type="radio" name="shrimp" value="demertic" onclick="getShrimpa(this.name, this.value, 'Demertic');" checked="checked" />
										<input class="radio" type="radio" name="shrimp" value="tiger" onclick="getShrimpa(this.form, this.value, 'Tiger');" />
										<input class="radio" type="radio" name="shrimp" value="peeledraw" onclick="getShrimpa(this.form, this.value, 'Peeled Raw');" />
										<input class="radio" type="radio" name="shrimp" value="cookedpeeledtailon" onclick="getShrimpa(this.form, this.value, 'Cooked Peeled Tail On')" />
									</li>
									
									<li>
										<a href="" id="shrimpa"></a>
									</li>	
							
									<li>
										<select name="demertic" style="display: block">
											<option value="0">8-12</option>
											<option value="1">10-18</option>
											<option value="2">16-20</option> 	
										</select>
									</li>
									
									<li>
										<select name="tiger" style="display: none">
											<option value="0">8-12</option>
											<option value="1">10-18</option>
											<option value="2">16-20</option> 	
										</select>
									</li>
									
									<li>
										<select name="peeledraw" style="display: none">
											<option value="0">8-12</option>
											<option value="1">10-18</option>
											<option value="2">16-20</option> 	
										</select>
									</li>
									
									<li>
										<select name="cookedpeeledtailon" style="display: none">
											<option value="0">8-12</option>
											<option value="1">10-18</option>
											<option value="2">16-20</option> 	
										</select>
									</li>
									
									<li>
										<input type="text" name="cpp" onFocus="this.blur();"/>
									</li>
								</ol>	
							</form>

This isn't at all a finished product; I'm trying to get the radio buttons to work at this point.
Thanks :)

…

injexen

Member since: Jul. 8, 2009

Offline.

Member Level 08 Audiophile

Response to Javascript and Forms 2012-03-17 13:39:16

I think I may be misusing the this keyword...

…

liljim

Member since: Dec. 16, 1999

Offline.

Send Private Message
Browse All Posts (11,656)

Staff Level 30 Blank Slate

Response to Javascript and Forms 2012-03-17 16:32:09

Why are you using radios to choose a type of Shrimp and then different selects to get a quantity? You could just simplify it by having them choose what they want and then have one select for the quantity.

Anyway, some changes for you to get it working:

function getShrimpa(radio, name, ext){
	var form = document.forms['shrimpa'];

	document.getElementById(name).style.display = 'block';
	document.getElementById('shrimpa').innerHTML = ext;
}

Give each of the <select> elements an id the same as the name and the above will work.

If you're unsure of whether or not you're getting the right values, use alert() to debug. For example, you could have done (overkill, I know, but it'll help you find points of failure):

alert(typeof form);
alert(typeof radio);
alert(typeof name);
alert(typeof ext);

alert(name);
alert(ext);

I don't even know what you're doing with "radio".

Try and avoid using ids for elements of the same name - you have your form with a name attribute of "shrimpa" and the a tag with an id of "shrimpa". That's the kind of thing that may trip you up down the line.

A more elegant solution would be to use jQuery for this - it's important that you understand what's going on with the javascript, but with something like jQuery you can easily cut back on markup probably way beyond this verbose example I threw together for you:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>

<body>

<form id="shrimpa" name="shrimpa" method="post" action="whatever">
	<ol>
		<li>
			<input class="radio" type="radio" name="shrimp" value="demertic" checked="checked" /> <span>Demetric</span>
			<input class="radio" type="radio" name="shrimp" value="tiger" /> <span>Tiger</span>
			<input class="radio" type="radio" name="shrimp" value="peeledraw" /> <span>Peeled Raw</span>
			<input class="radio" type="radio" name="shrimp" value="cookedpeeledtailon" /> <span>Cooked Peeled Tail On</span>
		</li>

		<li>
			<a href="" id="shrimpa_href"></a>
		</li>

		<li>
			<select name="demertic" style="display: block">
				<option value="0">8-12</option>
				<option value="1">10-18</option>
				<option value="2">16-20</option>
			</select>
		</li>

		<li>
			<select name="tiger" style="display: none">
				<option value="0">8-12</option>
				<option value="1">10-18</option>
				<option value="2">16-20</option>
			</select>
		</li>

		<li>
			<select name="peeledraw" style="display: none">
				<option value="0">8-12</option>
				<option value="1">10-18</option>
				<option value="2">16-20</option>
			</select>
		</li>

		<li>
			<select name="cookedpeeledtailon" style="display: none">
				<option value="0">8-12</option>
				<option value="1">10-18</option>
				<option value="2">16-20</option>
			</select>
		</li>

		<li>
			<input type="text" name="cpp" onfocus="this.blur();"/>
		</li>
	</ol>
</form>

<script type="text/javascript">
/* <![CDATA[ */

(function ($) {
	var
		form = $('#shrimpa'), // self explanatory
		a_el = $('#shrimpa_href'), // the <a> you're changing the inner html of
		buttons = form.find('input[name="shrimp"]'), // your radio buttons
		selects = form.find('select'), // the selects
		that, // throwaway values for your elements
		me
	;

	buttons.click(function () {
		that = $(this);

		selects.each(function () {
			me = $(this);

			if (me.attr('name') !== that.val()) {
				// I'm assuming you want to hide selects that aren't related to the button that's
				// clicked
				me
					.prop('selectedIndex', 0) // stick the quantity they've previously selected back to the first index
					.hide() // and hide it
				;
			} else {
				me.show(); // just show the select for them to choose from
				
				a_el.html( // insert the following into the <a> tag:
					that
						.next() // gets the span after the button
						.html() // and finds the inner html from that span
					)
				;
			}

		});
	});

	form.submit(function () {
		// do something here

		return false;
	});

})(jQuery);

/* ]]> */
</script>

</body>
</html>

Okay, bye.

…

injexen

Member since: Jul. 8, 2009

Offline.

Member Level 08 Audiophile

Response to Javascript and Forms 2012-03-17 19:23:16

thank you very much Jim!
So I made a few minor changes to the code as you instructed. I won't post up the entire script, because obviously you have the old example above, so i just provide a minor demostration:

<script type="text/javascript">
			function getShrimpa(radio, name, ext) {
				//Use of form 'shrimpa'. 
				var form = document.shrimpa;  
				
				document.getElementByID(name).style.display = 'visible';
				document.getElementByID('shrimpa').innerHTML = ext;	
			}
		</script>
	</head>
	
	<body>
		<div id="mainframe"> 
			<div id="page">
				<div id="content">
		
					<div class="left">
						<div class="col">
							<form name="shrimpa"> 
								<ol>
									<li>
										<input class="radio" type="radio" name="shrimp" value="demertic" onclick="getShrimpa(this.name, this.value, 'Demertic');" checked="checked" />
										<input class="radio" type="radio" name="shrimp" value="tiger" onchange="getShrimpa(this.form, this.value, 'Tiger');" />
										<input class="radio" type="radio" name="shrimp" value="peeledraw" onclick="getShrimpa(this.form, this.value, 'Peeled Raw');" />
										<input class="radio" type="radio" name="shrimp" value="cookedpeeledtailon" onclick="getShrimpa(this.form, this.value, 'Cooked Peeled Tail On');" />
									</li>
									
									<li>
										<a href="" id="shrimpa"></a>
									</li>	
							
									<li>
										<select id="demertic" style="display: block">
											<option value="0">8-12</option>
											<option value="1">10-18</option>
											<option value="2">16-20</option> 	
										</select>
									</li>

As you can see, I changed the elements to grab by ID, but I'm still not getting any results. Why is that?
jQuery is the way to go, but I want to get the essentials on hand. I also made a few other minor changes, but nothing that I believe will affect this functionality.

…

liljim

Member since: Dec. 16, 1999

Offline.

Send Private Message
Browse All Posts (11,656)

Staff Level 30 Blank Slate

Response to Javascript and Forms 2012-03-18 15:24:27

Well, aside from ignoring what I said about not using the same label for id / name in different elements, do a "spot the difference" on the function you've posted and the one I left you.

…

Javascript and Forms

FEATUREDCONTENT

Earth Day Collab 2024

WINDOWZ XP 2012 EDITION

Gacha Panic

Main Sections

Extra, Extra!

Community

NG Related