Radio buttons to change an image (Javascript/HTML) - javascript

I have 3 images that must be changed when the corresponding radio button is clicked. The images are called spaghetti.jpg, salade.jpg and cremeglacee.jpg. They are in a folder called images.
So far, this is what I have and it isn't working. The first image (spaghetti.jpg) loads when I open the page but when I click on the radio buttons, the images don't change.
<p>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" />
Spaghetti <input type="radio" name="demo" value="spaghetti" checked
onclick="image.src='images/spaghetti.jpg'"/> <br>
Salade <input type="radio" name="demo" value="salade"
onclick="image.src='images/salade.jpg'"/> <br>
Crème glacée <input type="radio" name="demo" value="cremeglacee"
onclick="image.src='images/cremeglacee.jpg'"/> <br> <br>
</p>

$(document).ready(function(){
$("input:radio[name=demo]").click(function() {
var value = $(this).val();
var image_name;
if(value == 'spaghetti'){
image_name = "images/spaghetti.jpg";
}else{
if(value == 'salade'){
image_name = "images/salade.jpg";
}else{
image_name = "images/cremeglacee.jpg";
}
}
$('#imgS').attr('src', image_name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" id="imgS"/>
Spaghetti <input type="radio" name="demo" value="spaghetti"/> <br>
Salade <input type="radio" name="demo" value="salade"/> <br>
Crème glacée <input type="radio" name="demo" value="cremeglacee"/> <br> <br>
Using JQUERY, you can do this very easily, check the above snippet. When the user clicks the input, it checks what value the radio button is, and then based off that it changes the src attribute of the image to the corresponding image.
Matt

Related

how to save radio button clicked value in hidden field?

<script>
$(document).ready(function(){
var value = $('input[name="yesno"]').change(function(){
if($('#imageCheck').prop('checked')){
// alert('Image Option checked!');
}else if($('#textCheck').prop('checked')){
// alert('Text Option Checked!');
}
});
});
</script>
<input type="radio" onclick="javascript:imageTextCheck();" name="yesno"
id="imageCheck"/>&nbsp&nbsp&nbsp<b>Text</b>
<input type="radio" onclick="javascript:imageTextCheck();"name="yesno"
id="textCheck"/>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
how i can save the value of radio button in hidden field. If i Click on image it saves image value.
$(document).ready(function(){
var value = $('input[name="yesno"]').click(function(){
$('#radioCheck').val($(this).val());
});
setInterval(() => console.log( $('#radioCheck').val() ), 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="yesno" value="imageCheck" id="imageCheck"/><label for="imageCheck">imageCheck</label>
<br />
<input type="radio" name="yesno"value="textCheck" id="textCheck"/><label for="textCheck">textCheck</label>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
hope this one helps you :)
the setInterval is just to print out the hidden field's value each and every second so when you click on a radio button you can see that it sets the hidden input's value
Here is a simple solution for your problem: I have written one sample of code to explain the problem:
First: OnClick of radio button save the value of radio button if it is checked.
var radioValue = $("input[name='yesno']:checked").val();
Second: Assign the checked radio button value to the hidden input field.
$(document).ready(function(e) {
$("input[type='radio']").click(function(){
var radioValue = $("input[name='yesno']:checked").val();
if(radioValue) {
$("#radioCheck").val(radioValue);
console.clear();
console.log($("#radioCheck").val());
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_radioButton">
<input id="image_radio_check" value="imageButtonChecked" type="radio" class="radio_button" name="yesno" /> Image Radio Button
</div>
<div class="text_radioButton">
<input id="text_radio_check" value="textButtonChecked" type="radio" class="radio_button" name="yesno" />Text Radio Button
</div>
<div class="hidden_input">
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
</div>
Hope this may hep you in solving your problem.

HTML/ JavaScript radio button selections to output as summary of options

I'm trying to build a form that saves all of your selections of radio buttons and outputs as a summary upon submission. I am fairly new to JavaScript so please bear with me.
You are supposed to select between, let's say, three options per section. Depending on what was previously selected after you press Submit, it will open a lightbox and give you a summary of your choices before you submit the choices to be sent via email.
For what I have right now, there is only one section and three options to choose from.
HTML:
<div id="options">
<form method="get">
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O2" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O3" value="small"/>
<img src="img.jpg">
</label>
<input type="submit" value="SUBMIT"/>
</form>
</div>
JavaScript:
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_O1_radio = $('input:radio[name=O1]:checked').val();
var checked_O2_radio = $('input:radio[name=O2]:checked').val();
var checked_O3_radio = $('input:radio[name=O3]:checked').val();
if(checked_O1_radio===undefined || checked_O2_radio===undefined || checked_O3_radio===undefined)
{
alert('Please select a leather option then continue.');
}else{
alert('You Chose "' +checked_O1_radio);
}else{
alert('You Chose "' +checked_O2_radio);
}else{
alert('You Chose "' +checked_O3_radio);
}
});
});
Try this if i under stand your question correctly:
you can use same name then automatically only one will be selected and find the selected leather with a single check.
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="medium"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="large"/>
</label>
<input type="submit" value="SUBMIT" id = "Submitbutton"/>
$(document).ready(function() {
$("#Submitbutton").click(function (){
console.log($('input:radio[name=O1]:checked').val());
})
});
Please mark it as to answer if it helps you.

Clear radio buttons of a submitted form

I have a form with two radio button groups. When options are selected in each group they stay selected and change colour to show they have been selected. However, when I try to reset the form using the clear filters button nothing happens.
I want the form to appear to the user as it did when it loaded for the first time (no selections, no colour change - just cleared.), any ideas?
I am using the onclick:"javascript:submit()" instead of a submit button, maybe this is causing an issue?
The Code:
<form action="" method="post">
<p>Date:</p>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest › Oldest</label>
<br>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autocomplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest › Newest</label>
<hr><br>
<p>Title:</p>
<input type="radio" name="title" onclick="javascript:submit()" value="Mr" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mr') echo ' checked="checked"';?> /><label for="Mr">Mr</label>
<br>
<input type="radio" name="title" onclick="javascript:submit()" value="Mrs" <?php if (isset($_POST['title']) && $_POST['title'] == 'Mrs') echo ' checked="checked"';?> /><label for="Mrs">Mrs</label>
<br>
<input type="radio" name="title" onclick="javascript:submit()" value="Miss" <?php if (isset($_POST['title']) && $_POST['title'] == 'Miss') echo ' checked="checked"';?> /><label for="Miss">Miss</label><br><br>
<p class="clear">Clear Filters<p>
</form>
These are the methods I have tried so far:
Method 1:
Gave the form the standard html reset button just before the closing form tag.
Method 2:
Added this line just before the closing form tag:
<input type="button" onclick="myFunction()" value="Reset form">
Added this script after the closing form tag:
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
Method 3:
Within the body tag added
<body onload="document.refine.reset();"> and gave the form the name refine.
Method 4:
Set input fields to autocomplete off
by using jQuery prop() you checked or unchecked the radio button easily .
$('Radio-button').prop('checked', false);
By using JavaScript you have to do like this
document.getElementById("Radio-button").checked=false
Your attempts to reset the form to its initial state are actually working but the problem is that, because you are submitting the form every time you click on an input, the page and, therefore, the form are being reloaded and the last clicked input now has an initial state of checked. So, what you need to do is to loop through all the checked inputs and "uncheck" them. Here's a trimed down example of one way of doing so:
var inputs=document.querySelectorAll("input[type=radio]:checked"),
x=inputs.length;
document.querySelector("button[type=reset]").addEventListener("click",function(event){
while(x--)inputs[x].checked=0;
event.preventDefault();
},0);
<form>
<input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label>
<input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label>
<input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label>
<hr>
<input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label>
<input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label>
<input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label>
<hr>
<button type="reset">Clear</button>
</form>
you can use
<form action="" class="form" method="post">
on javascript you should use
$(document).ready(function(){
$(".form input[type=radio]").each(function () {
$(this).prop('checked', false);
});
});
check here on jsfiddle

Radio Buttons to create URL from selection

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';
}

How create the condition in the radio button? (in jQuery Ajax)

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>

Categories