Question

My application takes user’s phone numbers as input and stores them in the database. On a separate page we ask the user to check those phone numbers that should be visible to other users. Please don’t ask any questions on why we are doing this as it is done for some business reasons that are irrelevant for this question.

Now, I am trying to display these phone numbers and ask the user to check those phone numbers that should be visible or uncheck the ones that he previously checked. I have the following open questions:

1. When the user submits the form, I have no idea what his phone numbers are. How do I associate a check box with a phone number?
2. If I use hidden fields, is it a standard practice to give these input fields, the phone number they correspond to as Id’s?

Answer 1

Assuming no phone numbers are repeated, the simplest way would be to set each checkbox’s value to its associated phone number:

0262543210 <input type="checkbox" name="makeVisible" value="0262543210">
0265511223 <input type="checkbox" name="makeVisible" value="0265511223">
0398123456 <input type="checkbox" name="makeVisible" value="0398123456">

(Obviously you’d add some sort of formatting, a table or an unordered list or something.)

Then in your server-side code process each makeVisible (or whatever name you give it) value, bearing in mind that only the checked ones get submitted. No JavaScript is needed for this method.

If you want to submit a yes/no or true/false (visible/hidden) value for every number the no-JS way is to just use radio buttons. But the easiest way with checkboxes is probably with a hidden field set based on the checkbox state:

<table>
  <tr>
    <th>Phone Number</th>
    <th>Make visible?</th>
  </tr>
  <tr>
    <td>0262543210</tr>
    <td>
       <input type="hidden" name="number" value="0262543210">
       <input type="hidden" name="makeVisible">
       <input type="checkbox" class="numbervisibility">
    </td>
  </tr>
  <tr>
    <td>0265511223</tr>
    <td>
       <input type="hidden" name="number" value="0265511223">
       <input type="hidden" name="makeVisible">
       <input type="checkbox" class="numbervisibility">
    </td>
  </tr>
  <!-- etc. -->
</table>

Add additional hidden fields with record ids if required, or use record ids instead of the phone numbers – whatever is appropriate to your data structure.

Then use some simple jQuery to set the hidden values when the checkbox changes:

$(".numbervisibility").click(function() {
    $(this).closest("td").find('input[name="makeVisible"]').val(this.checked ? "Y" : "N");
});

That way server-side you’d end up with matched arrays of fields with the number and associated visibility setting.

Note that if you’re using PHP you should name repeating fields with [] at the end, like "makeVisible[]".

(Of course in either solution you’d use server-side code to inject the phone numbers into the html.)