We Keep Coding

How to forward an user to a certain page but not right after they choose an option

I'm new to coding. Currently I'm working on templates for an online software. The user will be able to choose an option with a radio button. But the user shouldn't be redirected to the certain page linked to the radio button before the continue button gets clicked.
I can't include the entire code section, because it's for a company.
Info: The colors are just examples, because I can't use the original definitions for document names and classes/id's.
<!-- begin radio buttons-->
<div class="panel-default" id="panel-color">
<div class="panel-body"><strong>color</strong></div>
<div class="radio-buttons-color">
<ul class="radio-buttons-left">
<li>
<input type="radio" name="radio" id="radio-yellow">
<label for="radio2">yellow</label>
</li>
<li>
<input type="radio" name="radio" id="radio-blue">
<label for="radio2">blue</label>
</li>
<li>
<input type="radio" name="radio" id="radio-green">
<label for="radio2">green</label>
</li>
</ul>
<ul class="radio-buttons-right">
<li>
<input type="radio" name="radio" id="radio-red">
<label for="radio2">red</label>
</li>
<li>
<input type="radio" name="radio" id="radio-purple">
<label for="radio2">purple</label>
</li>
<li>
<input type="radio" name="radio" id="radio-orange">
<label for="radio2">orange</label>
</li>
</ul>
</div>
</div>
</div>
<!-- end radio buttons -->
When the radio button with the label "yellow" is selected for example, the user should be redirected to the html document, which contains the yellow colored pictures. But the user should see this page after he/she clicks the continue button.

You can do the above using JavaScript. Record the onclick event on the List items you have created to capture the colour on which click has happened. Create a button and redirect the url to that colour url.
<div class="panel-default" id="panel-color">
<div class="panel-body"><strong>color</strong></div>
<div class="radio-buttons-color">
<ul class="radio-buttons-left" onclick="clicked(event)">
<li>
<input type="radio" name="radio" id="radio-yellow" >
<label for="radio2">yellow</label>
</li>
<li>
<input type="radio" name="radio" id="radio-blue">
<label for="radio2">blue</label>
</li>
<li>
<input type="radio" name="radio" id="radio-green">
<label for="radio2">green</label>
</li>
</ul>
<ul class="radio-buttons-right" onclick="clicked(event)">
<li>
<input type="radio" name="radio" id="radio-red">
<label for="radio2">red</label>
</li>
<li>
<input type="radio" name="radio" id="radio-purple">
<label for="radio2">purple</label>
</li>
<li>
<input type="radio" name="radio" id="radio-orange">
<label for="radio2">orange</label>
</li>
</ul>
</div>
</div>
<a href="" onclick="redirect()"><button>
Continue
</button></a>
<script>
var url = ""
function clicked(e) {
console.log(e.target.id);
url = e.target.id;
}
function redirect() {
console.log(url)
window.location.href = url;
}
</script>
Refer to https://jsfiddle.net/2kmjudLw/1/ for live demo.

You can try to pass the radio button id to the next page by passing the query parameter and you can handle the page color in the next page by getting the value from the queryparameter.
<button onclick="redirectPage()">Click me</button>
<script>
function redirectPage() {
var checkedRadioBox=document.querySelector('input[name=radio]:checked');
if(checkedRadioBox!=undefined){
location.href= "https://www.google.com?q="+checkedRadioBox.id;
}
}
</script>

Code for selecting color. Here we assume that the pages name are same as color name.
$("input[name='radio']").on('click', function(){
var id = $(this).attr('id');
var color = id.split("-");
window.location = color[1];//Add page extension here e.g. .php, .html
})
Code for getting back to the page
<a id="continue" href="">continue</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('#continue').attr('href', document.referrer);
</script>

it is very dependent on your framework, but basically it can be implemented with:
let radios = document.querySelector('[name=radio]'); //get all radio inputs
[].forEach.call(radios, (radio)=>{
radio.addEventListener('click', (e)=>{
let url = e.target.value; // you need to assign redirect url to value attribute for example (<input type="radio" name="radio" id="radio-yellow" value="http://stackoverflow.com">)
let confirm = confirm('confirm redirect?'); //built in javascript confirmation modal, returns true if user click OK
confirm && window.location.href = url; //redirect if ok
}); //bind event callback on click to radio button
}); //iterate over radio buttons and set callback function to it

