Geek Answers Handbook

How to skip a step forward and set a value if only one checkbox is selected

I am currently creating a donation form that uses stages. To go from step to step, I use jQuery (specifically, the following function):

function showNextStep(currentStep) { $("#step" + currentStep).slideToggle("slow", function () { if (currentStep === 1) { //figure out what kind of donation they are making var chosenDonationType = $("[name=donationType]").val(); //show the apppropriate slide switch (chosenDonationType) { case "oneTimeGift": currentStep += 1; $("#makingAOneTimeGift").show(); $("#step" + currentStep).slideToggle("slow"); break; case "recurringDonation": currentStep += 1; $("#makingARecurringGift").show(); $("#step" + currentStep).slideToggle("slow"); break; //if somehow they changed it to something else, ignore them and return false. default: return false; //break; not needed due to return }//end switch } else { currentStep += 1; $("#step" + currentStep).slideToggle("slow"); } }); }

I have a list of funds that the user can donate. The step after that (id = "step4") is for distribution. I want to skip this step and set the corresponding input value to 100 if the user selects only one checkbox. To catch, I don’t know how to start an array of flags (I suppose to use [name = list-item]) and I find that only one is selected, determine which one, and then skip the next step and set the corresponding distribution field to 100 What will be an effective way to do this?

Flags use the following style:

 <label class="checkbox"> <input type="checkbox" id="showGoodMenGoodCitizensAllocation" name="list-items[]" value="Good_Men_Good_Citizens" /> Good Men, Good Citizens Scholarship </label> <label class="checkbox"> <input type="checkbox" id="showClassof2012Allocation" name="list-items[]" value="Class_Of_2012" /> Class of 2012 Scholarship <abbr title="In Honor Of">IHO</abbr> Mr. Jason M. Ferguson &rsquo;96 </label> <label class="checkbox"> <input type="checkbox" id="showClassof2011Allocation" name="list-items[]" value="Class_Of_2011" /> Class of 2011 Scholarship <abbr title="In Honor Of">IHO</abbr> Ms. Anita Garland </label>

The distribution inputs are as follows:

 <div id="GoodMenGoodCitizensAllocation" class="input-append hiddenByDefault"> <input type="number" name="Good_Men_Good_Citizens-Allocation" min="0" max="100" value="0" /> <span class="add-on">&#37; to the Good Men, Good Citizens Scholarship</span> </div> <div id="ClassOf2012Allocation" class="input-append hiddenByDefault"> <input type="number" name="Class_Of_2012-Allocation" min="0" max="100" value="0" /> <span class="add-on">&#37; to the Class of 2012 Scholarship <abbr title="In Honor Of">IHO</abbr> Mr. Jason M. Ferguson &rsquo;96</span> </div> <div id="ClassOf2011Allocation" class="input-append hiddenByDefault"> <input type="number" name="Class_Of_2011-Allocation" min="0" max="100" value="0" /> <span class="add-on">&#37; to the Class of 2011 Scholarship <abbr title="In Honor Of">IHO</abbr> Ms. Anita Garland</span> </div>

For the full page code: http://pastebin.com/yFv2day1

For all currently used JavaScript code: http://pastebin.com/P0YVRuqY

Resources I use:

  • Php
  • jQuery 1.8.3
  • Twitter bootstrap

Thank you all for your time and help.

+4
source share
3 answers

Try this snippet:

 var $chck = $("#step3 :checkbox:checked"); if ($chck.length === 1) { var selectedVal = $chck.val();//do whatever you want with that currentStep += 2; } else currentStep++; $("#step" + currentStep).slideToggle("slow");
+1
source

To iterate over an array of flags and find out what is marked:

 $("#YOUR-FORM input[type=checkbox]").each(function (i, e) { if ($(e).attr("checked") == "checked") { // This checkbox is checked... do some stuff } else { // Not checked...ignore } });

To skip this step I need to take a longer look, but you need to start ...

+1
source

Here is an example I made to run when I clicked a button:

 $(function () { $('#evaluate').click(function () { var checked = $('input[name="list-items[]"]:checked'); if (checked.length == 1) { alert('one checked: ' + checked.val()); } else { var vals = []; checked.each(function () { vals.push($(this).val()); }); alert(checked.length + " boxes checked: " + vals); } }) });

Jsfiddle example

+1
source

More articles:


All Articles