How to Link checkbox to textfield in html/PHP

Question

Is there any way one can link a checkbox to a textbox. For example

<form>
<table>
    <tr>
       <td><input name="databaseIDs[]" type="checkbox" value="49"/></td>
       <td><input type="text" name="first" value="First Input"/></td>
    </tr>
   <tr>
     <td><input name="databaseIDs[]" type="checkbox" value="50"/></td>
     <td><input type="text" name="first" value="Second Input"/></td>
  </tr>

<tr>
   <td><input name="databaseIDs[]" type="checkbox" value="60"/></td>
   <td><input type="text" name="first" value="Third Input"/></td>
</tr>
<tr>
  <td><input name="databaseIDs[]" type="checkbox" value="38"/></td>
  <td><input type="text" name="first" value="Fourth Input"/></td>
</tr>
</table>

</form>

As you can see, the checkbox is an array and each of the checkbox value is database id. What I am trying to do achieve is to update the database value where id is equal to the id of the checkbox which the user has ticked. For example if the user tick the first checkbox(with the value of 49), and the form is submitted, the database will update the value of in the database where the id is 49.

Curtis Maddalozzo · Accepted Answer · 2016-11-27 16:27:18Z

This problem doesn't require any jQuery (or javascript for that matter). Since you are using a checkbox instead of a radio button I am assuming you would like to be able to update more than one of your entities at a time.

The simplest way to achieve this is to setup your form as follows:

<table>
    <tr>
      <td><input name="selected_ids[]" type="checkbox" value="49"/></td>
      <td><input type="text" name="data[49][name]" value="First Input"/></td>
    </tr>
  <tr>
    <td><input name="selected_ids[]" type="checkbox" value="50"/></td>
    <td><input type="text" name="data[50][name]" value="Second Input"/></td>
  </tr>

<tr>
  <td><input name="selected_ids[]" type="checkbox" value="60"/></td>
  <td><input type="text" name="data[60][name]" value="Third Input"/></td>
</tr>
<tr>
  <td><input name="selected_ids[]" type="checkbox" value="38"/></td>
  <td><input type="text" name="data[38][name]" value="Fourth Input"/></td>
</tr>
</table>

As you can see the checkboxes will represent entities that you would like to update. When the form submits your will end up with an array of 0 or more IDs, each corresponding with a checked checkbox. You can then loop through this array of IDs, grabbing it's matching name value in the data associative array. This loop will look something like this:

foreach($_POST['selected_ids'] as $id){
  $name = $_POST['data'][$id]['name'];
  //TODO: update the database
}

This setup allows you to very easily add more data for each entity by creating <input>s following the convention <input name="data[<entity id>][<database field>]">

Thank you so much for this answer. It is exactly what I have been trying to achieve. Your answer solved the issue 100%. I appreciate.

Abhay Maurya · Accepted Answer · 2016-11-27 16:41:16Z

0

This solution will work for your condition without any modification in your html markup.

If you get the id of check box then you can get value of input field related to that checkbox as follows:

<script>
var id = 49;//you will get this id after form submission, i assumed it 49 for example
$('input[type="checkbox"]').each(function(){
    if($(this).attr('id')===id){
        var desired_value = $(this).parent().find('input[type="text"]').val();
    }
});
console.log(desired_value);//First Input// use desired value as you like
</script>

I hope it helps

edited Nov 27, 2016 at 16:41

answered Nov 27, 2016 at 15:52

Abhay Maurya

12.3k9 gold badges50 silver badges67 bronze badges

1 Comment

Prince Over a year ago

Thank you for your contribution. I do appreciate

Collectives™ on Stack Overflow

How to Link checkbox to textfield in html/PHP

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related