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

Asked

Viewed 191 times

1

The image is an example of what I want. When is checkado to checkbox of verificaçãoAntiga, makes the Text of Versao Nova active. He does it at first but not at others. Someone can 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;
};



Exemplo de problema

If I haven’t been very explicit in my intentions, please ask. Thank you.

php javascript
  • 1

    Are you using Jquery or just pure Javascript ? The problem is that all checks have the same id, so getElement returns the first element of the DOM tree, you need to generate unique ids and pass this to the function

  • The simplest solution is to place the JS inside the loop, and dynamically generate the Ids. To avoid repeating JS, you could put a data-attribute in the checkboxes indicating the ID of the corresponding text, or simply use selectors to catch the neighboring textbox (in this case, subject to problems if you restructure the HTML). Then you could use a JS only for all fields.

3 answers

1

1

Assign a unique id to each element during HTML code generation 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.

  • I’ve already implemented one javascript similar to this but did not work.

  • How did it not work ? You used jquery ?

  • Yes, I’m using jquery

  • What error do you have ? just assign one in the loop (PHP), <input type='text' name='T2' id='antigo-$id' class='form-control'></td> <input type='text' name='T3' id='novo-$id' class='form-control'></td> this id can be a bank id or a number that is incrementing in the loop

  • I have already managed to resolve the matter. Thank you very much.

  • 1

    @djva If any of the answers helped you solve the problem, please mark it as correct, this way others with the same problem will know more easily the answer.

Show 1 more comment

0

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 you do otherwise:

take the java script code from inside your loop, and at the end 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>

This way you won’t get a repeat of the javascript code for each loop you loop, and it will work correctly for any number of items you have on the page.

NOTE: I tried to do it in a way that followed the logic of your code, and also the names you are using (tip: with jquery 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>

  • As you would in jquery?

  • 1

    The script naoesta inside my loop , even because my loop is made in php and would not put javascript inside it.

  • It’s true, confused, edited the code, tries to put this script at the end of your document to see if it helps you!

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.