I have 3 Radio Buttons with a Select button - now i need to change the select button to which radio button is selected.
For example html code:
<INPUT TYPE="radio" id="Orange"> Orange
<INPUT TYPE="radio" id="Apple""> Apple
<INPUT TYPE="radio" id="Mango"> Mango
<button>Select</button>
I now would like to link my Select button to get an URL
This URL i think i'll have to place either in the html in some array of sort or read from a database.
Any advise on how to link the button and how to embed the URL would be greatly appreciated.
Thanks in advance for reading and commenting.
You can pass the url link as value of the radio button. Then on click of
button get the value of checked radio button.
HTML
<INPUT TYPE="radio" id="Orange" name="myRadio" value="www.google.com"> Orange
<INPUT TYPE="radio" id="Apple" name="myRadio" value="www.mozilla.com"> Apple
<INPUT TYPE="radio" id="Mango" name="myRadio" value="www.microsoft.com"> Mango
<button onclick="navigateSite()">Select</button> //trigger navigateSite function
JS
function navigateSite(){
var getUrl = document.querySelector('input[name = "myRadio"]:checked').value
console.log(getUrl);
// location.href = getUrl // If you want to navigate to the site
}
EXAMPLE
<INPUT TYPE="radio" name="URL" id="Orange"> Orange
<INPUT TYPE="radio" name="URL" id="Apple""> Apple
<INPUT TYPE="radio" name="URL" id="Mango"> Mango
<button onclick="getURL();">Select</button>
function getURL(){
var url = document.getElementsByName('URL');
var url_value;
for(var i = 0; i < url.length; i++){
if(url[i].checked){
url_value = rates[i].value;
}
}
location=url_value+'.com';
}
Related
I want to display an input textbox after choosing one of the radio button selection but I'm having difficulty to do it. For example, I have 3 radio buttons: name, age and phone number. If I choose the name, then the input textbox will display for me to input a name and so on if I choose others. I want to know how to do it using HTML and javascript. Mind to help me, anyone? Thank you.
you can write all things like this.
function show(gender){
console.log(gender);
}
<label for="gender">
<input type="radio" name="gender" onclick="show('male')" value="male"/> male <br />
<input type="radio" name="gender" onclick="show('female')" vlaue="female"/> Female
</label>
thanks!
<label for="name">
<input type="radio" name="gender" onclick="createElements()"/> Male <br />
<input type="radio" name="gender" onclick="createElements()"/> Female
<div id="input"></div>
</label>
<script>
function createElements(){
var input = document.createElement("INPUT");
input.setAttribute("type", "text");
document.getElementById("input").appendChild(input);
}
</script>
i created a form with cal() but im not able to make it work with radio input.
It worked with select and option, but now the value isnt taken.
here the code
<script>
function cal()
{
var pl=document.form1.template.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
</script>
<form name="form1">
<label for="Template">Option 1 : Template</label>
<ul>
<li id="template"><label for="logo+texte">Logo et texte</label>
<input type="radio" id="test" name="template" value="500" onclick="cal()"></li>
<li><label for="base">Base</label>
<input type="radio" id="test" name="template" value="800" onclick="cal()"></li>
<li><label for="perso">Sur-Mesure</label>
<input type="radio" id="test" name="template" value="2900" onclick="cal()"></li></ul>
<input type="text" value="0" name="tresultat">
</form>
any idea to get the value in the text input when selected ?
thanks
Radio buttons are weird because there's a list of separate elements instead of just one. The simplest thing to do is to pass the element itself as a parameter:
function cal( button )
{
var pl = button.value;
var resultat=pl;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
and then change the radio buttons:
<input type="radio" id="test" name="template" value="800" onclick="cal( this )"></li>
passing this to the function.
I want to create the conditions in the radio button.
so I'm making a survey app with jquery ajax. every question has the option (radio button) and the button next to to the next question. without changing link
I want to create the conditions in the radio button. If select YES then it will go to the next question. If you select NO then the next question will pass 2
can help me please?
have you tried doing an attribute on your radio button like arnum that will track the n^th number of radio button.
<div arnum="3">
<input type="radio" skipval="3" value="yes">
<input type="radio" skipval="1" value="no">
</div>
<div arnum="4">
<input type="radio" value="something">
<input type="radio" value="else">
</div>
then:
$('div[arnum] input[type=radio][skipval]').on('click',function(){
var skipval = parseInt($(this).attr('skipval'));
var arnum = parseInt($(this).parent().attr('arnum'));
arnum++;
for(;arnum<arnum+skipval;arnum++){
$('div[arnum='+arnum+']').attr('disable','disable');
}
$('div[arnum='+arnum+']').focus();
});
this code on click skips to the next question using skipval and disables everything in between.
y this:
<input type="radio" name="test" value="1" />yes<br />
<input type="radio" name="test" value="2" />no
<div id="question2" style="display:none">
<br />Question 2<br />
</div>
<script>
$('input[name=test]').change(function () {
if ($(this).val() == 1) {
$('#question2').show();
} else {
$('#question2').hide();
}
})
</script>
I created the following form:
http://jsfiddle.net/baumdexterous/GYNSu/1/
I implemented a validation script that works for many of the form elements but for some reason it's not working for the radio buttons so currently a user can submit the form without selecting one of the required radio buttons.
How can I enable validation for the radio buttons using this existing script? Thanks so much.
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
Update: I have this JavaScript part that works with the existing validation. Trying to figure out how to add a way that will detect radio buttons:
<script>
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i) {
// 1. get current page
var page = root.find(".page").eq(api.getIndex()),
// 2. .. and all required fields inside the page
inputs = page.find(".required :input").removeClass("error"),
// 3. .. which are empty
empty = inputs.filter(function() {
return $(this).val().replace(/\s*/g, '') == '';
});
// if there are empty fields, then
if (empty.length) {
// slide down the drawer
drawer.slideDown(function() {
// colored flash effect
drawer.css("backgroundColor", "#229");
setTimeout(function() {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});
</script>
Have the radio button names all be the same. That groups them together. Then all you have to do is make the first one have checked="true"
<input name="question" type="radio" value="a" checked="true">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
This makes them send at least one thing. Otherwise you have to check the selected value of the input.
Also all the text inputs could just have required attribute and that would make sure something is there. HTML5 has that as validation.
http://www.w3schools.com/tags/att_input_required.asp
EDIT
Here's a fiddle I just made using jQuery. This is the true validation you want.
http://jsfiddle.net/slyfox13/H9Dw2/
Your radios should all have the same name. In the code about, you literally have 4 different inputs each as their own form data param, not 4 radio inputs affecting one form data param.
The input names not all need to be the same, i.e. and then check that the value of questionone is not null to validate
You have to give same name for all radio input tag.
like this
<div class="questionsone">
<input name="qstn1" type="radio" value="a">a) New York<br>
<input name="qstn1" type="radio" value="b">b) Washington DC<br>
<input name="qstn1" type="radio" value="c">c) Seattle<br>
<input name="qstn1" type="radio" value="d">d) Portland<br>
</div>
Set same name to all radio buttons since Radio buttons are there for a single choice.
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
Validation using jQuery:
if($("input[type=radio,name=questionone]:checked").length >0)
{
/* do something */
}
First you need to change your radio buttons names to all be the same thing. ex
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="question" type="radio" value="a">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
So that you will only be able to select one. Next you need to create a document.ready() function. Add this code to your document.ready()
$( document ).ready(function() {
function RadioTest(){
inputs = document.getElementsByName('question');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].checked!=true){
alert("radio not selected");
return false;
}
}
}
});
I know it can be done with input boxes using keyup paste on JQuery but what about Radio buttons?
Example:
User Selects option from Area A (radio button) and it selects(syncs) area B
<!--AREA A (Source) -->
<input id="radio_A" name="radio_A" type="radio" value="Value1" />
<input id="radio_A2" name="radio_A" type="radio" value="Value2" />
<!--AREA B (Target)-->
<input id="radio_B" name="radio_B" type="radio" value="Value1" />
<input id="radio_B2" name="radio_B" type="radio" value="Value2" />
$('input[name=radio_A]').change(function() {
var index = $(this).index('input[name=radio_A]');
$('input[name=radio_B]:eq(' + index + ')').attr('checked','checked');
});
Code: http://jsfiddle.net/BUbHf/1/
Try this:
$("#radio_A").click(function() {
$("#radio_B").attr("checked", $(this).attr("checked"));
});
$("#radio_A2").click(function() {
$("#radio_B2").attr("checked", $(this).attr("checked"));
});
Example fiddle
$("input[name='radioGroup1'][value='"+$("input[name='radioGroup2']:checked").val()+"']").prop("checked",true);