On first radio button click refresh page

Question

i have 3 radio buttons. I want to refresh my page on every click of 1st radio button (ie sel_address).Whenever the user clicks on selected address the page should refresh.I don't want the page to refresh on click of other 2 radio buttons.How can i achieve this ?

<label class="option sel_address">
        <input type="radio" value="sel_address" name="delivery_option" checked="checked" id="sel_address">
</label>
<strong>selected address</strong>

<label class="option your_school">
    <input type="radio" value="your_school" name="delivery_option" id="your_school">
</label>
<strong>school</strong>

<label class="option rhs_showroom">
    <input type="radio" value="showroom" name="delivery_option" id="showroom">
</label>
<strong>Showroom</strong>

 <script type="text/javascript">
    $("input[name='delivery_option']").click(function() {
        .
        .
        var delivery_value = $(this).val();
        if(delivery_value == "your_school" || delivery_value == "showroom"){
            //some code 
        }else{
            ..
        }
    }

have a look into `:first` selector: https://api.jquery.com/first-selector/ — BeNdErR, Jan 01 '17 at 14:19

score 3 · Accepted Answer · answered Jan 01 '17 at 14:22

3

include below script just before the end of "body" tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#sel_address").click(function(){
    window.location = "";
});
</script>

answered Jan 01 '17 at 14:22

anjaneyulubatta505

10,713
1
52
62

score 1 · Answer 2 · answered Jan 01 '17 at 14:19

1

You can use eq(0) to select only the first element:

$("input[name='delivery_option']").eq(0).click(function() {
  console.log('First was clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="option sel_address">
  <input type="radio" value="sel_address" name="delivery_option" id="sel_address">
</label>
<strong>selected address</strong>

<label class="option your_school">
  <input type="radio" value="your_school" name="delivery_option" id="your_school">
</label>
<strong>school</strong>

<label class="option rhs_showroom">
  <input type="radio" value="showroom" name="delivery_option" id="showroom">
</label>
<strong>Showroom</strong>

Or the :first pseudo class selector:

$("input[name='delivery_option']:first").click(function() {
  console.log('First was clicked');
});

answered Jan 01 '17 at 14:19

Dekel

60,707
10
101
129

I think the ID is better, though arguably this is a moot accurate answer to the asked question. Elements which are currently first, tend to be reordered later. – erik258 Jan 01 '17 at 14:29
2

Well, the question was "click on the first" and not "click on a specific one" :) I'm not sure what will be the order in the future... – Dekel Jan 01 '17 at 14:30
@DanFarrell, a vote will be appreciated here :) thanks! – Dekel Jan 01 '17 at 14:41
Too late, sorry. I went with the answer I feel is a better approach, and it's locked now anyway. – erik258 Jan 01 '17 at 15:00
Not sure what is locked. Can you explain? (You can vote-up two answers, you know :) ) – Dekel Jan 01 '17 at 15:01
Learn something new sometimes just answering questions :). – erik258 Jan 01 '17 at 15:02

score 0 · Answer 3 · edited May 23 '17 at 12:24

As BeNdErR and Dekel suggested, use the :first pseudo-selector to select the first radio button only.

As to reloading the page, use location.reload(), as suggested on this question.

$("input[type='radio']:first").click(function() {
  location.reload();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="option sel_address">
  <input type="radio" value="sel_address" name="delivery_option" checked="checked" id="sel_address">
</label>
<strong>selected address</strong>

<label class="option your_school">
  <input type="radio" value="your_school" name="delivery_option" id="your_school">
</label>
<strong>school</strong>

<label class="option rhs_showroom">
  <input type="radio" value="showroom" name="delivery_option" id="showroom">
</label>
<strong>Showroom</strong>

On first radio button click refresh page

3 Answers3