Checkbox value set with jquery not showing in POST

Question

I've been looking for over an hour on the net, nothing showed up. I got some simple checkboxes, with a litle trick to style them, the classic hidden attribute and the label with the style. Nothing fancy. All I want is to send those checkboxes values/checked status through POST for proccesing. The problem is that whenever I change those values with jQuery, onClick, the inspector showes the changes, but in POST the input is not there anymore. I've tried setting the "checked" attribute with $.prop(). It worked for the inspector, but didn't worked on POST. Then I've changed to using values, setting all checkboxes as "checked" and changing the values with jQuery from 1 to 0 and back. The inspector showes the values changing, but the POST shows nothing.

Here the HTML form :

<form action="./ajax/process.php" enctype="multipart/form-data" method="post" id="admEmailParameteres1">
                    <input type="hidden" name="procesare" value="adm-process-parameters">

                    <input type="checkbox" id="sendConfEmailToClient" name="sendConfEmailToClient" value="<?= ($options['email_conf'] == 1 ? 1:0) ?>" class="hidden" checked>
                    <label for="sendConfEmailToClient" class="as-link tip label" onClick="toggleCheckSimple(this)" title="Trimite email de confirmare catre client la plasarea comenzii."><i class="fa fa-check label-check <?= ($options['email_conf'] == 1 ? 'active':'') ?>"></i> Client - email de confirmare la plasarea comenzii</label><br>

                    <input type="checkbox" id="sendAdvConfEmailToClient" name="sendAdvConfEmailToClient" value="<?= ($options['email_conf_sumar'] == 1 ? 1:0) ?>" class="hidden" checked>
                    <label for="sendAdvConfEmailToClient" class="as-link tip label" onClick="toggleCheckSimple(this)" title="Adauga si sumarul comenzii la email-ul de confirmare, trimis catre client la plasarea comenzii."><i class="fa fa-check label-check <?= ($options['email_conf_sumar'] == 1 ? 'active':'') ?>"></i> Client - adauga sumarul la email, la plasarea comenzii</label><br>


                    <input type="submit" class="btn btn-sm btn-success mb-5 " value="Salveaza modificarile" data-form="admEmailParameteres">
                </form>

Here's the JS code:

function toggleCheckSimple(el){
$(el).find('.label-check').toggleClass('active');
var trg = $(el).attr('for');
if($('#'+trg).val() == 1){
    $('input[name="'+trg+'"]').val(0);
}else{
    $('input[name="'+trg+'"]').val(1);
}

}

And in the PHP side, if I call:

echo '<pre>';
        print_r($_POST);
        echo '</pre>';

The checkboxes are not there if they were changed with jQuery. If you don't touch them, they are there. Extremely strange adn upseting for me, as I am not a beginer. Can't figure this out.

I'm confused why you have your if/else logic in your toggle. The for on the label will cause clicking the label to act like they clicked the checkbox itself, so there should already be a toggle going on with the checkbox. — Taplar
– Taplar, Commented Nov 14, 2017 at 14:57
Taplar you made my day. I have no Idea why I used that if/else in there, but that was causing the whole mainheim. Thank you. Post it as an answer, please. — Lucian Minea
– Lucian Minea, Commented Nov 14, 2017 at 15:02

Taplar · Accepted Answer · 2017-11-14 15:21:55Z

1

<label for="myId"></label>
<input type="checkbox" id="myId">

When you give a label the id of another element as it's for attribute, then if the user clicks on that label, it will act as if the user clicked on the other element. In this way you can make clicking a label toggle checkboxes, select radio buttons, or give focus to an associated text field. Making this logic a part of a javascript method is unnecessary.

Ref. https://html.spec.whatwg.org/multipage/forms.html#the-label-element

answered Nov 14, 2017 at 15:21

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jasper Seinhorst · Accepted Answer · 2017-11-14 14:51:00Z

0

A checkbox always needs a value in the html. But this value will only send to php if you check the checkbox. So remove <?= ($options['email_conf'] == 1 ? 1:0) ?> from your code, and set the checked attribute only when $options['email_conf'] == 1.

This will be your code:

<input type="checkbox" id="sendConfEmailToClient" name="sendConfEmailToClient" value="1" class="hidden" <?= echo ($options['email_conf'] == 1) ? 'checked' : '';  ?>>

answered Nov 14, 2017 at 14:51

Jasper Seinhorst

1,0746 silver badges22 bronze badges

2 Comments

Lucian Minea Over a year ago

Did this in the first place, it's the logical thing to do, it didn't worked, have no clue why. I'll try it again, maybe I missed something, who knows.

Lucian Minea Over a year ago

Ok, now my code is this: <input type="checkbox" id="sendConfEmailToClient" name="sendConfEmailToClient" value="1" class="hidden" <?= ($options['email_conf'] == 1 ? 'checked':'') ?>> The JS code is this : function toggleCheckSimple(el){ $(el).find('.label-check').toggleClass('active'); var trg = $(el).attr('for'); if($('#'+trg).attr('checked')){ $('#'+trg).removeAttr('checked'); }else{ $('#'+trg).attr('checked', true); } } Still doesn't show in POST if you click-it. Very strange.

Collectives™ on Stack Overflow

Checkbox value set with jquery not showing in POST

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related