CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
user36278
user36278

Reputation: 228

Javascript and HTML fill variable

so I'm trying to get a html radio button when pressed to send a value to the variable (UserInput) in the JavaScript code.

//HTML CODE// 
</HEAD>
        <script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="javascripts/question.js"></script>
<BODY>

<form>

<INPUT TYPE="radio" NAME="Home" VALUE="1" >Home
<INPUT TYPE="radio" NAME="School" VALUE="2" >School
<INPUT TYPE="radio" NAME="Work" VALUE="3" >Work


<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center>
</form>


</BODY>
</HTML>

I would like to get the value from the radio buttons and store them in the variable UserInput,however it does not seem to be working. 

// Javascript code (qustion.js) //

var UserInput = '';

if (UserInput=== '3')
{
   confirm("You have selected WORK");
   console.log("WORK");
}

else if (UserInput==='2')
{
    confirm("You have selected SCHOOL");
    console.log("SCHOOL");
}
else if (UserInput==='1') 
{
    confirm("You have selected HOME");
    console.log("HOME");
}
else if (UserInput==='')
{
    confirm("You have selected NOTHING");
    console.log("NONE");
}

Thanks,also I'm sort of a beginner so a in-depth explanation would be great too.

Upvotes: 0

Views: 1706

Answers (6)

Belvi Nosakhare
Belvi Nosakhare

Reputation: 3255

Do something like this in the Html side:

</HEAD>
        <script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="javascripts/question.js"></script>
<BODY>

<form>

<INPUT TYPE="radio" id="Home" VALUE="1"  >Home



<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center>
</form>

and the js side like this:

var UserChoice;
function getValue(){
if ($('input[id = Home]:checked').size() > 0) {
        UserChoice = "Home";
    }
}

Same is applicable to school and work

Upvotes: 1

Priya jain
Priya jain

Reputation: 703

You can easily accomplish this by using jquery 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(function(){
    $(".button_classname_here").click(function(){       
        alert($('input[type=radio]:checked').val());
    });
});
</script>

Upvotes: 0

Evgeny Zagorulko
Evgeny Zagorulko

Reputation: 127

var UserInput = '';
$(document).ready(function() {
    $('input:radio').click(function() {
       if ($(this).is(':checked'))
           {UserInput =$(this).val();}
       });
}

Upvotes: 0

kamus
kamus

Reputation: 797

first set the same name property to your radios for create a group

<INPUT TYPE="radio" name="optionsRadios" id="Home" VALUE="1" >Home
<INPUT TYPE="radio" name="optionsRadios" id="School" VALUE="2" >School
<INPUT TYPE="radio"  name="optionsRadios" id="Work" VALUE="3" >Work

after call the function on your button

<input type="button" name="send" value="Submit" onclick="getValue();">

and last create the function getValue and use :

document.querySelector("input[name=optionsRadios]:checked").value;

the querySelector return all the objects with the name "optionRadios" and checked , in this case just one 

function getValue(){

var UserInput = '';
    UserInput= document.querySelector("input[name=optionsRadios]:checked").value;

if (UserInput=== '3')
{
   confirm("You have selected WORK");
   console.log("WORK");
}

else if (UserInput==='2')
{
    confirm("You have selected SCHOOL");
    console.log("SCHOOL");
}
else if (UserInput==='1') 
{
    confirm("You have selected HOME");
    console.log("HOME");
}
else if (UserInput==='')
{
    confirm("You have selected NOTHING");
    console.log("NONE");
}

}

Example: http://jsfiddle.net/RrYJu/1/

Upvotes: 0

Priya jain
Priya jain

Reputation: 703

Try This Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
        <script>
$(function(){
$(document).ready(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      alert($(this).val());
    }
  });
});
});

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

first you have to use a single name for all, to make them a group (let's say here the group name is myradiogroup), you can define different ids, then do this:

document.querySelector('input[name=myradiogroup]:checked').value

you can also do this in your onclick event:

<input type="button" name="send" value="Submit"
    onclick="var UserInput=document.querySelector('input[name=myradiogroup]:checked').value;">

Upvotes: 2

Related Questions