check checkbox on populated dropdown value selection via javascript

Question

i got for the 6 Scenario what i want to do 6 checkboxes:

    <tr style="height: 21px;">
<td style="width: 25%; height: 21px;">COB</td>
<td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" <?php if($_GET['COB'] == '1'){  echo 'checked="checked"';}?>/>           </td>
<td style="width: 25%; height: 21px;">SMT</td>
<td style="width: 25%; height: 21px;">  <input name="SMT" id="SMT" type="checkbox" value="1" <?php if($_GET['SMT'] == '1'){  echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;">BGA</td>
<td style="width: 25%; height: 21px;">  <input name="BGA" id="BGA" type="checkbox" value="1" <?php if($_GET['BGA'] == '1'){  echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;">  TSOP Typ 1 </td>
<td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1"<?php if($_GET['TSOP'] == '1'){  echo 'checked="checked"';}?> /></td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> TSOP Typ 2</td>
<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"<?php if($_GET['TSOP'] == '2'){  echo 'checked="checked"';}?> />   </td>

</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> LGA</td>
<td style="width: 25%; height: 21px;"><input name="LGA" id="LGA" type="checkbox" value="1"<?php if($_GET['LGA'] == '1'){  echo 'checked="checked"';}?> />    </td>
</tr>

And here the PHP Part how i populate the Dropdown.

<td style="width: 14.2857%; height: 21px;">  <select id="FlashID" name="FlashID" onchange="FlashFunction()" size="1" >

                    <option disabled selected value> </option>;                             
            <?php
            foreach($connection->query($flash) as $m)
            {
                        if($m['FlashID'] == $_GET['FlashID']){
                $isSelected = 'selected="selected"';
            }else{
                $isSelected = '';
            }
            echo "<option data-COB='".$m['COB']."' data-SMT='".$m['SMT']."' data-BGA='".$m['BGA']."' data-TSOP='".$m['TSOP']."' data-LGA='".$m['LGA']."' value='" . $m['FlashID'] . "'".$isSelected."  >" .$m['SAP'] ."</option>";

            }
            ?> 
            </td>

Here is the SQL Table for the poplated Dropdown

FlashID   SAP   COB   SMT   BGA   TSOP    LGA
1        102292  0     1     0     2       0
3        102293  0     1     0     2       0
4        102294  0     1     0     2       0
5        102296  0     1     0     0       1
6        102412  0     1     0     1       0
7        102413  0     1     0     1       0
8        102414  0     1     0     1       0
9        102651  0     1     0     2       0
10       102652  0     1     0     2       0
11       102664  0     1     0     2       0

This is my not working Javascript Part:

<script>
function FlashFunction(){
var index = document.getElementById("FlashID").selectedIndex;
var COB = document.getElementById("FlashID").options[index].getAttribute("data-COB");
var SMT = document.getElementById("FlashID").options[index].getAttribute("data-SMT");
var BGA = document.getElementById("FlashID").options[index].getAttribute("data-BGA");
var TSOP = document.getElementById("FlashID").options[index].getAttribute("data-TSOP");
var LGA = document.getElementById("FlashID").options[index].getAttribute("data-LGA");
document.getElementsByName("COB")[0].value = COB;
document.getElementsByName("SMT")[0].value = SMT;
document.getElementsByName("BGA")[0].value = BGA;
document.getElementsByName("TSOP")[0].value = TSOP;
document.getElementsByName("TSOP2")[0].value = TSOP;
document.getElementsByName("LGA")[0].value = LGA;
}
</script>

Notice the TSOP can be value 1 or 2.

for ex. You see already if I select FlashID 6. TSOP and SMT Checkbox should be checked.

But atm I have no idea, how I can handle this in why my Javascript is not working Can someone help?

if you select FlashID 6, what is happening here? What do you mean by Javascript is not working ? — Narendra
– Narendra, Commented Jun 3, 2019 at 0:06
@Daniel is it possible to create workable example here codesandbox.io using static data — Junius L
– Junius L, Commented Jun 3, 2019 at 8:57

Marius Danciu · Accepted Answer · 2019-06-05 08:32:26Z

2

+25

I notice that in the last 3 checkboxes you do not have a space between the value and the php code.

This:

<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"<?php if($_GET['TSOP'] == '2'){  echo 'checked="checked"';}?> />   </td>

can go to this after php is executed:

<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"checked="checked" />   </td>

and should be like this:

td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2" checked="checked" />   </td>

answered Jun 5, 2019 at 8:32

Marius Danciu

1789 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alaa Morad · Accepted Answer · 2019-06-04 22:29:58Z

you do not check the checkboxs like this

document.getElementsByName("COB")[0].value = COB;
document.getElementsByName("SMT")[0].value = SMT;
document.getElementsByName("BGA")[0].value = BGA;
document.getElementsByName("TSOP")[0].value = TSOP;
document.getElementsByName("TSOP2")[0].value = TSOP;
document.getElementsByName("LGA")[0].value = LGA;

the correct way is like this :

document.getElementById("ItemId").checked = true; 
// because there is one <input ...> i use getEmelentById instead of getElementsById

in your program i think this is the correct javascript you need to use is :

<script>
function FlashFunction(){
var index = document.getElementById("FlashID").selectedIndex;
var COB = document.getElementById("FlashID").options[index].getAttribute("data-COB");
var SMT = document.getElementById("FlashID").options[index].getAttribute("data-SMT");
var BGA = document.getElementById("FlashID").options[index].getAttribute("data-BGA");
var TSOP = document.getElementById("FlashID").options[index].getAttribute("data-TSOP");
var LGA = document.getElementById("FlashID").options[index].getAttribute("data-LGA");
if (COB == 1 ) {
    document.getElementById("COB").checked= true;
} else {
    document.getElementById("COB").checked= false;
}
if (SMT == 1 ) {
    document.getElementById("SMT").checked= true;
} else {
    document.getElementById("SMT").checked= false;
}
if (BGA == 1 ) {
    document.getElementById("BGA").checked= true;
} else {
    document.getElementById("BGA").checked= false;
}
if (TSOP == 1 ) {
    document.getElementById("TSOP").checked= true;
} else {
    document.getElementById("TSOP").checked= false;
}
if (TSOP == 2 ) {
    document.getElementById("TSOP2").checked= true;
} else {
    document.getElementById("TSOP2").checked= false;
}
if (LGA == 1 ) {
    document.getElementById("LGA").checked= true;
} else {
    document.getElementById("LGA").checked= false;
}

}
</script>

Narendra · Accepted Answer · 2019-06-05 01:40:05Z

As per the DOM Standard, elemnet IDs should be unique within the entire document. While in your code two input are having the same id TSOP.

I have created to codepen sample for you to show that JAVASCRIPT part is working, there may be some issue with your PHP code.

function FlashFunction() {

  var index = document.getElementById("FlashID").selectedIndex;


  var SMT = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-SMT");

  var BGA = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-BGA");
  var TSOP = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-TSOP");


  var LGA = document
    .getElementById("FlashID")
    .options[index].getAttribute("data-LGA");


  document.getElementsByName("COB")[0].value = COB;
  document.getElementsByName("SMT")[0].value = SMT;
  document.getElementsByName("BGA")[0].value = BGA;
  document.getElementsByName("TSOP")[0].value = TSOP;
  document.getElementsByName("TSOP2")[0].value = TSOP;
  document.getElementsByName("LGA")[0].value = LGA;
  
  if (TSOP == 1) {
    document.getElementsByName("TSOP")[0].checked = true;
  }
}

<select id="FlashID" name="FlashID" onchange="FlashFunction()">
  <option data-SMT="1" value="volvo">102292</option>
  <option data-SMT="1" value="saab">102293</option>
  <option data-SMT="1" data-TSOP="1" value="mercedes">102412</option>
</select>
<table>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;">COB</td>
    <td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" /> </td>
    <td style="width: 25%; height: 21px;">SMT</td>
    <td style="width: 25%; height: 21px;"> <input name="SMT" id="SMT" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;">BGA</td>
    <td style="width: 25%; height: 21px;"> <input name="BGA" id="BGA" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> TSOP Typ 1 </td>
    <td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1" </td>
  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> TSOP Typ 2</td>
    <td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2" </td>

  </tr>
  <tr style="height: 21px;">
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"></td>
    <td style="width: 25%; height: 21px;"> LGA</td>
    <td style="width: 25%; height: 21px;">
      <input name="LGA" id="LGA" type="checkbox" value="1" </td>
  </tr>
</table>

is it possible for you to create a demo with static data? or can you add the HTML produces after PHP as it's interesting to look if data-TSOP='".$m['TSOP']."' is an array or number

Collectives™ on Stack Overflow

check checkbox on populated dropdown value selection via javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related