[SOLVED] Form and Javascript

ainoy31 · December 8, 2007

Hello-

I am putting three forms in one. I have 3 radio buttons where someone can choose what they need to do.

<input type="radio" name="shipment_type" value="AIR" onClick="hideAll(); changeDiv('air', 'block'); ">AIR

<input type="radio" name="shipment_type" value="LCL" onClick="hideAll(); changeDiv('lcl', 'block'); ">LCL

<input type="radio" name="shipment_type" value="FCL" onClick="hideAll(); changeDiv('fcl', 'block'); ">FCL

...code here

</div>

...code here

</div>

...code here

</div>

All three options use the same function to enter dimensions and then calculate the total dimensions. I am using javascript for the calculation.

function calculate_volume(result)

{

var numpiece = Number(form1.numpiece1.value)+ Number(form1.numpiece2.value)+ Number(form1.numpiece3.value)+ Number(form1.numpiece4.value)

document.getElementById('numpiece_1').value = numpiece;

var ci=((Number(form1.length1.value)*Number(form1.width1.value)*Number(form1.height1.value))*Number(form1.numpiece1.value))+((Number(form1.length2.value)*Number(form1.width2.value)*Number(form1.height2.value))*Number(form1.numpiece2.value))+((Number(form1.length3.value)*Number(form1.width3.value)*Number(form1.height3.value))*Number(form1.numpiece3.value))+((Number(form1.length4.value)*Number(form1.width4.value)*Number(form1.height4.value))*Number(form1.numpiece4.value))

}

My issue is that I do not want to have to duplicate the two functions above for all three. I hope this is clear enough as to what I need help with. Much appreciation. AM

phpQuestioner · December 8, 2007

man - that's all I can say

your going to have to display your full code; because you have allot stuff missing from the script you provided. you have field values in your javascript; that do not even exist in you html. try to tell me what you want to accomplish too; because I am lost and your script/html is not helping me. are you even able to make this code, you provided, function? because I tested it and it threw all kinds of errors. also; when you post code to these forums; use the code button before you put your code in the post - so much easier that way for us. it is the "#" button in the thread tools.

code area looks like this:

Put Code In Here

also what is the "result" parameter in your calculate_volume function for? your not using it anywhere that I can see.

BenInBlack · December 8, 2007

Well im going to take a stab at your not wanting to do multiple function

<td><input name="numpiece1" type="text" id="numpiece-1" size = '10' onChange="calculate_volume(this)"> @</td>
<td><input name="length1" type="text" id="length-1" size = '10' onChange="calculate_volume(this)"></td>
<td><input name="width1" type="text" id="width-1" size = '10' onChange="calculate_volume(this)"></td>
<td><input name="height1" type="text" id="height-1" size = '10' onChange="calculate_volume(this)"></td> 

function calculate_volume(inputObj)
{
   var idIdx = inputObj.id.split("-")[1];
   var numpiece = 0;
   var ci = 0
   for (i=1;i<=4;i++)
   {
      numpiece = (numpiece + Number(document.getElementById('numpiece-'+i).value));
      ci = (ci + (Number(document.getElementById('length-'+i).value)) * Number(document.getElementById('width-'+i).value) *       Number(document.getElementById('height-'+i).value));
}
   document.getElementById('numpiece_'+idIdx).value = numpiece;
   document.getElementById('ci_'+idIdx).value = ci;

}

not sure what u are doing with ci so i made an input field with id of ci_#

phpQuestioner · December 8, 2007

I don't know exactly what you were trying to do, but see if this is anywhere close:

<script language="javascript">
function calculate_volume()
{
var field1 = document.getElementById('numpiece1').value;
var field2 = document.getElementById('numpiece2').value;
var field3 = document.getElementById('numpiece3').value;
var field1a = document.getElementById('length1').value;
var field2a = document.getElementById('length2').value;
var field3a = document.getElementById('length3').value;
var field1b = document.getElementById('width1').value;
var field2b = document.getElementById('width2').value;
var field3b = document.getElementById('width3').value;
var field1c = document.getElementById('height1').value;
var field2c = document.getElementById('height2').value;
var field3c = document.getElementById('height3').value;
var numpiece = (field1a*1) + (field1b*1) + (field1c*1);
var numpieceA = (field2a*1) + (field2b*1) + (field2c*1);
var numpieceB = (field3a*1) + (field3b*1) + (field3c*1);
document.getElementById('numpiece1').value = numpiece;
document.getElementById('numpiece2').value = numpieceA;
document.getElementById('numpiece3').value = numpieceB;
var ci = (field1 * field1a * field1b * field1c) + (field2 * field2a * field2b * field2c) + (field3 * field3a * field3b * field3c);
}
function changeDiv(pick,stylesel)
{
document.getElementById(pick).style.display = stylesel;
}
function hide(unpick1,unpick2)
{
document.getElementById(unpick1).style.display="none";
document.getElementById(unpick2).style.display="none";
}
</script>

