If radio box is checked go to link - javascript

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" >

Related

How to assign the input from two radio buttons to a single field?

I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});
There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});

Displaying particular values on radio select

I'm trying to display particular forms on the selection of particular radio buttons.
Here are the radio buttons :-
<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">
When we select the working radio, a different form needs to be opened up. When we select nonworking a different form needs to be there.
Originally, I was doing it via document.getElementById("demo").innerHTML , but, I was suggested that using too much forms within the innerHTML is not a good idea.
Then what is the best way by which I complete this task?
Any suggestions are welcome.
The simplest way I can think of is using data attributes for referring to the corresponding form elements from the radio button selected.
All we have to do is map a radio button with 'data-form="working"' to a particular form with id 'working'
The sample code looks like:
$("form").hide();
$("input:radio").on("change", function() {
$("form").hide();
$("#" + $(this).attr("data-form") ).show();
});
The html markup should look like:
<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">
<form id="working">
<h2>working form</h2>
</form>
<form id="workingdamaged">
<h2>workingdamaged form</h2>
</form>
<form id="notworking">
<h2>notworking form</h2>
</form>
Fiddle Demo
Your solution is fine and I don't see any major problems with it.
You can also add all forms to DOM, and switch their visibility.
For instance:
<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>
<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">
<script>
var forms = ['working', 'workingdamaged', 'notworking'];
function switch(form) {
for (var k in forms) {
forms[k].style.display = 'none';
}
document.getElementById('form-' + name).style.display = 'block';
}
var elements = document.getElementsByName('condition');
for (var k in elements) {
elements[k].onclick = function() {
if (this.cheked) {
switch(this.getAttribute('value'));
}
}
}
</script>
EDIT: you have to change IDs of the elements. ID must be unique
Also you may consider using or external libraries for templating.
You may take a look at this question. It might serves your purpose.
Show form on radio button select
<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">
give them different ids this
create a model like this .
<div class=content>
<div class="subcontent" style="display:none" id="select1">//content</div>
<div class="subcontent" style="display:none" id="select2">//content</div>
<div class="subcontent" style="display:none" id="select3">//content</div>
</div>
<script>
$(function(){
$('.selectradio').change(
function(){
var sourced=$(this).attr("selection") ;
$(".subcontent").hide();
$("#"+sourced).show();
}
);
});
</script>
you have to include jquery library .

Get radio button value which is outside a form post

I have a form which has some radio buttons which is outside this form.The html is as follows
<input type="radio" id="radio1" name="radios" value="radio1" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="radio2">
<label for="radio2">Debit Card</label>
<form method="post" action='./process.php'>
<label>name</label>
<input type="text"/>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
When I press on the paynow button,i want to pass the value of button selected to the php of this form (process.php) .But I dont want to place the radio buttons inside the form.Is there any solution?
You could have a hidden value inside the form, onsubmit put the value of that radio button inside the hidden value
<input type="radio" name="test" value="a">a<br>
<input type="radio" name="test" value="b">b
<form>
<input type="hidden" name="test" id="hidden">
<submit onClick="transferData">
</form>
<script>
var transferData = function() {
var radioVal =$('input:radio[name=test]:checked').val()
$('#hidden').val(radioVal);
}
</script>
HTML5 supports an attribute called "form". You can use it to set the form for controls that are outside your form, like so:
<input type="radio" id="radio1" name="radios" value="radio1" checked>
<label form="myForm" for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="radio2">
<label form="myForm" for="radio2">Debit Card</label>
<form id="myForm" method="post" action='./process.php'>
<label>name</label>
<input type="text"/>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
Note how id="myForm" is added to the form and form="myForm" is added to the radio-buttons. Hope that helped you.
Yeah, you could add a reference to jQuery, before the </body>. Then, using JQuery, you could select the checked radio button as follows:
var selected = $("input[type='radio']:checked");
if (selected.length > 0) {
selectedVal = selected.val();
}
The selectedVal parameter will hold the value you want.
The selection of the selected radio button should be done on the click event of submit button.
That could be done as follows:
$("input[type='submit']").click(function(){
// code goes here.
});
You must have a onsubmit attribute on your form, and inside, assign to a hidden field the selected radio button value.
Like this:
<form id='myForm' method="post" action='./process.php' onsubmit='getRadioButtonValue()'>
...
<input type="hidden" name="selectedRadioValue" />
</form>
function getRadioButtonValue(){
var radioValue = $('input[name=radios]:checked', '#myForm').val();
$('input[name='selectedRadioValue']').val(radioValue);
}
Put everything in the form. If you want to send all values. Add required attibute to your tags.
Other wise use jquery
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password" id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<ul id="answer"></ul>
</body>
<script>
$("#sub").click(function(event){
event.preventDefault();
query = $.post({
url : 'check_ajax.php',
data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
});
query.done(function(response){
$('#answer').html(response);
});
});
</script>
All you need to do is to add the value of the option/input outside the form in the data
Use this onsubmit event!
$('input[name=radios]:checked').val()
Check the example

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

Categories