CODEWITHSUNDEEP
javascripthtmlwordpressif-statementradio-button
Denoteone
Denoteone

Reputation: 4055

JavaScript redirect based on Radio-Button Value

I am checking the value of a radio button setup to look like a "Star Rating" system and based on the check redirect the user to a specific page.

But the code below always ends up in the else statement. I am wondering if since the radio button is set to display:none; could that affect my code?

JavaScript added to WordPress Plugin:

on_sent_ok: "if (document.getElementByName('review_stars').value=='4' || document.getElementByName('review_stars').value=='5'){location = 'http://my_domain/review-submission/'} else { location = 'http://my_domain/review-thank-you/'};"

Here is the HTML:

<span id="review_stars" class="wpcf7-form-control wpcf7-starrating wpcf7-validates-as-required review_stars starrating" data-cancel="0" data-def="0">
<span id="mf113" class="star-rating-control">
<div id="mf114" class="rating-cancel">
<div id="mf115" class="star-rating rater-0 star-rating-applied star-rating-live" aria-label="" role="text">
<div id="mf116" class="star-rating rater-0 star-rating-applied star-rating-live" aria-label="" role="text">
<div id="mf117" class="star-rating rater-0 star-rating-applied star-rating-live" aria-label="" role="text">
<a id="mfa23" title="3">3</a>
</div>
<div id="mf118" class="star-rating rater-0 star-rating-applied star-rating-live" aria-label="" role="text">
<div id="mf119" class="star-rating rater-0 star-rating-applied star-rating-live" aria-label="" role="text">
</span>
<input class="star-rating-applied" type="radio" value="1" name="review_stars" style="display: none;">
<input class="star-rating-applied" type="radio" value="2" name="review_stars" style="display: none;">
<input class="star-rating-applied" type="radio" value="3" name="review_stars" style="display: none;">
<input class="star-rating-applied" type="radio" value="4" name="review_stars" style="display: none;">
<input class="star-rating-applied" type="radio" value="5" name="review_stars" style="display: none;">
</span>

Upvotes: 0

Views: 254

Answers (2)

gengel
gengel

Reputation: 395

Since you're looking at radio buttons, you probably want something like:

if (document.getElementsByName('review_stars')[3].checked ||
    document.getElementsByName('review_stars')[4].checked) {    
      location = 'http://my_domain/review-submission/'} 
else { ... }

Upvotes: 0

Matheus208
Matheus208

Reputation: 1439

Try this (notice the plural "elements")

document.getElementsByName();

This function will return an array of elements that match that name (so you might have to use an index to access the elements).

If you are sure that there is only one of each elements on the page, you can try something like:

document.getElementsByName('review_stars')[0].value;

Upvotes: 1

Related Questions