Hide and Show radio buttons with checkbox

Basically i'd like hide and show the radio buttons if the checkbox is checked or not, but with some conditions.
The first radio button needs to be checked by default even if hidden once the checkbox has been checked.
If the checkbox has been checked then show all the radio buttons and the user can choose another radio button if necessary.
But, if the checkbox is unchecked, set the radio button back to the first checked by default and hide all the radio buttons.
I tried to modify some solutions that i found, but without success :(
My HTML:
<input name="featured_ad" value="1" type="checkbox">condition</input>
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>
</div>
Thanks a lot!

As we discussed does this work for you?
HTML:
<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649" onclick="setcheckbox()">value 1<br>
<input type="radio" name="ad_pack_id" value="497648" onclick="setcheckbox()">value 2<br>
<input type="radio" name="ad_pack_id" value="497647" onclick="setcheckbox()">value 3<br>
</div>
JS:
function resetradio (checkbox) {
var buttons = document.querySelector('.buttons');
var radios = document.getElementsByName('ad_pack_id');
radios[0].checked = true;
if (checkbox.checked == true) {
buttons.style.display = 'block';
}
else {
buttons.style.display = 'none';
}
}
function setcheckbox () {
var checkbox = document.getElementsByName('featured_ad')[0];
if (checkbox.checked == false) {
checkbox.checked = true;
}
}
CSS:
.buttons {
display: none;
}
Fiddle: http://jsfiddle.net/dgqn5fc4/1/

You've got a few issues here. First of all, you need to make sure you close your input tags:
<input name="featured_ad" value="1" type="checkbox">condition</input>
<div class="buttons">
<input type="radio" name="ad_pack_id" value="497649">value 1</input>
<input type="radio" name="ad_pack_id" value="497648">value 2</input>
<input type="radio" name="ad_pack_id" value="497647">value 3</input>
</div>
You can then check your default radio button right in the html by adding checked="checked" to the appropriate radio element.
<div class="buttons">
<input type="radio" checked="checked" name="ad_pack_id" value="497649">value 1</input>
<input type="radio" name="ad_pack_id" value="497648">value 2</input>
<input type="radio" name="ad_pack_id" value="497647">value 3</input>
</div>
You can hide your radio buttons by default in your CSS:
.buttons {
display: none;
}
Then, you can show them using jQuery, and do your selections based on your condition:
$(document).ready(function(){
$("input[name='featured_ad']").on("change", function(){
var isChecked = $(this).prop("checked");
if(isChecked){
$(".buttons").show();
} else {
$(".buttons").hide();
$("input[name='ad_pack_id'][value='497649']").prop("checked", "checked");
}
});
});
Edit:
Here is a fiddle: http://jsfiddle.net/8q94Lvbo/

Do the following.
$('[name="featured_ad"]').on('change', function(){
var $first = $('[name="ad_pack_id"]').first();
var $rest = $('[name="ad_pack_id"]').slice(1);
if( $(this).is(':checked') ){
$first.prop('checked',true);
$first
.closest('span')
.hide();
$rest.prop({
'checked':false,
'disabled':false
});
} else {
$first
.closest('span')
.show();
$first.prop('checked',true);
$rest.prop({
'checked':false,
'disabled':true
});
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name="featured_ad" value="1" type="checkbox">condition
<div class="buttons">
<span><input type="radio" name="ad_pack_id" value="497649">value 1</span><br/>
<span><input type="radio" name="ad_pack_id" value="497648">value 2</span><br/>
<span><input type="radio" name="ad_pack_id" value="497647">value 3</span><br/>
</div>

You have to pass arguments to javaScript in quotes like onclick="Show_Div('Div_1')" not like onclick="Show_Div(Div_1)".
And for others requirement you can check the following html
<input type="checkbox" id="check" onclick="checkFun();"/>Your CheckBox<br/>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div('Div_1')" width="100px">
<p>
<input id="radio1" type="radio" onclick="Show_Div('Div_1')" class="cb1" onchange="cbChange1(this)" checked="checked"/>Flower 1</p>
<div id="Div_1" style="display: none;">
Flower is pink.
</div>
<br/>
<br/>
<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div('Div_2')" width="100px">
<p>
<input type="radio" id="radio2" onclick="Show_Div('Div_2')" class="cb1" onchange="cbChange1(this)" disabled >Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>
You can apply following simple JS and jQuery to achive your goal
function checkFun(){
console.log("click");
var ch=$("#check");
if(ch.is(':checked')){
$("#radio2").attr("disabled",false);
}else{
$("#radio1").prop("checked", true);
$("#radio2").prop("checked", false);
$("#radio2").attr("disabled",true);
}
}
function Show_Div(Div_id) {
if(Div_id=="Div_1"){
$("#Div_1").show();
$("#Div_2").hide();
}else{
$("#Div_2").show();
$("#Div_1").hide();
}
}
function cbChange1(obj) {
var cb1 = document.getElementsByClassName("cb1");
for (var i = 0; i < cb1.length; i++) {
cb1[i].checked = false;
}
obj.checked = true;
}

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>

Radio button checked attribute not updating on user action

I am trying to monitor the change on a radio group.
I am using topcoat with the following HTML :
<ul class="topcoat-list">
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="1" checked="checked">
<div class="topcoat-radio-button"></div>
Test1
</label>
</li>
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="2">
<div class="topcoat-radio-button"></div>
Test2
</label>
</li>
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="3">
<div class="topcoat-radio-button"></div>
Test3
</label>
</li>
</ul>
For a reason I don't quite get, the checked attribute does not get updated when the use selects another radio button...
I would like to be able to monitor the change with javascript, but right now, I can't get the value of the radio group...
$('input[name=topcoat]').change(function(){ changed() });
function changed() {
id = $('input[name=topcoat]').val();
alert(id);
}

Please try this way and i hope it will solve your problem :
<script type="text/javascript">
$(function(){
$('input[name="topcoat"]').change(function(){ changed() });
function changed() {
id = $('input[name="topcoat"]:checked').val();
alert(id);
}
});
</script>

Jquery and radio buttons

So I have some custom radio buttons which I created using js and some css, now I want when I click on a custom radio button, to set the clicked radio button as checked and the order ones as unchecked, so it should be only one checed radio button at the time.Here is what i tried to do, but doesn't work.
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this).parent().find('span').each(function(){
$(this).addClass('checked').find('input:radio').attr('checked','');
});
$(this).addClass('checked').find('input:radio').attr('checked','checked');
return false;
});
Some please help me, I really don't get this.
//LE
function customCheckBox()
{
$('.custom-checkbox li').find('input:radio').hide().wrap('<span />');
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this).parent().find('span').each(function(){
$(this).removeClass('checked').find('input:radio').attr('checked',false);
});
$(this).addClass('checked').find('input:radio').attr('checked',true);
return false;
});
}
This is how it works, I find all the radio inputs, and I wrap them with a <span> and the <span> element has some css styling...a custom image.
The Html
<ul class="custom-checkbox clearfix">
<li><input type="radio" name="ext" id="a" value=".ro"/><label for="a">.ro</label></li>
<li><input type="radio" name="ext" id="b" value=".com"/><label for="b">.com</label></li>
<li><input type="radio" name="ext" id="c" value=".net"/><label for="c">.net</label></li>
<li><input type="radio" name="ext" id="d" value=".org"/><label for="d">.org</label></li>
<li><input type="radio" name="ext" id="e" value=".info"/><label for="e">.info</label></li>
<li><input type="radio" name="ext" id="f" value=".biz"/><label for="f">.biz</label></li>
<li><input type="radio" name="ext" id="g" value=".us"/><label for="g">.us</label></li>
<li><input type="radio" name="ext" id="h" value=".eu"/><label for="h">.eu</label></li>
<li><input type="radio" name="ext" id="i" value=".mobi"/><label for="i">.mobi</label></li>
<li><input type="radio" name="ext" id="j" value=".name"/><label for="j">.name</label></li>
</ul>

In jQuery, the attributes 'checked' and 'selected' are set with the values true and false.
Assuming that there's no other underlying problem with your code, that should fix it. If it still doesn't work, you need to give a little bit more context, i.e. markup and maybe supporting code.
For a first shot, you would adjust your code like this:
$('.custom-checkbox li span, .bg-check').live('click', function(){
$(this)
.closest('.custom-checkbox')
.find('span')
.removeClass('checked')
.end()
.end()
.addClass('checked')
.find('input:radio')
.attr('checked',true)
.end();
});