We Keep Coding

Remove div on changing the radio button

There are two radio buttons. (Javascript)Upon selecting 1st option the div class must be removed which is in another page and upon selecting 2nd option the div must be shown and this execution should happen only after clicking on submit button.
Any help highly appreciated.
<input type="radio" name="radio" id="radio1">Regular Shipping
<input type="radio" name="radio" id="radio2">COD Shopping
<input type="submit" class="btn" value="SUBMIT">
<!----------The following div is in another page------>
<div class="test">Lorem Ipusm</div>

You can try with below solution:
document.getElementById('submit').addEventListener('click', change_value);
function change_value(){
var radioOptions = document.getElementsByName('radio');
var selected = '';
for (var i = 0; i < radioOptions.length; i++) {
if (radioOptions[i].checked) {
selected = radioOptions[i].id
break;
}
}
if(selected == 'radio1'){
document.getElementsByClassName('test')[0].style.display = 'none';
} else if (selected == 'radio2'){
document.getElementsByClassName('test')[0].style.display = 'block';
} else {
alert('select option first!');
}
}
<input type="radio" name="radio" id="radio1">Regular Shipping
<input type="radio" name="radio" id="radio2">COD Shopping
<input type="submit" id='submit' class="btn" value="SUBMIT">
<!----------The following div is in another page------>
<div class="test">Lorem Ipusm</div>
In above code I just hidden/display the first element with className is 'test', incase you want to apply for all, you need a loop to do it.

Radio Button to change form inputs

