Enable / disable input text generated through a loop with data received from the database

Question

Enable / disable input text generated through a loop with data received from the database

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

The image is an example of what I want. When it is checkado to checkbox of verificaçãoAntiga , it makes Text Versao Nova active. He does this at first but not at others. Can someone help me?

<?php
include('conect.php');
$result = mysqli_query($conn,"SELECT * FROM 'op' WHERE 'type' = 2 ;");

   echo "<table class='table table-striped table-hover'id='datatables-example'>

      <tr>        
          <td class='pure-table'><b>Title 1</b></td>
          <td class='pure-table'><b>Title 2</b></td>
          <td class='pure-table'><b>Check 1</b></td>
          <td class='pure-table'><b>Title 3</b></td>
          <td class='pure-table'><b>VCheck 2</b></td>              
     </tr>";

 while($row = mysqli_fetch_array($result)) 
      {

        echo "<tbody data-link='row' class='rowlink'>
        <tr>
        <td>' . $row['Op'] . '</td>
        <td>  <input type='text' name='T2' class='form-control'></td>
        <td  style='text-align:center;'>  <input type='checkbox' name='C1' id='C1' ></td>
        <td>  <input type='text' name='T3' id='T3' class='form-control' disabled ></td>
        <td  style='text-align:center;'>  <input type='checkbox' name='C2'></td>
        </tr>
        </tbody>   
       }
        </table>";
        mysqli_close($conn);   
?>




<script language ="JavaScript">                                                      
document.getElementById('C1').onchange = function() {
document.getElementById('T3').disabled = !this.checked;
};

Home If I was not explicit in what I intended, please ask. Thank you.

php javascript

asked by anonymous 20.10.2016 / 12:39

3 answers

Check difference between unlisted results and identify which day of the week is the date FATAL EXCEPTION error loading image gallery using AsyncTask

score 1 · Answer 1

1

You can not have the same ID for more than one HTML element. See: link

I suggest you select them through a class: link

20.10.2016 / 13:31

score 1 · Answer 2

Assign a unique id for each element during the generation of the HTML code and change its Javascript function

For example:

HTML:

Antigo 1<input type="checkbox" id="antigo-1" />
Novo 1<input type="checkbox" id="novo-1"  />
<br/>
Antigo 2<input type="checkbox" id="antigo-2" />
Novo 2<input type="checkbox" id="novo-2"  />

Javascript:

$('input[type="checkbox"]').on('change', function(e) {
  var id = e.target.id.split("-");
  if(id[0]=="antigo"){
    $("#novo-"+id[1]).prop('checked',false);
  }else{
    $("#antigo-"+id[1]).prop('checked',false);
  }
});

Fiddle Running .

score 0 · Answer 3

What is happening in this case is that you are using the element ID to make your logic, the problem is that all the elements are with the same ID, I recommend doing it in a different way:

Take the java script code from within your loop, and at the bottom of the page add:

<script>
    window.onload = function() {
        var elements = document.querySelectorAll("[name='C1']");
        for(i in elements) {
            elements[i].onchange = function() {
                this.parentNode.nextSibling.querySelector("[name='T3']").disabled = !this.checked;
            }
        }
    }
</script>

That way you will not get a repeat of the javascript code for every loop that the loop gives, and this will work correctly for any number of items you have on the page.

NOTE: I have tried to do this in a way that follows the logic of your code, and also the names you are using (hint: with jquery it would be much simpler and readable)!

Edit ---

Example with jquery:

<script>
    $(document).ready(function() {
        $("[name='C1']").change(function() {
            $(this).closest().next().find("[name='T3']").prop('disabled', !this.checked);
        });
    });
</script>