JavaScript not working in wordpress page

Question

I have the below code added to my wordpress page:

<form action="#" method="post"><label for="number">Number of guests: *
<input name="number" type="radio" value="1" />1
<input name="number" type="radio" value="2" />2
<input name="number" type="radio" value="3" />3
<input name="number" type="radio" value="4" />4
<input name="number" type="radio" value="5" />5</label>
<div id="rsvp1" style="display:none"><label for="name">Name: *
<input name="name" type="text" value="" />
</label>
<label for="attending">Attending?: *
<input name="attending" type="radio" value="Yes" />Yes
<input name="attending" type="radio" value="No" />No</label>
<label for="dietary">Dietary Requirements?: *
<input name="dietary" type="checkbox" value="veggie" />Veggie


<input name="dietary" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
</label>
<label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
</label></div>
<div id="rsvp2" style="display:none"><label for="name1">Name: *
<input name="name1" type="text" value="" />
</label>
<label for="attending1">Attending?: *
<input name="attending1" type="radio" value="Yes" />Yes
<input name="attending1" type="radio" value="No" />No</label>
<label for="dietary1">Dietary Requirements?: *
<input name="dietary1" type="checkbox" value="veggie" />Veggie


<input name="dietary1" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
</label>
<label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
</label></div>
<div id="rsvp3" style="display:none"><label for="name2">Name: *
<input name="name2" type="text" value="" />
</label>
<label for="attending2">Attending?: *
<input name="attending2" type="radio" value="Yes" />Yes
<input name="attending2" type="radio" value="No" />No</label>
<label for="dietary2">Dietary Requirements?: *
<input name="dietary2" type="checkbox" value="veggie" />Veggie


<input name="dietary2" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
</label>
<label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name3">Name: *
<input name="name3" type="text" value="" />
</label>
<label for="attending3">Attending?: *
<input name="attending3" type="radio" value="Yes" />Yes
<input name="attending3" type="radio" value="No" />No</label>
<label for="dietary3">Dietary Requirements?: *
<input name="dietary3" type="checkbox" value="veggie" />Veggie


<input name="dietary3" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
</label>
<label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name4">Name: *
<input name="name4" type="text" value="" />
</label>
<label for="attending4">Attending?: *
<input name="attending4" type="radio" value="Yes" />Yes
<input name="attending4" type="radio" value="No" />No</label>
<label for="dietary4">Dietary Requirements?: *
<input name="dietary4" type="checkbox" value="veggie" />Veggie


<input name="dietary4" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
</label>
<label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
</label></div>
<input name="submitted" type="hidden" value="1" />
<input type="submit" />

</form>

<script type="text/javascript">
    function showRSVP() {
    var checked = this,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

var radios = document.querySelectorAll('input[name="number"][type="radio"]');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', showRSVP);
}
</script>

However the javascript does not work, it does in jsfiddle HERE But not when in the wordpress page.

The page is live HERE

please check your console... you have syntax error caused by p tags - added by wordpress automatically. Place your javascript directly to header.php (or where you need it), don't place it in wp through admin panel.... — sinisake
– sinisake, Commented Apr 28, 2014 at 17:39

Moishy · Accepted Answer · 2014-04-28 17:44:39Z

In order to use script inside a post or page you need to save it as an external file and then call the js function (CODEX)

so in your case - make a new js file and place your script in. (save this as rsvp.js)

function showRSVP() {
    var checked = this,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

var radios = document.querySelectorAll('input[name="number"][type="radio"]');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', showRSVP);
}

Then in your post add:

<script type="text/javascript" src="YOUR_LOCATION/rsvp.js"></script>
<script type="text/javascript">
<!--
showRSVP();
//--></script>

Collectives™ on Stack Overflow

JavaScript not working in wordpress page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related