I want to reset the radio when the ajax request is successful?

Question

Radio Button

 - <form id="form-reset">
                                           @csrf
                                           <input type="hidden" id="questionId" value="{{$data->id}}">
                                           <div class="btn btn-group-toggle d-flex flex-column" id="radioDiv"
                                               data-toggle="buttons">
                                               <label class="btn btn-secondary mb-2">
                                                   <input type="radio" name="options" id="option_a1" class="answer-check-box"
                                                        data-value="1"> Yes
                                               </label>
                                               <label class="btn btn-secondary">
                                                   <input type="radio" name="options" id="option_a2" class="answer-check-box"
                                                        data-value="2"> NO
                                               </label>
                                           </div>
                                       </form>

JS code

function clearRads() {
        var radList = document.getElementsByName("options");

        for (var i = 0; i < radList.length; i++) {
            if (radList[i].checked) {
                document.getElementById(radList[i].id).checked = false;
            }
        }
    }

Ajax Success Function

success: function(response) {
                        // console.log(response.data);
                        timeReset();
                        let theInput = document.getElementById('questionId');
                        if (response.data && !(response.data.correct_answer == 0)) {
                            clearRads();
                            theInput.value = response.data.id;
                            $('#question').html(response.data.question);
                        } else {
                            $('#quesDiv1').html('<h4 class="text-center">Please Wait</h4>');
                        }

                    }

The problem is that when I call this clearRads() this will not reset the value. This function returns the undefined when i console.log this function. thanks in advance. Please guide me i will be thankful.

Answer 1

Your clearRads() function needs a bit of work.

So instead of what you have, I think this should do the trick:

function clearRads() {
  var radList = document.getElementsByName("options");
  for (var i = 0; i < radList.length; i++) {
     radList[i].checked = false;
    }
  }
}

No need for an if check if you're clearing all checks. Also no need for document.get... since you already have those elements in the array.

Let me know how that goes.