We Keep Coding

When radio button is checked redirect to second page and hide certain html element in the second page by checking if radio button was clicked

Here is my first page data in html
<div class="edu">
<input type="radio" name="edu" class="ug" value="ug" checked="checked">
<label class="radio-label">Undergraduate</label>
<input type="radio" name="edu" value="pg" class="pg">
<label class="radio-label">Postgraduate</label>
<input type="radio" name="edu" value="cu" class="cu">
<label class="radio-label">Continuing Education</label>
</div>
Here is my second page content:
<div class="display">
sample text
</div>
When the client check the "continuing education" radio button from the first page then the second page will be redirected/opened in a new window/new tab. An in second page I want to check if the "continuing education" button was clicked in the first page. If, then hide the ".display" div in the second page.
I want to use Jquery, and any other things in addition if needed.
Please guide me as I am new. Thanks.

Load jQuery from here at top of both first and second html file:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Add this jQuery code at the bottom of the first page:
<script>
$(document).ready(function(){
$(".cu").on("click", function(){
localStorage.setItem("cu","clicked");
//var key = localStorage.key(0);
//alert(key);
window.open('second.html', '_blank');
});
});
</script>
Then at the bottom of the second html page add this code. Which will check if localStorage value was set to "cu" thorough which you can understand "continuing education" were clicked or not. If, then it will hide the ".display" div.
<script>
$(document).ready(function(){
if(localStorage.key(0) == "cu")
{
//$(".display").fadeOut(500) ;
$(".display").hide(500) ;
//alert(localStorage.key(0));
localStorage.clear();
localStorage.removeItem("cu");
}
});
</script>

Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

I am trying to setup two sets of radio buttons that will function simultaneously. In other words whenever Male is checked on the top, I would like Male at the bottom to be automatically checked. (and vice versa) If user scrolls down and clicks female then the one at the top should be checked. No matter which radio the user clicks both radio sets should always have the same value checked. Please advise on the most practical way to accomplish this. My main focus is Javascript or Jquery but I have spent several hours trying to come up with something to no avail. Please advise. Thanks! :)
<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>

Attach to the change event and selecting all other radio buttons which have the same beginning of the name and are of equal value but which are not the current one.
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.prop('checked', $(this).prop('checked'));
});
The above is not using any clever caching of the selectors which you can add yourself.
Basically, whenever a radio button changes it's checked value the code will select all other radio buttons with the same value (male/female) which also start with the same name (sex????) and set their checked property to the same value as the current one.
I hope this makes sense. See a working demo below.
DEMO - Changing radio buttons in a set.
Edit
I just noticed.. I am using jquery 1.3.2 and upgrading isnt an option
at the moment. You don't happen to have a 1.3.2 alternative do you?
For jQuery version 1.3.2 use the attr method instead of the prop method:
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.attr('checked', $(this).attr('checked'));
});
DEMO - Changing radio buttons in a set using jQuery 1.3.2.

Just add an onclick listener to both sets. Like this:
document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;
function clickMale(){
document.getElementById("male1").checked=true;
document.getElementById("male2").checked=true;
}
function clickFemale(){
document.getElementById("female1").checked=true;
document.getElementById("female2").checked=true;
}
And add IDs to the radio buttons ("male1", "male2", "female1", "female2")

Since you mentioned it, Zove's answer in jQuery would be something like this, if you prefer:
$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);
function clickMale(){
$("#male1").attr('checked', true);
$("#male1").attr('checked', true);
}
function clickFemale(){
$("#female1").attr('checked', true);
$("#female2").attr('checked', true);
}
You don't need jQuery for something this simple, but if you're using it elsewhere, it's best to be consistent.

It might make sense, to share a class for both male / female inputs, e.g. 'js-male' or 'js-female'). This saves some code. for instance you could do:
$('.js-male').change(function() {
$('.js-male').attr('checked', $(this).attr('checked'));
});
$('.js-female').change(function() {
$('.js-female').attr('checked', $(this).attr('checked'));
});
There might be more elegant ways to deal with the whole situation so. Do you really want the inputs to have different names ('male', 'male2'), which means that your server receives two different params? If you give both radio button groups the same names, only the value of the last one will be sent to the server, anyway, if you mirror the radio buttons anyway, this doesn't really matter.
Demo

Just change the location of your jQuery source and this will work right out of the box.
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#male1, #male2").live("click", function(){
$("#male1").attr("checked", $("#male2").attr("checked"));
$("#male2").attr("checked", $("#male1").attr("checked"));
});
$("#female1, #female2").live("click", function(){
$("#female1").attr("checked", $("#female2").attr("checked"));
$("#female2").attr("checked", $("#female1").attr("checked"));
});
});
</script>
</head>
<body>
<div class="top">
<input id="male1" type="radio" name="sex" value="Male" /> Male<br />
<input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input id="male2" type="radio" name="sex2" value="Male" /> Male<br />
<input id="female2" type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
</body>
</html>

Radio Button Control in jquery

