0 

function count() {
    $("input:radio")[1].html = alert("We're from the same site");
    $("input:radio")[0][2][3].html = alert("We are not from the same site");
}
<html>
<head>

<title>jQuery Script</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <script type="text/javascript" language="javascript">



    </script>

  </head>
    <body>
  <h1>Select one campus</h1>
  <form>
      <input id="Belfast" type="radio"> Belfast 
      <input id="Jordanstown" type="radio"> Jordanstown
      <input id="Magee" type="radio"> Magee
      <input id="Coleraine" type="radio"> Coleraine
      <br> <br>
      <input type = "button" value="Count" onclick="count()">
  </form> 

  <input type="button" value="Reload page" onclick="reloadPage()">

  </body>
</html>

Can anybody help me out with this piece of code? I'm learning jQuery at the moment and I am trying to create a jQuery script to check if a visitor is on the same university campus as me. I am using the following code:

When I select the second option on screen it works as expected but for any other, it seems to be giving me the exact same alert box like this:

Selecting the correct campus site

Selecting any other listed campus site.

I think the error lies somewhere within my count() function but I cannot see what the problem is:

   function count() {
        $("input:radio")[1].html = alert("We're from the same site");
        $("input:radio")[0][2][3].html = alert("We are not from the same site");
     }
Improve this question
5
  • 1
    At a glance, I'm not completely sure what do you expect this code to do...? You're storing the result of two alert calls (which is not useful -- alert always returns undefined!) in a property of some DOM element named html, which is not a property that affects the DOM of the page (unlike, e.g., innerHTML). Commented Mar 2, 2018 at 15:28
  • $("input:radio")[1].html is incorrect syntax. $("input:radio")[1].innerHTML is correct. However, you do not want assign the alert(); function to a variable. Commented Mar 2, 2018 at 15:29
  • What is this $("input:radio")[0][2][3] ? You're not taking advantage of jQuery. Commented Mar 2, 2018 at 15:33
  • @apsillers The expected outcome is when a user selects "Jordanstown", an alert will appear saying "We're from the same site" but if they select any of the other three sites, an alert appears saying "We are not from the same site". If you take another glance at the screenshots I've linked, I'm getting the same message for all 4 campus sites regardless of which one I click on. Hope this clears it up a bit more Commented Mar 2, 2018 at 15:33
  • @A.Martin may be it's late but you can check my answer for a shorter version. Commented Mar 2, 2018 at 15:45

5 Answers 5

Reset to default
2 

<html>
<head>

<title>jQuery Script</title>


  </head>
    <body>
  <h1>Select one campus</h1>
  <form>
      <input id="Belfast" value="Belfast" name="campus" type="radio"> Belfast 
      <input id="Jordanstown" value="Jordanstown" name="campus" type="radio"> Jordanstown
      <input id="Magee" value="Magee" name="campus" type="radio"> Magee
      <input id="Coleraine" value="Coleraine" name="campus" type="radio"> Coleraine
      <br> <br>
      <input type = "button" value="Count" id="count">
  </form> 

  <input type="button" value="Reload page" id="reload">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">

    $('#count').click(function() {
    var campus = $("input[name='campus']:checked");
    if(campus.length > 0){
      if(campus.val()=="Belfast") alert('same campus');
      else alert('different campus')
    }
     });

    $('#reload').click(function() {
        location.reload();
     });

    </script>

  </body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I think a high-level description of what you intended was "if radio button #1 is selected, alert the 'same site' message, and and if radio buttons #0, #2, or #3 are selected, display the 'different site' message."

Your code has a several errors, but I'll try to go over the most fundamental misunderstandings:

  • Chained bracket notation does property access on the result of the previous access. foo[0][2][3] says "access property 0 from foo, then access property 2 from the result of the previous access (from 0 on foo), then access property 3 from the previous access (from 2 on the result of 0 on foo). It's equivalent to

    result1 = foo[0];
