JQuery Script reverses output after form submit

Question

I'm using the following script to show/hide DIV tags via CSS with the selection of checkboxes in a html form:

var $na = jQuery.noConflict(true);
$na(document).ready(function(){
        $na('input[type="checkbox"]').click(function(){
            if($na(this).attr("value")=="one"){
                $na(".one").toggle();
            }
            if($na(this).attr("value")=="two"){
                $na(".two").toggle();
            }
            if($na(this).attr("value")=="three"){
                $na(".three").toggle();
            }
        });
    });

My problem is, that after form submit the event is reversed, meaning a checked checkbox hides, while an unchecked one shows the DIV tag.

Do you have any idea how I can fix this? Is there a better event then click or toggle to do this?

Thanks for your help!

Seb

Oh, and all of this is for a wordpress page template....

Because submitting the form is like erasing a whiteboard. It starts over fresh. It does not magically remember states of dynamic content. — epascarello, Dec 06 '13 at 15:29
Yes, but it does remember when you want it to with some php... — Seb, Dec 06 '13 at 16:27

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Setting "checked" for a checkbox with jQuery?

attr is not the right way of getting a checkbox value. Use prop instead.

edited May 23 '17 at 10:32

Community

1
1

answered Dec 06 '13 at 12:40

Powerriegel

595
5
16

Hi Cornelius. Thanks, but unfortunately changing attr to prop didn't help. Script is working but after form submit the effect is still reversed... – Seb Dec 06 '13 at 12:57
Use else if.console log each event. To do this $na('input[type="checkbox"]').click(function(e){ console.log(e);} – Powerriegel Dec 06 '13 at 13:12
Or how about `.val()`! – epascarello Dec 06 '13 at 15:35
Hi again. I#m pretty new to this and can't get a working script with your line. would you mind posting me the whole script? sry for the trouble! – Seb Dec 06 '13 at 15:51

epascarello · Accepted Answer · 2013-12-06T16:30:08.283

0

You need to run the code that does the toggling from the start

var $na = jQuery.noConflict(true);
$na(function($){
    $('input[type="checkbox"]').change(function(){
        $("." + this.value).toggle(this.checked);
    }).trigger("change");
});

JSFiddle: http://jsfiddle.net/CYgQR/1/

edited Dec 06 '13 at 16:30

answered Dec 06 '13 at 15:33

epascarello

204,599
20
195
236

Hi epascarello! I think this script could work. But it checks all the boxes from the start. how can i have them unchecked in the start? Probably easy to do but i'm really new to this... sorry! thx seb – Seb Dec 06 '13 at 16:24
Ah, change the click to change – epascarello Dec 06 '13 at 16:29
Ah one more problem though! Sry but we are getting there! ;-) The script works perfect with the first checkbox. but when i check two and three, they don't trigger their divs anymore... ideas? – Seb Dec 06 '13 at 16:49
OK got it. values cannot consist of two words for the script to work. But I can live with that. All good then! Thanks a lot epascarello. – Seb Dec 06 '13 at 17:07
If it had two words, how would your original code work? It might be ebtter to use a data attriute instead of the value. ` – epascarello Dec 06 '13 at 17:10
I don't know how, but It did. Maybe because I took a detour over predefined CSS classes?!? Anyway, I like your solution it's way simpler. will give the data attribute a shot and report in a minute – Seb Dec 06 '13 at 17:22

JQuery Script reverses output after form submit

2 Answers2