Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Set all of select and/or text boxes to the same value?? 3

Status
Not open for further replies.

kuolung

Programmer
Sep 2, 1999
51
0
0
US
Does anyone have the script that can set all select boxes or text to the same value? I need to set up for something looks like the screen design below:

absolutevv3.jpg


Thanks so much in advance!!! Your help/hint would be greatly appreciated!!!
 
Hi

As you have multiple sets of [tt]select[/tt] controls, it would be better to not let us guess how the elements of logical groups can be recognized. It could be done be just counting even/odd [tt]select[/tt]s, but that is stupid and not flexible. Post your actual HTML code.

Feherke.
 
This can be done pretty easily if you make all respective boxes the same name as each other.

Example, all textboxes under "Quantity" be given the name "quantityText".

Give your "All" inputs ids, say like id = "quantityAll"

Also, encapsulate all your input boxes UNDER the headings inside a div and give it an id = "contentDiv".

Your code would look something like this:

Code:
var quantityAllValue = document.getElementById("quantityAll").value;
var inputArray = document.getElementById("contentDiv").getElementsByTagName("input");
var inputArrayLength = inputArray.length;
for (a = 0 a < inputArrayLength; a++) {
   if (inputArray[a].name == "quantityText") {
      inputArray[a].value = quantityAllValue;   
   }
   //Repeat If statement for Unit of Measure
   //Repeat If statement for Disposition
}

Put that code above in a function that get called on the click of the anchors that say "All".





[monkey][snake] <.
 
Since Unit of Measure and Disposition are in dropdown boxes, you would create a similar function like I posted above, but loop with a getElementsByTagName("select").

[monkey][snake] <.
 
here is my html code, and also I'm testing out monksnake's suggestion..

Code:
<table cellpadding="0" cellspacing="0" border="0" style="width: 700px; position: relative; float: left;" class="topBorder">
	<tr>
		<td class="pad2px" width="200">Set all of the below to:</td>
		<td class="pad2px" width="80"><input type="text" name="keySHIPMENT_QUANTITY" value="" size="3"></td>
		<td class="pad2px" width="140"><select name="keyUNIT_MEASURE_ID">
		<option value="">-- select --</option>
		
		<option value="1">Specimens</option>
		
		<option value="2">Kilograms</option>
		
		<option value="3">ac/ft</option>
		
		<option value="4">Lbs</option>
		
		</select></td>
		<td class="pad2px" width="200"><select name="keySHIPMENT_DISPOSITION_ID">
		<option value="">-- select --</option>
		
		<option value="1">Package Released, Carrier Notified</option>
		
		<option value="3">Pending Inspection</option>
		
		</select></td>
		<td class="pad2px" width="40"></td>
	</tr>
	<tr class="columnHeaderBG">
		<td class="pad2px" width="200"><span class="columnHeaderFont">Article Name</span></td>
		<td class="pad2px" width="80"><span class="columnHeaderFont">Quantity</span></td>
		<td class="pad2px" width="140"><span class="columnHeaderFont">Unit of Measures</span></td>
		<td class="pad2px" width="200"><span class="columnHeaderFont">Disposition</span></td>
		<td class="pad2px" width="40"></td>
	</tr>
	
	
	<tr>
		<td class="pad2px" valign="top">Artichoke Aegean ringspot virus</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY1" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID1">
		<option value="" selected>-- select --</option>
		
		<option value="1">Specimens</option>
		
		<option value="2">Kilograms</option>
		
		<option value="3">ac/ft</option>
		
		<option value="4">Lbs</option>
		
		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID1">
		<option value="" selected>-- select --</option>
		
		<option value="1">Package Released, Carrier Notified</option>
		
		<option value="3">Pending Inspection</option>
		
		</select><br /></td>
	</tr>
	
	<tr class="rowDivider"><td colspan="5"></td></tr>
	
	
	
	<tr>
		<td class="pad2px" valign="top">Artichoke mottled crinkle virus</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY2" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID2">
		<option value="" selected>-- select --</option>
		
		<option value="1">Specimens</option>
		
		<option value="2">Kilograms</option>
		
		<option value="3">ac/ft</option>
		
		<option value="4">Lbs</option>
		
		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID2">
		<option value="" selected>-- select --</option>
		
		<option value="1">Package Released, Carrier Notified</option>
		
		<option value="3">Pending Inspection</option>
		
		</select><br /></td>
	</tr>
	
	<tr class="rowDivider"><td colspan="5"></td></tr>
	
	
	
	<tr>
		<td class="pad2px" valign="top">Duckweed</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY3" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID3">
		<option value="" selected>-- select --</option>
		
		<option value="1">Specimens</option>
		
		<option value="2">Kilograms</option>
		
		<option value="3">ac/ft</option>
		
		<option value="4">Lbs</option>
		
		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID3">
		<option value="" selected>-- select --</option>
		
		<option value="1">Package Released, Carrier Notified</option>
		
		<option value="3">Pending Inspection</option>
		
		</select><br /></td>
	</tr>
	
	
	</table>
 
it doesn't work, and I get no javascript error? something is missing? please help!


Code:
<script>
function setAllValues() {
var quantityAllValue = document.getElementById("keySHIPMENT_QUANTITY").value;
var inputArray = document.getElementById("contentDiv").getElementsByTagName("input");
var inputArrayLength = inputArray.length;
for (a = 0; a < inputArrayLength; a++) {
   if (inputArray[a].name == "SHIPMENT_QUANTITY") {
      inputArray[a].value = quantityAllValue;
   }
}
}
</script>