<form name="form1">

<input type="radio" name="shipment_type" value="AIR" onClick="hide('lcl','fcl'); changeDiv('air', 'block'); ">AIR
<input type="radio" name="shipment_type" value="LCL" onClick="hide('air','fcl'); changeDiv('lcl', 'block'); ">LCL
<input type="radio" name="shipment_type" value="FCL" onClick="hide('air','lcl'); changeDiv('fcl', 'block'); ">FCL 


<div id="air" style="display:none">
<table>
<td><input name="numpiece1" type="text" id="numpiece1" size = '10' onChange="calculate_volume()" value="0"> @</td>
<td><input name="length1" type="text" id="length1" size = '10' onChange="calculate_volume()"></td>
<td><input name="width1" type="text" id="width1" size = '10' onChange="calculate_volume()"></td>
<td><input name="height1" type="text" id="height1" size = '10' onChange="calculate_volume()"></td>  
</table>
</div>
<div id="lcl" style="display:none">
<table>
<td><input name="numpiece2" type="text" id="numpiece2" size = '10' onChange="calculate_volume()" value="0"> @</td>
<td><input name="length2" type="text" id="length2" size = '10' onChange="calculate_volume()"></td>
<td><input name="width2" type="text" id="width2" size = '10' onChange="calculate_volume()"></td>
<td><input name="height2" type="text" id="height2" size = '10' onChange="calculate_volume()"></td>  
</table>
</div>
<div id="fcl" style="display:none">
<table>
<td><input name="numpiece3" type="text" id="numpiece3" size = '10' onChange="calculate_volume()" value="0"> @</td>
<td><input name="length3" type="text" id="length3" size = '10' onChange="calculate_volume()"></td>
<td><input name="width3" type="text" id="width3" size = '10' onChange="calculate_volume()"></td>
<td><input name="height3" type="text" id="height3" size = '10' onChange="calculate_volume()"></td>  
</table>
</div>
</form>

I didn't know what the "ci" variable was for either; but I straightened it up a little bit for you.

ainoy31 · December 10, 2007

Thanks for all the reply. I situation is a little bit hard to explain. So, I am going this route. I have three radio buttons to choose from.

<input type="radio" name="shipment_type" value="AIR" id="air1" onClick="hideAll(); changeDiv('air', 'block'); ">AIR
<input type="radio" name="shipment_type" value="LCL" id="lcl" onClick="hideAll(); changeDiv('dim', 'block'); ">LCL
<input type="radio" name="shipment_type" value="FCL" id="fcl" onClick="hideAll(); changeDiv('dim', 'block'); ">FCL

<div id="air" style="display:none; ">
<br>
<b>Known Shipper:</b>
<input type="radio" name="known_shipper"  value="Yes" onClick="hideAll(); changeDiv('dim', 'block'); ">Yes  
<input type="radio" name="known_shipper" value="No" onClick="hideAll(); changeDiv('dim', 'block'); ">No
<input type="radio" name="known_shipper"  value="Unknown" onClick="hideAll(); changeDiv('dim', 'block'); ">Unknown
</div>

<div id="dim" style="display:none; ">
<br>
<table>
<tr>
	<td>Pieces Type:</td>
		<td>
			<select name="pieces_type" onchange="toggleOther( document.form1.pieces_type.options[ document.form1.pieces_type.selectedIndex ].value );">
			<option value="">-Select One-</option>
			<option value="Pallets">Pallets</option>
			<option value="Packages">Packages</option>
			<option value="Totes">Totes</option>
			<option value="Other1">Other - Specify</option>
			</select>
			<input type="text" name="Other1" value="" size="25" maxlength="40" style="visibility:hidden" />
		</td>
</tr>
<tr>
	<td><table>
	<tr>
	    <td width="27%" align = 'center'>Pieces</font></td>
	    <td width="23%" align = 'center'>Length</font></td>
	    <td width="25%" align = 'center'>Width</font></td>
	    <td width="25%" align = 'center'>Height</font></td>
  		</tr>

  		<tr>
	    <td><input name="numpiece1" type="text" id="numpiece1" size = '10' onChange="calculate_volume()"> @</td>
	    <td><input name="length1" type="text" id="length1" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="width1" type="text" id="width1" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="height1" type="text" id="height1" size = '10' onChange="calculate_volume()"></td>
  		</tr>
		<tr>
	    <td><input name="numpiece2" type="text" id="numpiece2" size = '10' onChange="calculate_volume()"> @</td>
	    <td><input name="length2" type="text" id="length2" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="width2" type="text" id="width2" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="height2" type="text" id="height2" size = '10' onChange="calculate_volume()"></td>
  		</tr>
  		<tr>
	    <td><input name="numpiece3" type="text" id="numpiece3" size = '10' onChange="calculate_volume()"> @</td>
	    <td><input name="length3" type="text" id="length3" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="width3" type="text" id="width3" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="height3" type="text" id="height3" size = '10' onChange="calculate_volume()"></td>
  		</tr>
  		<tr>
	    <td><input name="numpiece4" type="text" id="numpiece4" size = '10' onChange="calculate_volume()"> @</td>
	    <td><input name="length4" type="text" id="length4" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="width4" type="text" id="width4" size = '10' onChange="calculate_volume()"></td>
	    <td><input name="height4" type="text" id="height4" size = '10' onChange="calculate_volume()"></td>
  		</tr>
	</table></td>