I'm new to Web development and jQuery.
I'm trying to build an ASPX page with two RadioButton controls that must perform the following actions:
On page load, one of the two must be selected depending on a flag from an object on the ASPX page. Lets call it customer.Id. If the Id is true, select RadioButton one must be set else select RadioButton 2 must be set.
At any point after page load the user selects a RadioButton, the other must be deselected.
When RadioButton two is clicked, hide a Table named "employee table" and when RadioButton one is clicked, show that Table.
Can anyone please tell me how I can get this functionality in jQuery functions?

Not sure about .NET but in Classic ASP you would write a variable like this <%=customerID%>.
In jQuery, I think you can do something like this:
<input type="radio" id="radio1"> Yes
<input type="radio" id="radio2"> No
<table border="1" id="employeeTable">
<tr><td>This is the table</td></tr>
</table>
... and then some jQuery:
$(document).ready(function() {
var customerID = <%=customerID%> // asp variable
if (customerID != "") {
$('#radio1').prop('checked', 'checked');
} else {
$('#radio2').prop('checked', 'checked');
}
$('#radio1').click(function() {
$('#employeeTable').fadeIn('fast');
})
$('#radio2').click(function() {
$('#employeeTable').fadeOut('fast');
})
})
You can have a look/play here: http://jsfiddle.net/qcLtX/7/
Try changing the customerID value to nothing, like var customerID = "".
Good luck
UPDATE
Where I have used .prop: If you are using jQuery version 1.6 or greater, you should use .prop, otherwise, use .attr.

Radio buttons are grouped by their name attribute, like so (source).
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
If the radio buttons are grouped, then selecting any one of them automatically delselects all the others in that group.
So the buttons cannot have a distinct name. If you want to distinguish between radio buttons (without referring the their value), you should add an id.
<input type="radio" name="sex" id="m" value="male" />
You can set the selected radio button on page load declaratively in markup, or using jquery.
Declarative version:
<input type="radio" checked="checked" name="sex" value="male" />
jQuery:
$(document).ready(function(){
$("#m").attr("checked", "checked");
});

Web radio buttons where you can switch all off

I want to have 3 radio type buttons on my web page. If I click on one button it switches on and the other 2 in the group switch off. So far so normal. However if I click the currently 'on' button I want it to toggle to 'off'. I.e. be able to have all buttons in the group switched off.
I've had a look at the jQuery UI button, but I cant figure out how to implement this. Is this possible? Or is there some other javascript library that offers this feature?
Code example of normal jQuery radio buttons ...
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#radio").buttonset();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</body>
</html>

What you want is, as you know, not how radio buttons work. And it is usually not such a good idea to subvert the usual behavior of any UI element. However, you could have a button labeled, say, "clear all" with an onclick handler that would clear all of the radio buttons. That's a good idea, I think: it's always a pain, imo, to have to select a second radio button to clear the checked state of the first. Of coure, you don't need jquery to do this.
To repeat, though: I wouldn't assign one of the radio-button array to act on others as you describe.

I would have done it this way:
$(window).ready(function() {
var currentRadio = new Array();
$('input:radio').bind('click', function() {
var name = $(this).attr('name');
if(name in currentRadio && currentRadio[name] === $(this)[0]) {
$(this).removeAttr('checked');
currentRadio[name] = false;
} else {
currentRadio[name] = $(this)[0];
}
});
});
This is universal solution for several groups of radio buttons (grouping by name).
Here it is in action: http://jsfiddle.net/LkBYc/

Input Type=Image "On" without onclick event

I have a form with an input type=image. It used to have a confirm in its onclick that returned true/false allowing/stopping the form submit. I've recently 'upgraded' to a non-modal dialog with a callback handler.
Since the callback handler is non-modal, the return value to the input is always false, don't submit... When I submit upon confirmation, the name of the input is not on the form, since it technically wasn't clicked. This is the problem, the code is looking for the input to be on...
I can use a hidden field with the old name and set it to on to bypass that issue, but that seems cludgy. What would be nice, is if I could 'turn the input on' without triggering the onclick (a recursive disaster). Maybe not a disaster, but not sexy. I've tried to set the value of the input to on, but it doesn't seem post.
Any ideas?
P.S. I am not using .NET, so solutions involving ASP.NET won't apply :-(
I am adding example code. When clicking Foo!, you'll notice that Foo.x=0 and Foo.y=0 in the address bar. Clicking bar, you get nothing. I'd like to be able to place bar on the form inside the BarCallback.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script language="javascript" type="text/javascript">
function Bar() {
setTimeout(BarCallback, 500);
return false;
}
function BarCallback() {
document.getElementById('TheForm').submit();
}
</script>
</head>
<body>
<form method="get" id="TheForm">
<input type="image" alt="Foo!" name="Foo" />
<br />
<input type="image" alt="Bar!" name="Bar" onclick="return Bar();" />
</form>
</body>
</html>

What would be nice, is if I could 'turn the input on'
Not possible, sorry. You can only add another control to pretend it was (eg. hidden input, or direct parameter if you're using AJAX).
I've tried to set the value of the input to on, but it doesn't seem post.
How did it fail? For an image input you would need to include .x and .y suffixes to the field name, as that's what browsers do to pass an image click with a position. eg.
<input type="hidden" name="submit.x" value="1" />
<input type="hidden" name="submit.y" value="1" />
the code is looking for the input to be on...
Could you not fix the code to remove that requirement?