Member Avatar for Priti_P

Hello,
I have created sliding fieldsets using javascripts.
in it, I have created fieldsets using for loop.
Now I want , while I click on NEXT of one fieldset , then whatever input type fields are available on that fieldset ,
I should get them.
I want to store it in temp table.
but how can I?
How to get each input type values of each fieldset?
I have created fieldset by below loop:

foreach ($All_skill_type as $All_skill_type_)
                    {
                        $each_skill_type=$All_skill_type_ -> skill_type ;
                        // find skill_type_id and serach Skills for that skill_type
                        $skill_type_id=helpers::getSkillTypeId($each_skill_type);
                        $skills_of_skill_type=helpers::getskills($skill_type_id);
?>
                        <fieldset class="step">
                            <p>
                                <label for="username" style='width:170px!important;'><? echo $each_skill_type .":";?></label>
                                <br><br>
                                <?
                                    for ($i=0;$i<sizeof($skills_of_skill_type);$i++)
                                    {
                                        $skill_box=$skills_of_skill_type [$i]['skill'];
                                        $skill_id=helpers::getSkillId($skill_box,$skill_type_id);
                                        echo CHtml::CheckBox($skill_box,'', array (
                                        'id'=>'skill_used'.$skill_id,
                                        "onclick"=>"js:skill_check('".$skill_box."','".$each_skill_type."',".$skill_id.")",
                                        ));
                                        echo CHtml::label($skill_box, $skill_box);
                                    }
                                ?>
                            </p>
                        </fieldset>
<?
                    }
  • 3 Contributors
  • 2 Replies
  • 298 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Short answer: when the Next button is clicked, gather every input/select/textarea inside that fieldset, normalize values by type (checkbox groups -> arrays, radios -> single value, select[multiple] -> arrays, text/textarea -> strings), then save the resulting object in a temp store (sessionStorage, a JS array, or send to your server). That keeps each step self-contained and avoids relying on DOM order.

Example: a small plain-JS extractor you can call for the active fieldset

function getFieldsetValues(fieldset) {
  var out = { skillType: fieldset.dataset.skillType || null, fields: {} };
  var elems = fieldset.querySelectorAll('input,select,textarea');

  Array.prototype.forEach.call(elems, function(el) {
    var name = el.name || el.id || ('unnamed_' + (el.type || el.tagName));
    if (el.tagName === 'SELECT') {
      out.fields[name] = el.multiple
        ? Array.prototype.filter.call(el.options, function(o){ return o.selected; }).map(function(o){ return o.value; })
        : el.value;
    } else if (el.type === 'checkbox') {
      if (!out.fields[name]) out.fields[name] = [];
      if (el.checked) out.fields[name].push(el.value || el.id || true);
    } else if (el.type === 'radio') {
      if (el.checked) out.fields[name] = el.value;
      else if (typeof out.fields[name] === 'undefined') out.fields[name] = null;
    } else if (el.type === 'file') {
      out.fields[name] = el.files ? Array.prototype.map.call(el.files, function(f){ return f.name; }) : [];
    } else {
      out.fields[name] = el.value;
    }
  });

  return out;
}

Example Next-button workflow: call getFieldsetValues() for the current fieldset, push the returned object into a sessionStorage array (or POST it immediately). That gives you a per-step temp table you can inspect or submit later.

Notes and tips

  • and provide concise jQuery answers for checked inputs; if you need every input type use the approach above.
  • Give inputs meaningful name attributes (group checkboxes/radios by name). Consider adding data-skill-type on each fieldset instead of relying on DOM index.
  • Validate before moving to the next step and keep IDs/values consistent (use skill_id as the value, not the label).
  • If you need server-side temp storage, POST the JSON you build from getFieldsetValues() on Next instead of relying only on client storage.

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

if you are using jQuery:

var checkboxList = [];

// Loops each fieldset
$("fieldset.step").each(function() {

    var stepIndex = $(this).index();

    // Loops each checkbox that is checked inside of the fieldset
    $(this).find("input:checked").each(function() {

        // Adds the id to the list
        checkboxList.push({
            step: stepIndex,
            checkboxId: $(this).attr("id")
        });

    });

});
Member Avatar for Airshow

If AleMonteiro's answer works, then so should this simplification of it :

var checkboxList = $("fieldset.step input:checked").map(function() {
    return {
        'step': $(this).closest("fieldset").index(),
        'checkboxId': this.id
    };
}).get();
commented: Nice to know =) +8
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.