</tr>
<tr>
	<td>Total Dimension:</td>
	<td><input name="cubicinches1" type="text" id="cubicinches1" size = '10' READONLY><span id="measurement3"></span></td>
</tr>
<tr>
	<td>Dimensional Weight:</td>
	<td><input type="text" name="dim_wgt1" id="dim_wgt1" size="5" READONLY><span id="measurement2"></span></td>
</tr>
<tr>
	<td>Total Shipment Weight:</td>
	<td><input type="text" name="lbs1" id="amount1" size="5">
		<input type="radio" name="weight1" value="lbs"  id="weight1" onClick="convertUS(); ">Lbs
		<input type="radio" name="weight1"  value="kgs" id="weight2" onClick="convertNonUS(); ">Kgs
		   =   <input type="text" name="result1"  id="result1" size="5" READONLY>
		<span id="measurement1"></span>
	</td>
</tr>
<tr>
	<td>Chargeable Weight:</td>
	<td><input type="text" name="charge_wgt1" id="charge_wgt1" size="5" READONLY>Kgs</td>
</tr>
<tr>
	<td>Total Pieces:</td>
	<td><input name="numpiece_1" type="text" id="numpiece_1" value="" size="5" READONLY></td>
</tr>
</table>
</div>

Then, I have my javascript as:

function calculate_volume(result)
{
var numpiece = Number(form1.numpiece1.value)+ Number(form1.numpiece2.value)+ Number(form1.numpiece3.value)+ Number(form1.numpiece4.value)
document.getElementById('numpiece_1').value = numpiece;
var ci=((Number(form1.length1.value)*Number(form1.width1.value)*Number(form1.height1.value))*Number(form1.numpiece1.value))+((Number(form1.length2.value)*Number(form1.width2.value)*Number(form1.height2.value))*Number(form1.numpiece2.value))+((Number(form1.length3.value)*Number(form1.width3.value)*Number(form1.height3.value))*Number(form1.numpiece3.value))+((Number(form1.length4.value)*Number(form1.width4.value)*Number(form1.height4.value))*Number(form1.numpiece4.value))
var x = document.getElementById('cubicinches1').value = ci;
document.getElementById('measurement3').innerHTML = " Cubic Inches";

if(document.getElementsById('air1').value == 'air')
{
	var dw1 = x / 366; //this give the dimensional weight in kgs
	var rnum = dw1
	var rlength = 2; // The number of decimal places to round to
	if (rnum > 8191 && rnum < 10485) 
	{
		rnum = rnum-5000;
		var dw = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
		dw = dw+5000;
	} 
	else 
	{
		var dw = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
	}

	var dw1 = document.getElementById('dim_wgt1').value = dw;
	document.getElementById('measurement2').innerHTML = " Kgs";
}
if(document.getElementById('lcl').value == 'lcl')
{
	var dw = x / 1728; //this gives the dimensional weight in CFT
	var dw1 = dw / 35.315; //this gives the dimensional weight in CBM
	var rnum = dw1
	var rlength = 2; // The number of decimal places to round to
	if (rnum > 8191 && rnum < 10485) 
	{
		rnum = rnum-5000;
		var dw = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
		dw = dw+5000;
	} 
	else 
	{
		var dw = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
	}

	var dw1 = document.getElementById('dim_wgt1').value = dw;
	document.getElementById('measurement2').innerHTML = " CBM";
}

I need to distinguish in my javascript if AIR or LCL is selected. So I can do my calculation. Shouldn't this work:

if(document.getElementById('lcl').value == 'lcl')

{

.....so forth

}

if(document.getElementById('air1).value == 'air')

{

....

}

Thanks,

AM

ainoy31 · December 10, 2007

Re-doing my form... Thanks for all the suggestions.

Sign In

[SOLVED] Form and Javascript

Recommended Posts

ainoy31

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

BenInBlack

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

ainoy31

Link to comment

Share on other sites

ainoy31

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information