We Keep Coding

If radio box is checked go to link

I am doing a quote website and i want if a user want to see most recent quotes to press the radio button and the page will display most recent quotes . I can not figure it out how to make the radio box to send to a certain page.
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
Fiddle
I want to make something like this but without be need to press the submit button, but when radio box is checked be sent automaticaly to a link.
Don`t know if this is right or not but i have seen to other websites this kind of sort.
Is this possible without javascript or jquery?

http://jsfiddle.net/ryBs6/47/ - Update jsfiddle
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})
anyway this would work , because if i right click and open link in new tab it works , but single click doesnt work, i dont know if this is disabled for security reasons or what !
http://jsfiddle.net/prollygeek/6vCdX/
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>

If you REALLY don't want to use Javascript, try wrapping the input and the label in an anchor
<input type="radio" />
If you want to use some javascript, do
<input onclick="window.open('http://google.com');" />
Or if you don't want to use the onclick attribute, use ProllyGeek's answer (I like his answer the best):
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})

<script>
$(function(){
$("input").change(function() {
if(this.checked) {
window.location = this.value;
}
});
});
</script>
<input type="radio" name="order" id="noi" value="http://stackoverflow.com">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="http://stackoverflow.com" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="http://stackoverflow.com" >
<label for="aprec">Most Liked</label>
FIDDLE DEMO

Without jquery:
var inputs = document.getElementsByTagName('input');
Array.prototype.forEach.call(inputs, function(item){
item.addEventListener('change', function(e){;
location.href = e.srcElement.value; // Redirect to value
});
});

<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
This should be your html
$('input[type='radio']').click(function()
{
window.location=$(this).attr('data-href')
});
You js here
Demo
Now without javascript or jquery
<input type="radio" name="order" id="vechi" value="vechi" >

on button click show Radio button value is not working when radio value is changed

I am using following on button click inline javascript to show Radio button value. But it is always showing English even if i change the value
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alert(document.getElementById('LanguageSelect').value);" />
my requirement is, need to show which radio is selected !

Please change the IDs of the element, and then depending on the value, show an element.
Otherwise, DOM cannot do that on itself.
Solution
Remove the id="LanguageSelect" from the HTML, because even if some other is checked, the current element will still have the id property. Here is the example of your code:
Here is the fiddle where I tested your code: http://jsfiddle.net/afzaal_ahmad_zeeshan/q25ba/
So, once you remove that, you'll get the problem fixed.
When you're selecting the value, it will look up for the first element, it will have the value of English, and will alert!
You can either use jQuery or check for the checkness of the elements:
jQuery
$('input[type=radio]:checked').val(); // check for the checked radio
This is easy and simple! I would recommend you this.
However, if you want to get the value of the radio buttons using JavaScript, try this:
JavaScript
/* this event to get triggered on click */
function checkCheckness () {
var radioButton = document.getElementsByName("LanguageSelect");
/* always remember, name should be similar, ID MUST NEVER be similar
* using similar ID among different elements is illegal in HTML */
if(radioButton[0].checked) {
alert(radioButton[0].value);
}
/* add some else statements */
}

If you have only three options, the following solution would be reasonable:
<input type="radio" name="LanguageSelect" id="LanguageSelect1" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect2" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect3" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and then in a script define the alertValue function.
alertValue = function(){
var language1 = document.getElementById('LanguageSelect1');
var language2 = document.getElementById('LanguageSelect2');
var language3 = document.getElementById('LanguageSelect3');
if(language1.checked)
alert(language1.value);
if(language2.checked)
alert(language2.value);
if(language3.checked)
alert(language3.value);
}
Check this one please Fiddle. I have tested there this solution.
If you don't have problem on selecting the elements with another way, then another approach would be the following:
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and the corresponding js function:
alertValue = function(){
var radios = document.getElementsByTagName("input");
for (var i=0;i<radios.length;i++)
if (radios[i].checked)
alert(radios[i].value);
}
Check this one please FiddleV2. I have tested there this solution.

<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="clickable()" />
function clickable(){
var val=document.querySelector('input[name="LanguageSelect"]:checked').value;
alert(val);
}

i did it myself...
onclick='if(document.getElementById(\'LanguageSelect1\').checked==true)
{alert(document.getElementById(\'LanguageSelect1\').value);}
if(document.getElementById(\'LanguageSelect2\').checked==true)
{alert(document.getElementById(\'LanguageSelect2\').value);}
if((document.getElementById(\'LanguageSelect3\').checked==true)
{alert(document.getElementById(\'LanguageSelect3\').value);}'

how to get the value of the hidden fields in here after the radio button is clicked

Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>

Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}

function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>

var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good

You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}

jQuery Radio Button function not working properly

I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection.
I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.
Here is my javascript from another file in the proj:
function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked)
{
submitForm('yesForm') && noButton.Checked==false;
}
else (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}
Inside the jsp I have the following code:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name="radio" id="noRad" value="noForm" />No<br>
</form:form>
Submit
<script>
$("#yesRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked'))
$("#yesRad").prop("checked", false);
else if($input.is(':checked'))
$("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>
I have gotten some functionality out of my jQuery but it's definitely far from correct..
I hope I was clear and thorough in my question. Thanks in advance!!

To begin with, don't use prop, use attr. prop is slower.
You've defined variables so let's not look them up again. In your if/else statement just use the variables.
I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.
You probably want this change to fire on both inputs.
$("#yesRad, #noRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked')){
$input.attr("checked", false);
} else if($input.is(':checked')){
$inputb.attr("checked",false);
}
});

Solved: Using javascript and taking the radio buttons out of the separate form elements.
First let's take a look at the JSP form elements involved:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>
What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.
function goHere()
{
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked)
{
submitForm('yesForm');
}
else if (noButton[0].checked)
{
submitForm('noForm');
}
else
{
document.write(str.fontcolor.font("red"));
}
}
As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons.
Here's the call from our javascript function in a submit button on the form...
<div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" name="submitBtn" onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>
That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!

Jquery watch certain fields for certain values

I have some test code here
<input type="radio" name="group1">1
<input type="radio" name="group1">2
<input type="radio" name="group1">3
<br>
<input type="text" name="text1">
<br>
<input type="radio" name="group2">1
<input type="radio" name="group2">2
<input type="radio" name="group2">3
<br>
<input disabled type="submit">
Please can you tell me if there is a way to watch multiple fields so that if their values changes i can enable a button..
So in short instead of having 3 .change rules watching each other... can't i do one piece of code that watches all 3 and if the values equals a particular something it enables the submit button ?
Thanks
Lee

$(':radio').change(function() {
if ($(this).attr('name') == 'group2')
$(':submit').removeAttr('disabled');
});

You can use the click event hander. For e.g.:
$(":radio[name='group1'],:radio[name='group2'],:radio[name='group3']").live("click",function(){
//do something
});

if i correct understood ur question, here it is:
set classes (for less JS code):
<input type="radio" class="g1-1" name="group1">1
<input type="radio" class="g1-2" name="group1">2
<input type="radio" class="g1-3" name="group1">3
<br>
<input type="text" class="text" name="text1">
<br>
<input type="radio" class="g2-1" name="group2">1
<input type="radio" class="g2-2" name="group2">2
<input type="radio" class="g2-3" name="group2">3
<br>
<input disabled type="submit">
JS:
$(function(){
$('input').click( function(){
if ( ($('.g1-2').is(':checked')) && ($('.g2-1').is(':checked')) && ($('.text').val()=="ok" ))
{
// event
}
});
});

Sounds like a candidate for http://knockoutjs.com/ - You associate DOM elements with a client-side view model. When the data model's state changes, the UI updates automatically.

If your jQuery selector matches more than one element, when you bind a callback function to an event, that function will be bound to all the elements the selector matches.
Example:
$('input[type="radio"]').change(function() {
$('body').append('changed');
});
See a working fiddle here