I have form that is populated with the data after Ajax call. Once user clicks on Back button form should be cleared out. For some reason once data is populated and radio-button is checked reset did not clear the value and uncheck the element. Here is code example:

     $.each(getData, function(name, value){
        var elementName = $('[name="'+'frmSaveaccount_'+name.toLowerCase()+'"]'),
            elementType = elementName.prop('type'),
            elementVal = $.trim(value);

        switch(elementType){
            case 'checkbox':
                value == 1 ? elementName.attr('checked',true) : elementName.attr('checked',false);
                break;
            case 'radio':
                $('input[name="'+'frmSaveaccount_'+name.toLowerCase()+'"][value="' + value + '"]').attr('checked', true);                
                break;
            case 'select-one':
                elementName.val(value);
                break;
            default:
                elementName.val(value);
        }
    });

and here is function that clears the form:

$('#account_goback').on('click',clearForm);
function clearForm(e) {
    e.preventDefault();
    $('.frm-Submit')[0].reset();
    $('.frm-Submit').find('input:hidden').val('');
}

Is there a way to uncheck the radio button when form should be cleared out? Thank you.

I have form that is populated with the data after Ajax call. Once user clicks on Back button form should be cleared out. For some reason once data is populated and radio-button is checked reset did not clear the value and uncheck the element. Here is code example:

     $.each(getData, function(name, value){
        var elementName = $('[name="'+'frmSaveaccount_'+name.toLowerCase()+'"]'),
            elementType = elementName.prop('type'),
            elementVal = $.trim(value);

        switch(elementType){
            case 'checkbox':
                value == 1 ? elementName.attr('checked',true) : elementName.attr('checked',false);
                break;
            case 'radio':
                $('input[name="'+'frmSaveaccount_'+name.toLowerCase()+'"][value="' + value + '"]').attr('checked', true);                
                break;
            case 'select-one':
                elementName.val(value);
                break;
            default:
                elementName.val(value);
        }
    });

and here is function that clears the form:

$('#account_goback').on('click',clearForm);
function clearForm(e) {
    e.preventDefault();
    $('.frm-Submit')[0].reset();
    $('.frm-Submit').find('input:hidden').val('');
}

Is there a way to uncheck the radio button when form should be cleared out? Thank you.

• javascript
• jquery
• radio-button

• try with : $(document).on('click', '#account_goback',clearForm); – Jordi Jordi Commented May 3, 2018 at 16:37

2 Answers 2

Try this:

$(document).ready(function(){
	$('button').on('click', function(){
      $('input[type="radio"]').prop('checked', false);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='myRadio'> 1
<input type='radio' name='myRadio'> 2
<button>Reset</button>

This is what I use to clear Radio Buttons.

function clearRadio(){
    var a=[];
    a=document.getElementsByTagName('input');
    for(var b=0;b<a.length;b++){
      if(a[b].type=='radio'){
        a[b].checked=false;
      }
    }
  }