CODEWITHSUNDEEP
javascriptwordpress
DevWithZachary
DevWithZachary

Reputation: 3675

JavaScript not working in wordpress page

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

Upvotes: 0

Views: 125

Answers (1)

Moishy
Moishy

Reputation: 3648

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>

Upvotes: 1

Related Questions