html form help

**tyhodge07** · 01-15-2013, 06:50 AM

i have a simple html form that i created. I am wanting to edit the fields where you enter the number to drop down's. I am wanting to do this to limit the numbers which can be entered. another thing that i would like to do is add another drop down at the top of the form that would list the model's, with the models there would be 2 different entries for it (one being 2.6 the other being 2.7) the equation in the form goes as (spur / pinion * (here is where the model's drop down would be displayed as 2.6 or 2.7 depending on model selected))

here is the current code i am using and wanting to change up, any help would be great (note, the form works right now, but wanting to add the above options to make it more friendly and easier)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>

<body>
<form id="gearing" action="">
<fieldset>
	<legend><b>1/36 Scale</b> Final Gear Ratio</legend>
	<p>
		<label for="Pinion">Pinion</label>
		<input id="pinion" name="pinion" />




</br><b>Select 8-14 or 17</b>
	</p>
	<p>
		<label for="spur">Spur</label>
		<input id="spur" name="spur" />
</br><b>Select 53-59</b>
	</p>
	<p>
		<input type="submit" value="Submit" />
		or
		<input type="reset" value="Reset" />
	</p>
	<p>
		<label for="weight">Result</label>
		<input id="result" name="weight" />
	</p>
</fieldset>
</form>

<script>
(function () {
	function calculateGearing(pinion, spur) {
		pinion = parseFloat(pinion);
		spur = 
parseFloat(spur);
		return (spur / pinion * 2.7);
	}

	var gearing = document.getElementById("gearing");
	if (gearing) {
		gearing.onsubmit = function () {
			this.weight.value = calculateGearing(this.pinion.value, this.spur.value);
			return false;
		};
	}
}());
</script>
</body>
</html>

**bernie1227** · 01-15-2013, 07:42 AM

I'm pretty sure I know what you mean in terms of dropdowns:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>

<body>
<form id="gearing" action="">
<fieldset>
	<legend><b>1/36 Scale</b> Final Gear Ratio</legend>
	<p>
		<label for="Pinion">Pinion</label>
                <select id="Pinion" name="Pinion">
                     <option value="2.6">2.6</option>
                     <option value="2.7">2.7</option>
                </select>

</br><b>Select 8-14 or 17</b>
	</p>
	<p>
		<label for="spur">Spur</label>
		<select id="spur" name="spur">
                     <option value="8">8</option>
                     <option value="9">9</option>
                     <option value="10">10</option>
                     <option value="11">11</option>
                     <option value="12">12</option>
                     <option value="13">13</option>
                     <option value="14">14</option>
                     <option value="17">17</option>
                </select>
</br><b>Select 53-59</b>
	</p>
	<p>
		<input type="submit" value="Submit" />
		or
		<input type="reset" value="Reset" />
	</p>
	<p>
		<label for="weight">Result</label>
		<input id="result" name="weight" />
	</p>
</fieldset>
</form>

<script>
(function () {
	function calculateGearing(pinion, spur) {
		pinion = parseFloat(pinion);
		spur = 
parseFloat(spur);
		return (spur / pinion * 2.7);
	}

	var gearing = document.getElementById("gearing");
	if (gearing) {
		gearing.onsubmit = function () {
			this.weight.value = calculateGearing(this.Pinion.value, this.spur.value);
			return false;
		};
	}
}());
</script>
</body>
</html>

I'm not sure this is exactly what you want however.

**tyhodge07** · 01-15-2013, 07:54 AM

Thanks, I actually got it figured out. Click here to see it in action. It was something like what you just listed, i messed with it that way for awhile then found where I was missing. the script was this:

Code:

<script>
(function () {
	function calculateGearing(pinion, spur) {
		pinion = parseFloat(pinion);
		spur = 
parseFloat(spur);
		return (spur / pinion * 2.7);
	}

	var gearing = document.getElementById("gearing");
	if (gearing) {
		gearing.onsubmit = function () {
			this.weight.value = calculateGearing(this.Pinion.value, this.spur.value);
			return false;
		};
	}
}());
</script>

and needed to be:

Code:

<script>
(function () {
	function calculateGearing(model, pinion, spur) {
		model = 
parseFloat(model); 
                pinion = parseFloat(pinion);
		spur = 
parseFloat(spur);
                
		return (spur / pinion * model);
	}

	var gearing = document.getElementById("gearing");
	if (gearing) {
		gearing.onsubmit = function () {
			this.weight.value = calculateGearing(this.model.value, this.pinion.value, this.spur.value );
			return false;
		};
	}
}());
</script>

Thread: html form help

Thread Tools

Search Thread

html form help

Similar Threads

using an HTML form

html form to php email form

HTML/PHP Form 2

If I include a fileField (dw cs3) form element in an html form then the attached file

message form/feedback form html code

Bookmarks

Bookmarks

Posting Permissions