Develop Reference

Change content of div based on radio button selection

I've been trying for a long time to make a button appear on a webpage and make the link that button goes to change depending on the radio button selected. However, so far nothing appears on my web page except for the radio buttons.
This is my code so far:
<div id="quick-book">
<script>
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div name ="button">
</div>
</div>
I hope someone here can help guide me in the right direction!

You should add a function in you code and add it when click in the radio.
Something like this:
<script>
function myFunction() {
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div id="button">
</div>
</div>
And change name="button" to id="button"

First, your <script> is executed only once, not on every radio button change. And since initially nothing is checked, script does nothing. Moreover, when this script is executed, elements below are not rendered yet. You need to:
1) Move the script down, below all your divs.
2) Create a change callback to check radio buttons values
<div id="quick-book">
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
</form>
<div id ="button">
</div>
</div>
<script>
function change(radio) {
if (radio.checked && radio.id === "radio-restaurant") {
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>

<div id="quick-book">
<script>
function checkRadio(radio) {
if (radio.id === "radio-restaurant"){
document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
</form>
<div id="button-div">
</div>
</div>

Try this:
<div id="quick-book">
<script>
function $(e) {
//Just something I have found useful
return document.getElementById(e);
}
function rb_onchange(s) {
//First clean up
$("button").innerHTML = '';
//The id is added because both radio buttons
//will fire this event when one changes
//So to prevent both both conditions firing you have to add this additional condition
if (s.checked && s.id == "radio-restaurant") {
//If the radio button is checked and the id of
//said radio button is the restaurant one then add the innerHTML
$("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
}
else if (s.checked && s.id == "radio-hotel") {
//If the radio button is checked and the id of
//said radio button is the hotel one then add the innerHTML
$("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
</form>
<div name ="button"></div>
</div>
EDIT:
Seems I failed to notice the id attribute of the button div.,....
Change:
<div name ="button"></div>
to
<div name="button" id="button"></div>
EDIT:
Adding some comments

$(document).ready(function ()
{
$("#watch-me").click(function()
{
$("#show-me:hidden").show('slow');
$("#show-me-two").hide();
$("#show-me-three").hide();
});
$("#watch-me").click(function()
{
if($('watch-me').prop('checked')===false)
{
$('#show-me').hide();
}
});
$("#see-me").click(function()
{
$("#show-me-two:hidden").show('slow');
$("#show-me").hide();
$("#show-me-three").hide();
});
$("#see-me").click(function()
{
if($('see-me-two').prop('checked')===false)
{
$('#show-me-two').hide();
}
});
$("#look-me").click(function()
{
$("#show-me-three:hidden").show('slow');
$("#show-me").hide();
$("#show-me-two").hide();
});
$("#look-me").click(function()
{
if($('see-me-three').prop('checked')===false)
{
$('#show-me-three').hide();
}
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-sm-12" align="center">
<form id='form-id'>
<input id='watch-me' name='test' type='radio' checked /> Radio 1
<input id='see-me' name='test' type='radio' /> Radio 2
<input id='look-me' name='test' type='radio' /> Radio 3
</form>
<br><br>
<div id='show-me'>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
</div>
</div>
<div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
<div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
</div>
</div>

Toggle checked status on input inconstant in jQuery function

I fear I'm missing something painfully obvious, but this jquery function appears to be working inconsistently.
HTML:
<label id="income_this_tax_year">
<div class="left">
<p>Have you had Self-Employment, Sole Trade or CIS income during the tax year?</p>
</div>
<div class="right">
<input type="radio" name="income_this_tax_year" value="yes" />
<input type="radio" name="income_this_tax_year" value="no" />
<button type="button" data-value="yes" class="button">Yes</button>
<button type="button" data-value="no" class="button">No</button>
</div>
<div class="float-clear"></div>
</label>
jQuery:
$(document).ready(function(){
$('button').on('click', function(e) {
e.preventDefault();
var option = $(this).parent('.right').parent('label').attr('id');
var value = $(this).data('value');
$('#'+option).find('input[type=radio]').prop('checked', false);
$('#'+option+' input[value='+value+']').prop('checked', true);
var income_this_tax_year = $('input[name=income_this_tax_year]:checked').val();
console.log(income_this_tax_year);
})
});
jsfiddle
The buttons are to replace the interaction of the radio inputs. On the first initial clicks of each button it works as intended, but any consequent click returns undefined (and removes the checked status from the inputs entirely).
What makes this particularly tricky to debug is that when I inspect the DOM everything happens as expected. The radios checked status/attr does change, but jquery still reports it as undefined and visually the radio button isn't checked (you can see this if you inspect the result on jsfiddle and watch the inputs as you click the buttons).
Any thoughts?

You can use prop instead:
$(document).ready(function() {
$('button').on('click', function(e) {
e.preventDefault();
var option = $(this).parent('.right').parent('label').attr('id');
var value = $(this).data('value');
//$('#' + option).find('input[type=radio]').removeAttr('checked');
//replace here attr with prop
$('#' + option + ' input[value=' + value + ']').prop('checked', true);
var income_this_tax_year = $('input[name=income_this_tax_year]:checked').val();
console.log(income_this_tax_year);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="income_this_tax_year">
<div class="left">
<p>Have you had Self-Employment, Sole Trade or CIS income during the tax year?</p>
</div>
<div class="right">
<input type="radio" name="income_this_tax_year" value="yes" />
<input type="radio" name="income_this_tax_year" value="no" />
<button type="button" data-value="yes" class="button">Yes</button>
<button type="button" data-value="no" class="button">No</button>
</div>
<div class="float-clear"></div>
</label>

Use prop() instead of attr() and removeAttr() to change the checked status of radio buttons.
Check .prop('checked',false) or .removeAttr('checked')? for more info.
Demo
$(document).ready(function() {
$('button').on('click', function(e) {
e.preventDefault();
var option = $(this).parent('.right').parent('label').attr('id');
var value = $(this).data('value');
$('#' + option + ' input[value=' + value + ']').prop('checked', true);
var income_this_tax_year = $('input[name=income_this_tax_year]:checked').val();
console.log(income_this_tax_year);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<label id="income_this_tax_year">
<div class="left">
<p>Have you had Self-Employment, Sole Trade or CIS income during the tax year?</p>
</div>
<div class="right">
<input type="radio" name="income_this_tax_year" value="yes" />
<input type="radio" name="income_this_tax_year" value="no" />
<button type="button" data-value="yes" class="button">Yes</button>
<button type="button" data-value="no" class="button">No</button>
</div>
<div class="float-clear"></div>
</label>

Javascript method does not get call on a click of a button from my mobile application?

I have a simple page in HTML that calls a JavaScript method on click of a button. This works fine when i call it from my computer. However when i try to run this from my mobile application (Note: i am building a mobile app using HMTL5 CSS and Javascript, cordova) when i click on the Submit button it would just not do anything not even print the alert statement. i am stumped and have no idea why is it behaving different ?
<div data-role="page" id="PostUserUpdates" >
<div data-role="header" data-position="fixed" data-theme="b">
</div>
<div data-role="main" class="ui-content">
<pre><B>
<div id="resultDayOfWeek"></div>
<div id="resultNum"></div>
<div id="resultDir"></div>
<div id="resultStop"></div>
<div id="resultTime"></div>
</B>
</pre>
<fieldset data-role="controlgroup">
<legend>Choose Status</legend>
<label for="Arrived/Left">Arrived/Left</label>
<input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="status" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="status" id="Canceled" value="Canceled">
<label for="getupdate">getupdate from others</label>
<input type="radio" name="status" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="status" id="Other" value="Other">
</fieldset>
<textarea name="addinfo" id="info"> Comments goes here.... </textarea>
<button class="ui-btn ui-btn-b" onclick="postSubmit();" >Submit </button>
<div id="poststatus"></div>
</div>
</div>
.
function postSubmit()
{
alert("In PostSubmit");
var dow= document.getElementById("resultDayOfWeek").innerHTML;
var busnum= document.getElementById("resultNum").innerHTML;
var direction= document.getElementById("resultDir").innerHTML;
var stopname= document.getElementById("resultStop").innerHTML;
var time= document.getElementById("resultTime").innerHTML;
var value ="" ;
if (document.getElementById('Arrived/Left').checked) {
value = document.getElementById('Arrived/Left').value;
}
else if (document.getElementById('Delayed').checked) {
value = document.getElementById('Delayed').value;
}
else if (document.getElementById('Canceled').checked) {
value = document.getElementById('Canceled').value;
}
else if (document.getElementById('getupdate').checked) {
value = document.getElementById('getupdate').value;
}
else{
value = document.getElementById('Other').value;
}
alert(value);
alert(dow);
alert(busnum);
alert(direction);
alert(stopname);
alert(time);
var comments = document.getElementById('info').value;
alert(comments);
}

Cause firering not click event, but touch event ( touchstart, touchend, touchmove and touchcancel )
See this answer to get example

Solution 1:
Try putting the javascript part in head.
Demo here.
Solution 2: Simply use jQuery .click. (put it in $(document).ready())
$("#myButton").click(postSubmit);

show and hide div on checked radio button and submit form

I have 5 radio buttons and want to show different div on selection of particular radio
button, but other div as contact form should be displayed on submitting form.
And one more thing I want next div on same location of first div ( first div show and second div hide at same place)
<p>Tell us more about Yourself</p>
<form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
</div>
<br/>
<div class="submit-btn-area">
<button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
</div>
</form>
I have not much experience in javascript so please check my code
<script type="text/javascript">
$('input:radio[value="Restaurant"]').change(
$('form').submit(function (e) {
if ($(this).is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
</script>

In the above code the $(this) refers to the form element, and not the radio input field.
I suggest, that on the submit event of the form, that we check the radio input field and hide and show the divs accordingly.
<script type="text/javascript">
$().ready(function() {
$('form').submit(function (e) {
$('input:radio[value="Restaurant"]').is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
});
</script>

How to hide/show form using jQuery in following scenario?

I'm using Smarty, Php and Jquery for my website. When the page loads the following form should not be displayed. When user clicks on a hyperlink given below it should get dsiplayed and if user wants to hide the form again he will click on the same hyperlink to hide the above form. In short on formload the form shouldn't be displayed and upon clicking on hyperlink the form should be displayed if it is open and should be closed if it is hidden. Can you help me in achieving this using jQuery? Thanks in advance.
<a class="reply" href="{$control_url}modules/enquiries/reply_to_enquiry.php?contact_id={$data.contact_id}&op=reply&from_date={$from_date}&to_date={$to_date}">Reply</a>
<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
<ul>
<li>
<label>{'To Name'|signal_on_error:$error_msg:'contact_full_name'} :</label>
<div class="form-element">
<input type="text" name="contact_full_name" id="contact_full_name" {if $data.contact_full_name!=''} value="{$data.contact_full_name}" {else} value="{$contact_full_name|capitalize}" {/if} class="">
</div>
</li>
<li>
<label>{'To Email'|signal_on_error:$error_msg:'contact_email_id'} :</label>
<div class="form-element">
<input type="text" name="contact_email_id" id="contact_email_id" {if $data.contact_email_id !=''} value="{$data.contact_email_id}" {else} value="{$contact_email_id}" {/if} class="">
</div>
</li>
<li>
<label>{'Reply'|signal_on_error:$error_msg:'reply'} :</label>
<div class="form-element">
<textarea name="reply" id="reply" cols="60" rows="12">{if $error_msg!=""}{$data.reply}{/if}</textarea>
</div>
</li>
<li>
<label>{'Upload File'|signal_on_error:$error_msg:'reply_file_name'} :</label>
<div class="form-element">
<p class="uploadBtn"><input type="file" id="reply_file_name" name="reply_file_name" /></p>
<div class="input-info"> <span class="required">Note* (Image size should be less then 1 mb and alowed format types are jpg, jpeg, gif, png, JPG, JPEG, GIF, PNG, doc, docx)</span></div>
</div>
</li>
<input type="hidden" name="contact_id" value="{$data.contact_id}" />
<input type="hidden" name="from_date" value="{$from_date}" />
<input type="hidden" name="to_date" value="{$to_date}" />
<input type="hidden" name="op" value="{$op}" />
<li>
<label></label>
<div class="form-element">
<input type="submit" name="submit" id="submit" class="c-btn" value="Send">
<input type="button" name="cancel" id="cancel" class="c-btn" value="Cancel" onclick="javascript:window.location.href='{$control_url}modules/enquiries/view_contact_us.php?page={$page}&from_date={$from_date}&to_date={$to_date}'">
</div>
</li>
</ul>
</form>

What about users without JS enabled? This Fiddle may be a more complete solution:
HTML:
<!-- Have the link anchored to the form so it still makes sense for text-only, speech-readers, or users with JS disabled -->
<a class="reply" href="#manage_reply_enquiry">Reply</a>
<form id="manage_reply_enquiry">
<fieldset>
<legend>I am Legend</legend>
<input type="text" name="field" value="a form field" />
</fieldset>
</form>
JS:
//If JS is enabled add a class so we can hide the form ASAP (and only for JS enabled browsers)
document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours (or native JS if you prefer):
$(document).ready(function(){
$(".reply").click(function(){
if($("#manage_reply_enquiry").is(":visible")){
$("#manage_reply_enquiry").hide();
} else {
$("#manage_reply_enquiry").show();
}
//don't follow the link (optional, seen as the link is just an anchor)
return false;
});
});
CSS:
.js #manage_reply_enquiry {
display:none; /* hide for JS enabled browsers */
}
#manage_reply_enquiry {
/* form styles here */
}
DEMO

Hide the form initially using css:
#manage_reply_enquiry { display: none; }
Then bind an event handler to a link and toggle the visibility:
$(function(){ //when the DOM is ready
$('a.reply').click(function(){ //when clicking the link
$('#manage_reply_enquiry ').toggle(); //toggles visibility
});
});

<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data" style="display: none">
In your script
$(".reply:first").click(function() {
$("#manage_reply_enquiry").toggle();
})

Try:
HTML:
<div id="someId" style="display: none;">
<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action=" {$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
//your normal code
</form>
</div>
JAVASCRIPT:
$(document).ready(function(){
$(".reply").click(function(){
if($("#someId").css("display") == "none"){
$("#someId").show();
} else {
$("#someId").hide();
}
});
});
hope that helps!

method hide(), show() and toggle is expensive(performance). Good method is
var el = $("#someId")
if (el.style.display=='none'){
el.style.display='block'
}else{
el.style.display='none'
}
1) you have one request to object!
2) native js is fast

For anyone having the same issue :)
$(document).ready(function() {
$("#manage_reply_enquiry").hide();
$(".reply").on({
click: function(){
$("#manage_reply_enquiry").toggle();
}
});
});