I have two radio buttons each one will toggle different inputs on a form. I've achomplished this using the onclick() function that utilizes hide() but then this require another function with replicated .show() to bring the elements back if the user toggles back and forth. Thought there must be better logic something that is not so redundant, maybe an if toggle value?
Anyways this is what I have:
<labe>
<input type="radio" name="radioReason" onClick="resetPassShow()"> </input
<span class="text">Request profile update (i.e. phone#)</span>
</label>
<label>
<input type="radio" name="radioReason" value="resetPassword" onClick="resetPassRemove;"> </input>
<span class="text">Reset Password or Unlock My Account</span>
</label>
function resetPassRemove(){
$("#prodCategoryLabel").hide();
....
}
function resetPassShow(){
$("#prodCategoryLabel").show();
....
}

Here is the JS Fiddle in action: https://jsfiddle.net/dv5xmw9z/1/
JS
function hideA(x) {
if (x.checked) {
document.getElementById("A").style.visibility = "hidden";
document.getElementById("B").style.visibility = "visible";
}
}
function hideB(x) {
if (x.checked) {
document.getElementById("B").style.visibility = "hidden";
document.getElementById("A").style.visibility = "visible";
}
}
HTML
<input type="radio" onchange="hideB(this)" name="aorb" checked>A |
<input type="radio" onchange="hideA(this)" name="aorb">B
<div id="A">
<br/>A's text</div>
<div id="B" style="visibility:hidden">
<br/>B's text
</div>

use $( ".target" ).toggle(); function.
http://api.jquery.com/toggle/

Change div color using multiple radio buttons and JavaScript

I'm trying to use radio buttons to change the background color of my div tag. I would like to use more than more condition. E.g., if button A is clicked and button B is clicked then make the color green.
This is what I have so far.
<div id="CLWarn">Warning Colour </div>
<input type="radio" name="IM" id="IM" value="1" onclick="A(this)"/>
<input type="radio" name="PB" id="PB" value="1" onclick="B(this)"/>
function A(chk) {
if(chk.checked == true) {
function B(chk) {
if(chk.checked == true) {
$(document).ready(function(){
document.getElementById("CLWarn").style.backgroundColor="Green";
document.getElementById("CLWarn").style.lineHeight=1.8;})
}}
}}
It works if I'm only using one condition (just clicking one button and only having the one function, but I don't know how to add another condition to my function.

Probably you try to do something like this:
function A(chk) {
if ( document.getElementById("IM1").checked && document.getElementById("IM2").checked ) {
document.getElementById("CLWarn").style.backgroundColor="Green";
document.getElementById("CLWarn").style.lineHeight=1.8;
}
}
<div id="CLWarn">Warning Colour </div>
<input type="radio" name="IM1" id="IM1" value="1" onclick="A(this)"/>
<input type="radio" name="IM2" id="IM2" value="1" onclick="A(this)"/>
Notice that there are different names for the radio buttons to allow multiple selection. And the ids are also unique according to some good practices.

Although jquery hasn't been tagged, as the OP has used it in his code, here is a jquery solution:
$('input').change(function() {
if ($('#IM').is(':checked')) {
if ($('#PB').is(':checked')) {
alert('green');
} else {
alert('blue');
}
} else {
alert('red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="IM" id="IM" value="1" />
<input type="radio" name="PB" id="PB" value="1" />

As has already been mentioned, your radio buttons have the same 'Name' value, meaning only one can be checked at a time.
If I understand correctly, you can achieve what you want using something like the following:
function changeColour(element) {
var div = document.getElementById('CLWarn');
if (element.id == 'a' && element.checked) {
div.style.backgroundColor = 'green';
} else if (element.id == 'b' && element.checked) {
div.style.backgroundColor = 'red';
}
}
<div id="CLWarn">Warning Colour</div>
<input type="radio" name="IM" id="a" value="1" onchange="changeColour(this)" />
<input type="radio" name="IM" id="b" value="1" onchange="changeColour(this)" />

Use checkbox instead radio:
<div id="CLWarn">Warning Colour </div>
<input type="checkbox" name="IM1" id="IM1" class="chk" />
<input type="checkbox" name="IM2" id="IM2" class="chk" />
and use jquery to archieve this:
$(document).ready(function(){
$(".chk").change(function(){
var im1 = $("#IM1");
var im2 = $("#IM1");
if ($("#IM1").is(':checked') && $("#IM2").is(':checked')){
$("#CLWarn").css("background-color", "green");
$("#CLWarn").css("line-height", "1.8rem");
}
})
})
Fiddle
Addictionally you can puy all your css in a separate class and set with addClass
$("#CLWarn").addClass("myClass");

Change an onclick value with javascript

I'm pretty new to JS and maybe this is a very banal questions but I still can't figure out what's wrong. I have this simple html code:
<span>1</span>
<input id="check1" type="radio" value="a1"/>
<span>2</span>
<input id="check2" type="radio" value="b2"/>
<span>3</span>
<input id="check3" type="radio" value="c3"/>
<span>4</span>
<input id="check4" type="radio" value="a4"/>
<span>5</span>
<input id="check5" type="radio" value="b5"/>
<input id="red" type="button" value="Go" onclick=""/>
What i would like to achieve is, based on the radio checked change the onclick property.
For example, if check1 and check2 are checked go to google.com, if check1 and check3 go to jsfiddle.net etcetera. So I wrote a simple Javascript:
window.onchange = function redirect(){
if (document.getElementById('check1').checked && document.getElementById('check2').checked) {
location.href='www.google.com';
// document.getElementById('red').onclick="www.google.com"
}
else if (document.getElementById('check1').checked && document.getElementById('check3').checked) {
location.href='www.jsfiddle.net';
// document.getElementById('red').onclick="window.open('www.jsfiddle.net')"
}
}
Here You can find a JS Fiddle.
What I thought to do was to set the onclick property like I did with an image, using getElementById and then setting his source, so I wrote document.getElementById('red').onclick="window.open('random page')" but for some reason that I can't understand it doesn't work.
Questions:
1) As you can see in my code i wrote a location.href='address' that obviously doen't wait for the user to click the button, so that's not a solution, how can I make this work?
2)Is there a way to make this piece of code more scalable? What I mean is, in the future if I want to add another radio, I would have to modify manually the code and insert another else if, I thought about something like:
var radio = document.getElementByName('radio') //not sure if this is the right getElement
for (var i=1; i<radio.lenght; i++){
if radio[i].checked{ //is this right?
for (var n=i+1; n<radio.lenght; n++){
if radio[n].checked{
document.getElementById('red').onclick="window.open('random page')"
}
}
}
Any suggestion to my code is welcome.
​

Try out this in JS Fiddle. It contains how you can listen the onclick event of a button and to get the checked value of a radio button.
HTML part:
<form action="">
<input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br>
<input type="radio" name="vehicle" value="No" id='no'>No
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
if (document.getElementById('yes').checked) {
alert('I have a Vehicle.');
} else if(document.getElementById('no').checked) {
alert('I don\'t have a Vehicle.');
} else {
alert('No answer.');
}
}
If you use radio buttons, and you want only one to be selectable to the user at a time you have to set the same name attribute to them.
You can also make use of the value property of radio buttons for storing the redirection URL.
Here is a more useful example for you.
HTML part:
<form action="">
<input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br />
<input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br />
<input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
var options = document.getElementsByName('redirect'),
length = options.length,
i = 0;
for (i; i < length; i++) {
if (options[i].checked) {
window.open(options[i].value);
}
}
}

if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
document.getElementById('red').onclick=function(){
window.location.href ='http://www.google.com';
};
}
This code binds the function to the onclick event of element with id='red'. So add a bunch of such conditions and change the onclick binding whenever any radio button is checked/unchecked.

Disappearing radio button and clickable labels

I want to make radio buttons disappear and instead of buttons, the label of the radio buttons will be clickable itself and i will change the background color of the selected radio. How can i do this? For example, I have "yes" and "no" labels and these labels will be clickable and there will be no radio buttons at all. These are only changing color of background but showing radio buttons which is not wanted.
Javascript
$(document).ready(function(){
var ok = "green";
var notok = "red";
$.each($(":radio"), function(){
if($(this).prop("checked") == false)
{
$(this).parent().css("background", notok);
}
else
{
$(this).parent().css("background", ok );
}
})
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
$(this).parent().css("background", ok );
})
})
HTML
<FORM name="form1">
<div>
<input type="radio" id="yes" name="q"checked="checked"/> Yes
</div>
<div>
<input type="radio" id="no" name="q"/>No
</div>
</FORM>
Thanks

This one is actually deceptively easy. If you just use a "label" tag, it will be clickable. Then you can simply hide the radio button.
<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>
<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>
btw, here's a JSFiddle of it working: http://jsfiddle.net/scGE9/2/

If I understand what you're asking, I'd hide the radio buttons, then attach a click handler to the labels that changed the background color:
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
Here's a jsfiddle to demonstrate.
In short, when a label is clicked, remove the 'selected' class controlling the background color from all relevant labels, and apply it to the one that was clicked.