The following javascript allows a radiobutton set to control the alternate visibility of 2 <fieldset>
s. I added a function provwarning
to intercept a click on the radiobuttons and determine if a change would lead to a record deletion. If that were possible, the function displays a warning message and either continues (on "Continue") or reverts the radiobutton set to the original setting on "Cancel". Unfortunately, the "Cancel" reversion is not happening. What am I doing wrong?
$(document).ready(function() {
// initial visibility of provenance option fields
$("input[name='provenance']").ready(function(){
var v=$(this +":checked").val();
if(v=='del'){
$('#del').show();
$('#cross').hide();
} else if (v=='cross'){
$('#cross').show();
$('#del').hide();
} else{
$('#cross').hide();
$('#del').hide();
}
});
// toggle hide/show of provenance field
$("input[name='provenance']").live("click", function(){
v=$(this +":checked").val();
provwarning(v); //intercept choice and check for conflicts
v=$(this +":checked").val();//may have changed due to provwarning
if(v=='del'){
$('#del').show();
$('#cross').hide();
} else if (v=='cross'){
$('#cross').show();
$('#del').hide();
} else{
$('#cross').hide();
$('#del').hide();
}
});
//determine if user choice will clobber existing data
//warn user
//continue or revert user choice to previous value
provwarning=function(changingto){
c=$('input[name="cross_id"]').val();
d=$('input[name="del_id"]').val();
if(!(c||d))return; //prov_was is 'Unknown', so there is no conflict
cw=(changingto=='unknown')? 'Unknown' : (changingto=='del') ? 'Delivered' : 'Bred Onsite';
if(d){
prov_was='del';
msg="If you change the provenance to '"+cw+"' the current provenance, 'Delivered', will be deleted.";
}else{
prov_was='cross';
msg="If you change the provenance to '"+cw+"' the current provenance, 'Bred Onsite', will be deleted.";
}
if(changingto==prov_was) return; //no change, so no worries
m=modalpop(msg); //make a div to show the dialog
$(m).dialog({
resizable: false,
height:140,
modal: true,
title: 'Conflict with current Provenance',
buttons: {
"Continue": function() {
$(this).dialog('close');
},
"Cancel": function() {
//not changing the form setting. WHY?
$("input[name='provenance']:checked").val(prov_was); $(this).dialog('close');
}
}
});
};
});
//create or empty a div with id='modalpop' for use as an alert box with jquery-ui.dialog()
function modalpop(msg){
var m=$('#modalpop');
if($(m).length==0){
m='<div id="modalpop">'+msg+'</div>';
}else{
$(m).text(msg);
}
return m;
}
And the HTML:
<fieldset><legend>Provenance</legend>
<fieldset class='col1'>
<ul>
<li><input type='radio' name='provenance' id='provenance0' value='unknown' ><label for='provenance0' class='lilab'>Unknown</label></li>
<li><input type='radio' name='provenance' id='provenance1' value='del' ><label for='provenance1' class='lilab'>Delivered</label></li>
<li><input type='radio' name='provenance' id='provenance2' value='cross' checked="checked" ><label for='provenance2' class='lilab'>Bred onsite</label></li>
</ul>
</fieldset>
<fieldset class='optcol2' id='cross'>
<div><label for='dam'>Dam</label><input name='dam_fish_name' id='dam' value='100730'/></div>
<div><label for='dam_count'>Dam Count</label><input name='dam_count' id='dam_count' value='6'/></div>
<div><label for='sire'>Sire</label><input name='sire_fish_name' id='sire' value='100715'/></div>
<div><label for='sire_count'>Sire Count</label><input name='sire_count' id='sire_count' value='6'/></div>
<div><label for='cross_date'>Cross Date</label><input name='cross_date' id='cross_date' value='2011-02-08'/></div>
<div><label for='crossnotes'>Notes</label><textarea name='cross_notes' id='crossnotes'></textarea></div>
<input name='cross_id' type="hidden" value="39" />
</fieldset>
<fieldset class='optcol2' id='del'>
<div><label for='del_date'>Delivery Date</label><input name='delivery_date' id='del_date' type='text' value=''></div>
<div><label for='del_count'>Delivery Count</label><input name='delivery_count' id='del_count' class='valcount' type='text' value='0'></div>
<div><label for='supplier'>Supplier</label><select name='supplier_id' id='supp_name'>
<option value='1' >ZIRC</option>
</select></div>
<div><label for='delnotes'>Notes</label><textarea name='delivery_notes' id='delnotes'></textarea></div>
<input name='del_id' type="hidden" value="" />
</fieldset>
</fieldset>
Check out the working jsFiddle demo that changes your "Cancel" button to this:
This is what I came up with, bit slower than Scott, but same idea...
Your only real error was how you were going about setting the checked value on your radio button:
Should be more like this:
Working demo here: http://jsfiddle.net/ryleyb/Zh5ma/