Jump to content

[SOLVED] Form and Javascript

ainoy31

By ainoy31
in Javascript Help

Recommended Posts

ainoy31 Advanced Member

ainoy31

Posted
Posted

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 

 

<div id="air" style="display:none; ">

...code here

</div>

<div id="air" style="display:none; ">

...code here

</div>

<div id="air" style="display:none; ">

...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.

 

<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> 

 

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

 

Link to comment
https://forums.phpfreaks.com/topic/80740-solved-form-and-javascript/
Share on other sites
phpQuestioner Regular Member

phpQuestioner

Posted
Posted

man - that's all I can say :D

 

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 Newbie

BenInBlack

Posted
Posted

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 Regular Member

phpQuestioner

Posted
Posted

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 Advanced Member

ainoy31

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.