JSFiddle - React, Tailwind, and code Playground
HTML
<div class="myclicks">
<input type="radio" name="thisclicks" value="one">One</input>
<input type="radio" name="thisclicks" value="two" >two</input> <input type="radio" name="thisclicks" value="three" >three</input>
</div>
<div class="mychanged">
<input type="radio" name="thischanges" value="one" >one</input> <input type="radio" name="thischanges" value="two">two</input> <input type="radio" name="thischanges" value="three" >three</input>
</div>
<div id='itdid'>
</div>
<div id='myfield'>text of field to clear</div>
JavaScript
var counter = 0;
$('.myclicks > input').click(function(e)
{
counter = counter+1;
$('#itdid').text('clicked '+ e.target.nodeName + $(this).val() + counter);
if(confirm('Address details will be cleared. Continue?'))
{
clearInputFields();
return true;
}
else
{
return false;
}
});
$('.mychanged > input').change(function(e)
{
counter = counter+1;
$('#itdid').text('changed ' + e.target.nodeName + $(this).val() + counter);
if(confirm('Address details will be cleared. Continue?'))
{
clearInputFields();
return true;
}
else
{
return false;
}
});
function clearInputFields()
{
$('#myfield').text("");
//$('#myfield').hide();
$('#myfield').fadeOut();
$('#myfield').text("new stuff "+ counter);
$('#myfield').fadeIn();
};