Member Avatar for retareed

I found this code and have implemented it with limited success. It's the Java bit that's baffling me. The goal is to produce a dropdown box for the first instance of the shiptogroup (there are five total) and a blank cell for all other instances. When a selection is made from the dropdown box, I'd like all the other cells in that group to populate with that selection. So far, only the first cell is populated.

if($shiptogroup=="group4"){
	if($grp4==0){
	$displayblock .= "<select size=\"1\" name=\"shipto4\" onchange=\"document.getElementById ('grp4name').firstChild.data = this.options [this.selectedIndex].text\">
		<option>- Select -</option>
		<option>Arlington S</option>
		<option>Mansfield</option>
		</select>";
		$grp4=1;
	}else{
	$displayblock .= "<p id=\"grp4name\">&nbsp;</p>";
	}
	}

Many thanks for your help,
Reta

  • 3 Contributors
  • 9 Replies
  • 119 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

The symptom (only the first blank cell updates) almost always comes from the HTML/JS targeting: the page is generating multiple targets with the same id and the script calls a single-element lookup. As pointed out, the page is PHP-generated HTML; 's suggestion to isolate the JS into a function is helpful — the missing piece is targeting all cells for a group, not a single element. IDs must be unique; use a class or a data attribute for the group and update every matching element.

A simple, robust pattern: have PHP output the select with a data attribute for the ship-to group, and output each blank cell with a class that identifies that group. Then a small JS helper updates every matching element:

function syncShipto(selectEl) {
  var group = selectEl.getAttribute('data-shipgroup');    // e.g. "4"
  var text = selectEl.value || (selectEl.selectedOptions && selectEl.selectedOptions[0].text) || '';
  var targets = document.querySelectorAll('.shipto-group-' + group);
  for (var i = 0; i < targets.length; i++) {
    targets[i].textContent = text;
  }
}

You can wire that either inline from PHP (onchange="syncShipto(this)") or attach listeners after DOM load:

var selects = document.querySelectorAll('select[data-shipgroup]');
for (var i = 0; i < selects.length; i++) {
  selects[i].addEventListener('change', function(){ syncShipto(this); }, false);
}

Troubleshooting checklist: 1) Confirm PHP prints data-shipgroup="X" on the select and .shipto-group-X on every related cell. 2) Remove duplicated id attributes — that is the common culprit. 3) Use textContent (with innerText fallback for very old browsers) rather than fiddling with firstChild.data, which fails when nodes differ. 4) If values and visible text differ, decide whether to use .value (option value) or option text for display. This approach keeps the JS simple and guarantees every member cell of the group shows the selected value.

Recommended Answers

All 9 Replies

Member Avatar for 84hd0ns

This looks like PHP code to me

Member Avatar for Taywin

I think the same. Variables in PHP starts with "$", and ".=" is a way to concatenate string in PHP. I'm not going to give more example because there are tons of example on the Internet. Here is one example. The javascript code for the page is here.

Member Avatar for retareed

Correct, it is mostly PHP, with just a sprinkle of javascript in there. It's the onchange code that attempts to do what I'd like it to do, I think.

"<select size=\"1\" name=\"shipto4\" onchange=\"document.getElementById ('grp4name').firstChild.data = this.options [this.selectedIndex].text\">
Member Avatar for retareed

Let me be even clearer. The code above produces part of a table, the Ship To column of the table. While looping through the shiptogroups, upon the first instance of shipto1 (or shipto2, shipto3, etc.) a dropdown box is inserted showing the different locations within that shiptogroup. (Group 4 is the example code given.) Subsequent instances of the shipto1 group would only get a blank cell, no dropdown box, no text box, just an empty cell.

[IMG][/IMG]

Currently when a selection is made from the dropdown, only the first empty cell of the same shiptogroup is populated with the selection. I just want the selection to display in all cells of the same shiptogroup. This info is not getting saved/uploaded/sent to a database anywhere, just displayed.

Member Avatar for Taywin

Hmm... I start to think that it is weird to do the way you do (from the code snippet you showed above) even with your explanation...

OK, how many combo boxes (select boxes) in the view? I thought you have 2 combo boxes which are A and B. Then when you change the combo box A, combo box B options are changed according to the selected item of combo box A. Is that correct?

Member Avatar for retareed

No. The dropdown boxes do not affect the other dropdowns. There would be a total of five dropdown boxes, one for each shipto group. When a selection is made from the dropdown box, I only want the blank cells related to that same shiptogroup to fill in with the selection made. Currently only the first blank cell is populated with the selection made, not all blank cells related to the shiptogroup.

Member Avatar for Taywin

Oh I see. Hmm... I am not sure about how you construct your PHP code. Here is a sample for pure JavaScript with HTML. May give you an idea how to construct your JavaScript in your PHP code.

<html>
<head>
<script type="text/javascript">
function changeRelatedDiv(selID, divID) {
  var selectEl = document.getElementById(selID)
  var divEl = document.getElementById(divID)
  if (selectEl && divEl) {  // if both elements exist, continue
    divEl.innerHTML = selectEl[selectEl.selectedIndex].value
  }
}
</script>
</head>

<body>
  <table>
  <tr><td>

  <select id="grp1" name="grp1" onchange="changeRelatedDiv('grp1', 'grp1div')">
  <option value="Group 1 Value 1">Value 1</option>
  <option value="Group 1 Value 2">Value 2</option>
  <option value="Group 1 Value 3">Value 3</option>
  <option value="Group 1 Value 4">Value 4</option>
  </select>

  </td><td>

  <select id="grp2" name="grp2" onchange="changeRelatedDiv('grp2', 'grp2div')">
  <option value="Group 2 Value 1">Value 1</option>
  <option value="Group 2 Value 2">Value 2</option>
  <option value="Group 2 Value 3">Value 3</option>
  <option value="Group 2 Value 4">Value 4</option>
  </select>

  </td><td>

  <select id="grp3" name="grp3" onchange="changeRelatedDiv('grp3', 'grp3div')">
  <option value="Group 3 Value 1">Value 1</option>
  <option value="Group 3 Value 2">Value 2</option>
  <option value="Group 3 Value 3">Value 3</option>
  <option value="Group 3 Value 4">Value 4</option>
  </select>

  </td><td>

  <select id="grp4" name="grp4" onchange="changeRelatedDiv('grp4', 'grp4div')">
  <option value="Group 4 Value 1">Value 1</option>
  <option value="Group 4 Value 2">Value 2</option>
  <option value="Group 4 Value 3">Value 3</option>
  <option value="Group 4 Value 4">Value 4</option>
  </select>

  </td></tr>

  <tr><td>
  <div id="grp1div" name="grp1div" style="width:150px"></div>
  </td><td>
  <div id="grp2div" name="grp2div" style="width:150px"></div>
  </td><td>
  <div id="grp3div" name="grp3div" style="width:150px"></div>
  </td><td>
  <div id="grp4div" name="grp4div" style="width:150px"></div>
  </td></tr>
  </table>
</body>
</html>
Edited by Taywin because: n/a
Member Avatar for retareed

Thanks very much. This still only accomplishes what I already had working - Only the first blank cell is populated with the selection. I think I'll approach this from a different route. Thank you for your efforts!

Member Avatar for Taywin

Sorry for not being helpful. I am not sure what's your current code for the portion. I mean the whole part of constructing the script... If it is being populated only your first selection, it means that others do not get the right 'target' element to be written on. My example does that; however, you must specify a correct set of argument passing to the function. If you don't, it won't work properly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.