Simplify multiple script

Question

Please help me simplify this code I have a quiz item which you select an answer and the answer will append to .response class

Appology as my previous question is not clear. I am new in jQuery so your help is much appreaciated.

Here's the scenario, I have 28 sets of group item/fieldset under div id="scenarioCont". 7 fieldsets for each div class="scenario"

<div id="scenarioCont">
    <div class="scenario">
        <fieldset id="group1">
            <p>Question #1 </p> 
            <p><input type="radio" class="scenarioRadio" value="Strongly agree" name="group1" /><label>Strongly agree </label></p>
            <p><input type="radio" class="scenarioRadio" value="Somewhat agree" name="group1" /><label>Somewhat agree </label></p>
            <p><input type="radio" class="scenarioRadio" value="Neither agree or disagree" name="group1" /><label>Neither agree or disagree</label></p>
            <p><input type="radio" class="scenarioRadio" value="Somewhat disagree" name="group1" /><label>Somewhat disagree</label></p>
            <p><input type="radio" class="scenarioRadio" value="Strongly disagree" name="group1" /><label>Strongly disagree </label></p>
            <p><input type="radio" class="scenarioRadio" value="Don’t know / Can’t say" name="group1" /><label>Don’t know / Can’t say</label></p>
        </fieldset>

        <fieldset id="group2">
            <p>Question #1</p>
            <p><input type="radio" class="scenarioRadio" value="Yes, always" name="group2" /><label>Yes, always </label></p>
            <p><input type="radio" class="scenarioRadio" value="Yes, usually" name="group2" /><label>Yes, usually</label></p>
            <p><input type="radio" class="scenarioRadio" value="Yes, sometime" name="group2" /><label>Yes, sometimes </label></p>
            <p><input type="radio" class="scenarioRadio" value="No" name="group2" /><label>No</label></p>
            <p><input type="radio" class="scenarioRadio" value="Don’t know" name="group2" /><label>Don’t know</label></p>
        </fieldset>

        <fieldset id="group6">...</fieldset>
        <fieldset id="group7">...</fieldset>
    </div>

    <div class="scenario">
        <fieldset id="group8">...</fieldset>
         ...
        <fieldset id="group14">...</fieldset>
    </div>



    <button type="button" style="float:left;" class="buttonStyle" id="prevScenario" disabled="true">Back</button>
    <button type="button" style="float:right;" class="buttonStyle" id="nextScenario" disabled="true">Next</button>  **will change to submit after the last slide/panel item
</div>

Which selecting Next displays next set of questions.

<button type="button" style="float:right;" class="buttonStyle" id="nextScenario" disabled="true">Submit</button>

And selecting Submit starts poll calculation. And all the selected answer should display in span class="response"

<table id="resultsTable">
    <tr  id="group1">
        <td class="responseCell"><span class="response">(the answer in group 1 should display here)</span></td>
    </tr>

    <tr id="group2">
        <td class="responseCell"><span class="response">(the answer in group 2 should display here)</span></td>
    </tr>

    .....
</table>

Thank you in advance guys!

IDK what do you want to do. please describe properly. which you want to do. and also put you Code like ( HTML, CSS, JQuery etc. ) — Soft One Global, Aug 04 '17 at 10:16

score 0 · Accepted Answer · answered Aug 04 '17 at 10:11

Before anything, the id attribute must be unique for every HTML element, so you have to fix that.

That unique id will be helpful to get the response and append it in the right place.

You can loop on all the radio buttons, and if any of them is checked, you can append it's value to the <span> that it's name attribute is equal to the unique id of the <fieldset> that contains the question. Try this :

$("input[type='radio']").change(function() {

    var $this = $(this);
    if ($this.prop('checked')) {
        value = $this.val();
        question = $this.parent("fieldset").attr('id');
        $('span[name='+question+']').text(value);
    }

});

I've made a Fiddle for you!

Simplify multiple script

1 Answers1