Dynamically substituting checkboxes with hidden fields using jQuery

Question

Since checkboxes do send their content only when they are checked but my server side script needs ala of them (checked and unchecked fields with values 'Y' or 'N'), I need to dynamically substitute checkbox form fields (their functionalities) with hidden input fields with the same names. So I need jQuery script which will do the following;

for each checkbox input field on my page it should dynamically insert hidden input field with the same name as checkbox
it should add onclick listener to all checkbox fields which would set previous hidden field to 'Y' when checkbox is checked, and 'N' otherwise
remove name of checkbox input field in order to avoid naming conflict when sending form content to server (not sure if this is really needed)

so jQuery should current state:

<input type="checkbox" name="name1" checked="checked" />
<input type="checkbox" name="name2" />

dynamically substitute with:

<input type="hidden" name="name1" value="Y" />
<input type="checkbox" checked="checked" onclick="function()"/>
<input type="hidden" name="name2" value="N" />
<input type="checkbox" onclick="function()"/>

or replace checkbox fields with hidden fields with corresponding values before submitting form.

function() could be noname and dynamically assigned to checkboxes and change previous hidden fields with 'Y' or 'N' according to checkbox state.

I'll assume your server side is PHP, since it's tagged. Do you really need all this work? Can't you just set 'N' if the checkbox's value was not sent to serverside? Something like: `$chkVal = isset($_POST['name1']) ? 'Y' : 'N';` — LcSalazar, Sep 15 '14 at 18:38
Thanks for your logic suggestion but this is classic approach, I cannot use it because this requires that I know in advance that 'name1' field should come to server script. Then I can test if is it set or not. In my case I don't know what fields will come and I need explicit sending of fieldnames with values 'Y' or 'N'. — sbrbot, Sep 15 '14 at 18:40
Please, can you share what you have already tried? And where did you get stuck? — LcSalazar, Sep 15 '14 at 18:53
At the moment I put hidden fields manually for each checkbox. Now I'd like script which will do it automatically. Here is related post http://stackoverflow.com/questions/1809494/post-the-checkboxes-that-are-unchecked — sbrbot, Sep 15 '14 at 18:57
I've tricked my way around this, putting a hidden field after each and every checkbox, with the same name and a value="false". Then on the server, you check only the first value being sent for each parameter name. A checked box will send two values [checkboxVal, false] while an unchecked box will only send one [false]. — wwwmarty, Sep 15 '14 at 18:58
OK, this is my current situatuion, I have more pages with checkboxes, instead of adding hidden fields for all checkboxes I'd like to have one jQuery script whick would do it automatically. — sbrbot, Sep 15 '14 at 19:01
Yes, I got it... But you know this is not a code-for-me site. You have to actually try something before. You cannot expect that we create a script for you... — LcSalazar, Sep 15 '14 at 19:07
That's right LcSalazar, I need help here, sometimes I help others creating scripts for them or SQL queries sometimes other people help me. — sbrbot, Sep 15 '14 at 19:10

score 0 · Accepted Answer · answered Sep 15 '14 at 19:00

0

Given this html

<input type="hidden" name="myname_hidden" value="" />
<input type="checkbox" name="myname"/>

You can use something like this jQuery:

$("form").on('submit', function() {
  $('input[type="checkbox"]').each(function(){
    var $t=$(this);
    var isset = $t.prop('checked') ? 'Y' : 'N';
    $('input[name="'+$t.attr('name')+'_hidden"]').val(isset);
  });
});

answered Sep 15 '14 at 19:00

Gary Storey

1,779
2
14
19

Here I should manually insert hidden field before checkbox field. My current situation is that I do have only checkbox field. Eventually, I could replace checkbox field with hidden field before submitting. – sbrbot Sep 15 '14 at 19:06
I assumed from the above code that you had already figured out how to add the hidden field dynamically, so I did not include that as part of the code. That should happen on page load where this would happen on form submit. – Gary Storey Sep 15 '14 at 19:11

score 0 · Answer 2 · answered Sep 15 '14 at 19:43

How about creating an array of the y/n values and sending that array to your server? You can loop through the checkboxes and if the box is checked you add nameAttribute:Y to the array. If it's unchecked just make the array value "N".

Here's an example:

function updateInputs() {
    checkboxes.each(function () {
        var name = this.name;
        if (this.checked) {
            myArray[name] = 'Y';
        } else {
            myArray[name] = 'N';
        }
    });
    myArray = [];
}

Dynamically substituting checkboxes with hidden fields using jQuery

2 Answers2