result2 = result1[2];
result3 = result2[3];

    That's not remotely what you intended, I think -- you seem to expect that you'll select 0, 2, and 3 all from the leftmost expression.

  • What you want to check here is whether a particular radio button is selected. .html is certainly not the way to do so, which is not a property with any significance in the DOM. You could check the DOM selected property via $("input:radio")[1].selected.

  • What you want is a conditional: "if button #1 is selected, then..." You can do this with an if construct:

    if($("input:radio")[1].selected) {
    alert("same site");
}

  • Then, you can use an else to run code if anything else is true:

    if($("input:radio")[1].selected) {
    alert("same site");
} else {
    alert("different site");
}

The more jQuery-idomatic approach (and less brittle, if you change the order of the options later) would be to write a jQuery selector to find the currently option using the :checked selector and then compare the id of that element:

if($("input:radio:checked").attr("id") === "Jordanstown") {
    ...
}
Improve this answer

1 Comment

Thanks for taking the time to explain this! That is making at lot of sense. I've got my code working perfectly now I appreciate the help.
0 

function count() {
    var selectedCampus = $("input[name=campus]:checked").val();

    if(typeof selectedCampus === "undefined") {
      alert("Select a campus");
      return;
    }

    var myCampus = "jordanstown";

    if(selectedCampus === myCampus){
      alert("We're from the same site");
    } else {
      alert("We are not from the same site");
    }
}
<html>
<head>

<title>jQuery Script</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <script type="text/javascript" language="javascript">



    </script>

  </head>
    <body>
  <h1>Select one campus</h1>
  <form>
      <input id="Belfast" name="campus" value="belfast" type="radio"> Belfast 
      <input id="Jordanstown" name="campus" value="jordanstown" type="radio"> Jordanstown
      <input id="Magee" name="campus" value="magee" type="radio"> Magee
      <input id="Coleraine" name="campus" value="coleraine" type="radio"> Coleraine
      <br> <br>
      <input type = "button" value="Count" onclick="count()">
  </form> 

  <input type="button" value="Reload page" onclick="reloadPage()">

  </body>
</html>

Improve this answer

Comments

0

You need to add a name attribute to select only one of them at a time like radio-button group. Check the code below 

function count(){
  $("input[type=radio]:checked").each(function(){
    if($(this).prop('id') === "Belfast"){
     alert("We're from the same site");
    }
    else{
      alert("We are not from the same site");
    }
  });
}

function reloadPage(){
 location.reload();
}
<html>
<head>

<title>jQuery Script</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   
  </head>
    <body>
  <h1>Select one campus</h1>
  <form>
      <input id="Belfast" name="uni" type="radio"> Belfast 
      <input id="Jordanstown" name="uni" type="radio"> Jordanstown
      <input id="Magee" name="uni" type="radio"> Magee
      <input id="Coleraine" name="uni" type="radio"> Coleraine
      <br> <br>
      <input type = "button" value="Count" onclick="count()">
  </form> 

  <input type="button" value="Reload page" onclick="reloadPage()">

  </body>
</html>

Improve this answer

Comments

0

Try this instead..

js

// on click of input with value of Count
$("input[value='Count']").click(function() {
  // if school is yours
  if ($('#Jordanstown').prop('checked')) {
    alert("We're from the same site");
  // else, all other schools are not yours
  } else {
    alert('We are not from the same site');
  }
})
// i didnt play with this
function reloadPage() {
  location.reload();
}

html

  <h1>Select one campus</h1>
  <form>
      <input id="Belfast" type="radio">Belfast
      <input id="Jordanstown" type="radio">Jordanstown
      <input id="Magee" type="radio"> Magee
      <input id="Coleraine" type="radio"> Coleraine
      <br> <br>
      <input type="button" value="Count">
  </form> 

  <input type="button" value="Reload page" onclick="reloadPage()">

fiddle

https://jsfiddle.net/tbp3y9kf/13/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.