<table cellpadding="0" cellspacing="0" border="0" style="width: 700px; position: relative; float: left;" class="topBorder">
	<tr>
		<td class="pad2px" width="200">Set all of the below to:</td>
		<td class="pad2px" width="80"><input type="text" name="keySHIPMENT_QUANTITY" value="" size="3" id="keySHIPMENT_QUANTITY"><a href="#" onclick="setAllValues();" id="keySHIPMENT_QUANTITY">All</a></td>
		<td class="pad2px" width="140"><select name="keyUNIT_MEASURE_ID">
		<option value="">-- select --</option>

		<option value="1">Specimens</option>

		<option value="2">Kilograms</option>

		<option value="3">ac/ft</option>

		<option value="4">Lbs</option>

		</select></td>
		<td class="pad2px" width="200"><select name="keySHIPMENT_DISPOSITION_ID">
		<option value="">-- select --</option>

		<option value="1">Package Released, Carrier Notified</option>

		<option value="3">Pending Inspection</option>

		</select></td>
		<td class="pad2px" width="40"></td>
	</tr>
	<tr class="columnHeaderBG">
		<td class="pad2px" width="200"><span class="columnHeaderFont">Article Name</span></td>
		<td class="pad2px" width="80"><span class="columnHeaderFont">Quantity</span></td>
		<td class="pad2px" width="140"><span class="columnHeaderFont">Unit of Measures</span></td>
		<td class="pad2px" width="200"><span class="columnHeaderFont">Disposition</span></td>
		<td class="pad2px" width="40"></td>
	</tr>

	<div id = "contentDiv">
	<tr>
		<td class="pad2px" valign="top">Artichoke Aegean ringspot virus</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID1">
		<option value="" selected>-- select --</option>

		<option value="1">Specimens</option>

		<option value="2">Kilograms</option>

		<option value="3">ac/ft</option>

		<option value="4">Lbs</option>

		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID1">
		<option value="" selected>-- select --</option>

		<option value="1">Package Released, Carrier Notified</option>

		<option value="3">Pending Inspection</option>

		</select><br /></td>
	</tr>
	</div>
	<tr class="rowDivider"><td colspan="5"></td></tr>



	<tr>
		<td class="pad2px" valign="top">Artichoke mottled crinkle virus</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID2">
		<option value="" selected>-- select --</option>

		<option value="1">Specimens</option>

		<option value="2">Kilograms</option>

		<option value="3">ac/ft</option>

		<option value="4">Lbs</option>

		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID2">
		<option value="" selected>-- select --</option>

		<option value="1">Package Released, Carrier Notified</option>

		<option value="3">Pending Inspection</option>

		</select><br /></td>
	</tr>

	<tr class="rowDivider"><td colspan="5"></td></tr>



	<tr>
		<td class="pad2px" valign="top">Duckweed</td>
		<td class="pad2px" valign="top"><input type="text" name="SHIPMENT_QUANTITY" value="" size="3"></td>
		<td class="pad2px" valign="top"><select name="UNIT_MEASURE_ID3">
		<option value="" selected>-- select --</option>

		<option value="1">Specimens</option>

		<option value="2">Kilograms</option>

		<option value="3">ac/ft</option>

		<option value="4">Lbs</option>

		</select></td>
		<td class="pad2px" valign="top"><select name="SHIPMENT_DISPOSITION_ID3">
		<option value="" selected>-- select --</option>

		<option value="1">Package Released, Carrier Notified</option>

		<option value="3">Pending Inspection</option>

		</select><br /></td>
	</tr>


	</table>


 
Hi

My way, using your naming convention :
Code:
function all(what)
{
  el=document.fo.elements[what];
  for (i=0;i<document.fo.elements.length;i++) {
    if (document.fo.elements[i].type!=el.type) continue;
    if (document.fo.elements[i].name.indexOf(el.name.substr(3))!=0) continue;
    switch (el.type) {
      case 'text': document.fo.elements[i].value=el.value; break;
      case 'select-one': document.fo.elements[i].selectedIndex=el.selectedIndex; break;
    }
  }
}
And call it like this :
Code:
        <td class="pad2px" width="80"><input type="text" name="keySHIPMENT_QUANTITY" value="" size="3">[red]<a href="#" onclick="all('keySHIPMENT_QUANTITY');return false">all</a>[/red]</td>

Feherke.
 
thank you so much feherke !!! your codes work so well for my problem. you saved my day !!!

Again, much appreciated your help!! kudos to both feherke and monksnake!!!



 
Hi

Well done sakura, you figured out that I gave the name "fo" to the [tt]form[/tt] containing all that stuff... I should remember to mention such "minor" details next times... or I should just change to the current standard [tt]getElement***[/tt]...

Feherke.
 
As a side note, try not to use a reference to .length when looping through arrays that contain objects.
Code:
el=document.fo.elements[what];
for (i=0;i<document.fo.elements.length;i++) {
You will find your code will run MUCH faster if you assign a variable to the length then loop with it.
Code:
el=document.fo.elements[what];
var elementArrayLength = el.length
for (i=0;i<elementArrayLength;i++) {






[monkey][snake] <.
 
Thank you both feherke & monksnake for giving me more helpful information, i'm still working on the codes to make it optimal for my problem.

Thank you so much!!!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top