If checkbox checked enable input field in a loop

Question

Okay, firstly i have a MySQL result in a loop.

<form action="index.php" method="GET" name="myform">

<table id="matrix" cellpadding="0" cellspacing="0">
<thead>
 <tr>
  <th width="5%"></th>
  <th width="5%">ID</th>
  <th width="25%">Name</th>
  <th width="15%">price</th>
  <th width="15%">count</th>
  <th width="5%">Link</th>
 </tr>
</thead>

<tbody>
 <tr id="noresults">
  <td align="center" colspan="6"><h3>No results</h3></td>
 </tr>

<?
$query = "SELECT * FROM products";

$result = mysql_query($query) or die(mysql_error());
    while ($row = mysql_fetch_array($result)) { 
        $html  = "<tr>";
        $html .= "<th><input class='ads_Checkbox' type='checkbox' name='products[]' value='".$row['pro_name']."' onclick='myFunction()'> </th>";
        $html .= "<th>".$row['pro_id']."</th>";
        $html .= "<td>".$row['pro_name']."</td>";
        $html .= "<td><input type='number' name='prices[]' id='price' value='".$row['pro_price']."' disabled></td>";
        $html .= "<td>".$row['pro_category']."</td>";
        $html .= "<td>".$row['pro_link']."</td>";
        $html .= "</tr>";
        echo $html;
    }?>
    <input type="submit" name="submit" value="Submit">
    <textarea rows="5" cols="30" id="order"></textarea>
</form>

What i want when i ckecked a checkbox:

set the input field attributes to 'enabled' (document.getElementById("price").disabled=this.checked;)
get the input field value and save it somewhere in the page

Here's my javascript code

<script>
        function myFunction() {
            var products = document.forms[1];
            var txt = "";
            var i;
            for (i = 0; i < products.length; i++) {
                if (products[i].checked) {
                    txt = txt + products[i].value + ", ";
                }
            }
            document.getElementById("order").value = "" + txt;
            document.getElementById("price").disabled=this.checked;
        }
</script>

The show tag is here a (now it's wrong). It's working now with a simple line, but when i checked a second or third line checkbox, the first line's input do what i want. :(

Thanks for the replies!

KAD · Accepted Answer · 2015-07-07 08:09:44Z

1

You will need to send the checked object in the dynamically created HTML :

      ....   

        $counter = 0; 
        while ($row = mysql_fetch_array($result)) { 
                   $counter++;
                    $html  = "<tr>";
                    $html .= "<th><input class='ads_Checkbox' type='checkbox' name='products[]' value='".$row['pro_name']."'
     onclick='myFunction(this,". $counter .")'> </th>"; //<<<<<<<<<<<<<< send the clicked checkbox to the function
                    $html .= "<th>".$row['pro_id']."</th>";
                    $html .= "<td>".$row['pro_name']."</td>";
                    $html .= "<td><input type='number' name='prices[]' 
id='price_" . $counter ."' value='".$row['pro_price']."' disabled></td>";
                    $html .= "<td>".$row['pro_category']."</td>";
                    $html .= "<td>".$row['pro_link']."</td>";
                    $html .= "</tr>";
                    echo $html;
                }?>

        ....

Then fix your js to become compatible

<script>
        function myFunction(checkbox, level) { // <<<< add the checkbox as paremeter as well as the level (obtained via php counter)
            var products = document.forms[1];
            var txt = "";
            var i;
            for (i = 0; i < products.length; i++) {
                if (products[i].checked) {
                    txt = txt + products[i].value + ", ";
                }
            }
            document.getElementById("order").value = "" + txt;
            document.getElementById("price_" + level).disabled=checkbox.checked; // check if it is checked and assign the value
        }
</script>

EDIT

I have added a counter at PHP level where I give each price a unique ID price_1, price_2...etc The passed this counter to the js function from PHP, and within js concatenated the counter to the id to obtain the right element.

edited Jul 7, 2015 at 8:09

answered Jul 7, 2015 at 7:54

KAD

11.2k4 gold badges34 silver badges75 bronze badges

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

3 Comments

TBa Over a year ago

I think it's a good start with a counter and this code is almost perfect to me, because i understand how it's work. But here's another problem...when checked the checkbox the input field attribute is disabled, when unchecked the checkbox the input field turn to enabled. I want the opposite version. Tried so many options. example: if(document.getElementById("price_" + level).checked = false)document.getElementById("price_" + level).disabled=true;}else {document.getElementById("price_" + level).disabled=false; } This code don't work at the moment, i'm working on it. :)

KAD Over a year ago

the price is an input field and not a checkbox you cannot use .checked with it. If you want the opposite, you can just use the negation !checkbox.checked on the same line so it becomes document.getElementById("price_" + level).disabled=!(checkbox.checked); this will enable/disable the price in an opposite manner of the checkbox

TBa Over a year ago

Simple and great. Thanks, i really appreciate it.

fuyushimoya · Accepted Answer · 2015-07-07 08:01:54Z

1

You get duplicate id price in input, so it only find the first input to enable/disable.
this is bind to window. You still can use window.event.target to get the target.

You can change you function to:

function myFunction(checkbox) { // <<<< add the checkbox as paremeter

  var products = document.forms[1];
  var txt = "";
  var i;
  for (i = 0; i < products.length; i++) {
      if (products[i].checked) {
          txt = txt + products[i].value + ", ";
      }
  }


  document.getElementById("order").value = "" + txt;
  // Get the checkbox clicked.
  var checkbox = window.event.target;
  // strucutre is tr -> td -> checkbox and tr -> td -> input, so up trace twice to get tr.
  var tr = checkbox.parentNode.parentNode;
  // Get the related input. and set value
  var input = tr.querySelector("input");
  input.disabled=checkbox.checked; // check if it is checked and assign the value
}

answered Jul 7, 2015 at 8:01

fuyushimoya

9,8033 gold badges30 silver badges34 bronze badges

2 Comments

TBa Over a year ago

Thanks for your reply! You are right the duplicated input id isn't good. :) I tried your version, but because i'm just study JS i don't understand the whole code. I need to read after a few things. (example window.event.target)

fuyushimoya Over a year ago

No problem! window.event is the current event when you click on that checkbox, and it'll store the trigger (in other words, the clicked checkbox) in window.event.target. And it's always better to use KAD's answer by create and retireve that unique id when doing things.

Collectives™ on Stack Overflow

If checkbox checked enable input field in a loop

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related