Reset/uncheck/unselect Users choice on Questionair/Survey

Question

I recently working on a survey and I am fairly new and simply use jQuery to show and hide based on my survey logic. Now I am facing an issue that I need a way to reset the block(content) back to its original status (unchecked, unselected..etc). What i am currently doing is manually go into the child element and uncheck/unselect/empty all the user answers. But I dont really like my approach since I have to HARD CODE all div-id in advance. I am looking(or write a function) for a jQuery function to implement dynamically reset instead of the hard code way.

Can any one provide me a direction to go? You can try my code (and JS) here on Fiddle.

jQuery:

$("#q2Back_btn").click(function(){ 
        //put Q2 logic here..

            $('#select_2a').prop('selectedIndex',0); 
            $('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
            $("#secdiv").hide(500);
            $("#firstdiv").show(500);
});

HTML:

<div id="firstdiv"> 
    <div name = "div_1a">
              1a. Q1a ( choose 1 and go to Q2)
                <select id="select_1a" name="select_1a" >
                    <option checked ></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
            <br>
<div name= "div_1b">
                <p>1b. Q1b?</p>
                    <input type="radio" name="1bradiogroup" value="1"> 1 <br>
                    <input type="radio" name="1bradiogroup" value="2"> 2 <br>
                    <input type="radio" name="1bradiogroup" value="3"> 3 <br>

            </div>
                    <input type='button' id = "q1Next_btn" value='Save and Continue' />
        </div>  

        <div id="secdiv" style="display:none">      
                <h1>2. Q2a</h1>             
                <br>
            <div id="div_2a" name = "div_2a">
            2a. just hit back btn to go back to Q1
                <select id="select_2a" name="select_2a">
                    <option ></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>    
                </select>
            </div>
            <div id="div_2b" name= "div_2b">
                <p>2b. Q2b?</p>
                    <input type="radio" name="2bradiogroup" value="1"> No <br>
                    <input type="radio" name="2bradiogroup" value="2"> Yes <br>

            </div>
                    <input type='button' id="q2Back_btn" value='Back'  />
                    <input type='button' id="q2Next_btn" value='Save and Continue'/>
        </div>

Do you mean something [like this?](http://jsfiddle.net/pn5xem48/3/) — Anthony Valera, May 07 '15 at 18:18
Your last bracket was outside of your first code block. I also changed Javascript to jQuery. — Anthony Valera, May 07 '15 at 19:00
I actually want to write a function to handle the reset instead of putting each specific element id. But thanks for the help. ( for some reason, i was working for me when i post it. will update the link) — bj4947, May 07 '15 at 19:14

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

You can use jQuery's function trigger! in your form: $('#form').trigger('reset');

Also check this: Resetting a multi-stage form with jQuery!

edited May 23 '17 at 11:43

Community

1
1

answered May 07 '15 at 18:21

Andrew Ortega

41
1
4

Reset/uncheck/unselect Users choice on Questionair/Survey

1 Answers1