sub_frequency identifier & required attribute trouble

Well, I'm at the upper limit of my ability...been working on this form through the weekend & feel soooooooooo close. :-)

I'm pretty sure I'm misusing the sub_frequency identifier in association w/misusing the "required" attribute trying to get my dropdowns to show properly.

When I do a chrome inspect on my "Add to Cart" button. I get: "An invalid form control with name='sub_frequency' is not focusable."

If anyone as a moment to look, I'd be very, very grateful.

Thanks,
Francine


<!-- form -->
<form action="https://clean-simple.foxycart.com/cart" method="post" accept-charset="utf-8">

<select onchange="yesnoCheck(this);" name="name" required >
<!-- Select a Laundry Package -->
<option value="" selected>Select a Laundry Package</option>
<option value="Essentials_Membership">Essentials (20lbs)</option>
<option value="Standard_Membership">Standard (30lbs)</option>
<option value="Plus_Membership">Plus (40lbs)</option>
<option value="Premium_Membership">Premium (50lbs)</option>
</select>

<input type="hidden" name="code" value="L"/>
<input type="hidden" name="price" value="" />
<input type="hidden" name="category" value=""/>

<input type="hidden" name="2:name" value="Registration" />
<input type="hidden" name="2:code" value="Regis" />
<input type="hidden" name="2:price" value="25" />
<input type="hidden" name="2:parent_code" value="L" />
<input type="hidden" name="2:quantity_min" value="1" />
<input type="hidden" name="2:quantity_max" value="999" />

<br />

<div id="ifYesEssentials" style="display: none;">
<!-- Display Essentials Pricing Dropdown -->
<select name="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected>Select Payment Plan</option>
<option value="">One-Time ($29, $25 registration)</option>
<option value="1m{p:98|c+_Es_Mo}">Monthly ($98/mo, $25 registration)</option>
<option value="6m{p:588|c+_Es_5%Off}">6 Mos ($588/6mo, save 5% + $0 regis!)</option>
<option value="1y{p:1176|c+_Es_10%off}">Yearly ($1,176/yr, save 10% + $0 regis!)</option>
</select>
</div>

<div id="ifYesStandard" style="display: none;">
<!-- Display Standard Pricing Dropdown -->
<select name="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected>Select Payment Plan</option>
<option value="">One-Time ($39, $25 registration)</option>
<option value="1m{p:139|c+_St_Mo}">Monthly ($139/mo, $25 registration)</option>
<option value="6m{p:834|c+_St_5%Off}">6 Mos ($834/6mo, save 5% + $0 regis!)</option>
<option value="1y{p:1668|c+_St_10%off}">Yearly ($1,668/yr, save 10% + $0 regis!)</option>
</select>
</div>

<div id="ifYesPlus" style="display: none;">
<!-- Display Plus Pricing Dropdown -->
<select name="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected>Select Payment Plan</option>
<option value="">One-Time ($49, $25 registration)</option>
<option value="1m{p:178|c+_Pl_Mo}">Monthly ($178/mo, $25 registration)</option>
<option value="6m{p:1068|c+_Pl_5%Off}">6 Mos ($1,068/6mo, save 5% + $0 regis!)</option>
<option value="1y{p:2136|c+_Pl_10%off}">Yearly ($2,136/yr, save 10% + $0 regis!)</option>
</select>
</div>

<div id="ifYesPremium" style="display: none;">
<!-- Display Premium Pricing Dropdown -->
<select name="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected>Select Payment Plan</option>
<option value="">One-Time ($59, $25 registration)</option>
<option value="1m{p:212|c+_Pm_Mo}">Monthly ($212/mo, $25 registration)</option>
<option value="6m{p:1272|c+_Pm_5%Off}">6 Mos ($1,272/6mo, save 5% + $0 regis!)</option>
<option value="1y{p:2544|c+_Pm_10%off}">Yearly ($2,544/yr, save 10% + $0 regis!)</option>
</select>
</div>

<div id="ifYesDayBags" style="display: none;">
<!-- Define Pick-up Day option -->
<select name="Pickup_Day" required="" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected="">Select a Laundry Pickup Day?</option>
<option value="Tues 8am{c+_tu}">Tues 8am</option>
<option value="Thurs 8am{c+_th}">Thurs 8am</option>
</select>

<!-- Define the Delicates Bag option -->
<select name="Delicates_Bag" required="" id="yui_3_17_2_1_1507857198588_459">
<option value="" selected="">Add a Delicates bag?</option>
<option value="Yes (+$5){p+5|c+_del}">Yes (+ $5)</option>
<option value="No">No</option>
</select>
</div>
<br />

<script>
function yesnoCheck(that)
{ <!-- Display next dropdowns -->
if (that.value == "Essentials_Membership") {
document.getElementsByName("sub_frequency")[0].required = true;

document.getElementsByName("price")[0].setAttribute("value",29);
document.getElementById("ifYesEssentials").style.display = "block";
document.getElementById("ifYesStandard").style.display = "none";
document.getElementById("ifYesPlus").style.display = "none";
document.getElementById("ifYesPremium").style.display = "none";

}
else if (that.value == "Standard_Membership") {
document.getElementsByName("sub_frequency")[0].required = true;

document.getElementsByName("price")[0].setAttribute("value",39);
document.getElementById("ifYesEssentials").style.display = "none";
document.getElementById("ifYesStandard").style.display = "block";
document.getElementById("ifYesPlus").style.display = "none";
document.getElementById("ifYesPremium").style.display = "none";
}

else if (that.value == "Plus_Membership") {
document.getElementsByName("sub_frequency")[0].required = true;

document.getElementsByName("price")[0].setAttribute("value",49);
document.getElementById("ifYesEssentials").style.display = "none";
document.getElementById("ifYesStandard").style.display = "none";
document.getElementById("ifYesPlus").style.display = "block";
document.getElementById("ifYesPremium").style.display = "none";
}
else {
document.getElementsByName("sub_frequency")[0].required = true;
document.getElementsByName("price")[0].setAttribute("value",59);
document.getElementById("ifYesEssentials").style.display = "none";
document.getElementById("ifYesStandard").style.display = "none";
document.getElementById("ifYesPlus").style.display = "none";
document.getElementById("ifYesPremium").style.display = "block";
}
document.getElementById("ifYesDayBags").style.display = "block";
}
</script>

<div>
<button type="submit">Add to Cart</button>
</div>
</form>
Comments
  • fc_adamfc_adam FoxyCart Team
    edited October 2017
    @newbie,

    Happy to help! The issue you're bumping into here is that you've technically got 4 select dropdowns with a name of "sub_frequency". You're then hiding and showing them dynamically based on what the customer selects for their laundry package, and dynamically setting the first sub_frequency dropdown to be required.

    If the first dropdown is the one that's visible on the page - then that works fine, as the one that's visible is the one that's also required. If you switch to a laundry package that uses the second, third or fourth sub_frequency dropdown though - then you're in a situation where the first select dropdown is set to required, but also hidden.

    That's why Chrome is showing the error that the field isn't focusable. It knows that that field is required - but as it's hidden it can't give focus to that field to show it needs to be completed.

    Beyond that though - a form can only have a single element with a given name. If there are multiple inputs in the form with the same name, only the last instance of that field name will be used. So for your example, no matter which select is being shown to the customer - only the last select with a name of "sub_frequency" will be used to set the value.

    One approach you could take is to dynamically add/remove the "sub_frequency" name from the select element to ensure only one of those is submitted - and also set the required attribute on the correct element too.

    The following should achieve that for you:
    <!-- form -->
    <form action="https://clean-simple.foxycart.com/cart" method="post" accept-charset="utf-8">

    <select onchange="yesnoCheck(this);" name="name" required >
    <!-- Select a Laundry Package -->
    <option value="" selected>Select a Laundry Package</option>
    <option value="Essentials_Membership">Essentials (20lbs)</option>
    <option value="Standard_Membership">Standard (30lbs)</option>
    <option value="Plus_Membership">Plus (40lbs)</option>
    <option value="Premium_Membership">Premium (50lbs)</option>
    </select>

    <input type="hidden" name="code" value="L"/>
    <input type="hidden" name="price" value="" />
    <input type="hidden" name="category" value=""/>

    <input type="hidden" name="2:name" value="Registration" />
    <input type="hidden" name="2:code" value="Regis" />
    <input type="hidden" name="2:price" value="25" />
    <input type="hidden" name="2:parent_code" value="L" />
    <input type="hidden" name="2:quantity_min" value="1" />
    <input type="hidden" name="2:quantity_max" value="999" />

    <br />

    <div id="ifYesEssentials" style="display: none;">
    <!-- Display Essentials Pricing Dropdown -->
    <select name="" class="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected>Select Payment Plan</option>
    <option value="">One-Time ($29, $25 registration)</option>
    <option value="1m{p:98|c+_Es_Mo}">Monthly ($98/mo, $25 registration)</option>
    <option value="6m{p:588|c+_Es_5%Off}">6 Mos ($588/6mo, save 5% + $0 regis!)</option>
    <option value="1y{p:1176|c+_Es_10%off}">Yearly ($1,176/yr, save 10% + $0 regis!)</option>
    </select>
    </div>

    <div id="ifYesStandard" style="display: none;">
    <!-- Display Standard Pricing Dropdown -->
    <select name="" class="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected>Select Payment Plan</option>
    <option value="">One-Time ($39, $25 registration)</option>
    <option value="1m{p:139|c+_St_Mo}">Monthly ($139/mo, $25 registration)</option>
    <option value="6m{p:834|c+_St_5%Off}">6 Mos ($834/6mo, save 5% + $0 regis!)</option>
    <option value="1y{p:1668|c+_St_10%off}">Yearly ($1,668/yr, save 10% + $0 regis!)</option>
    </select>
    </div>

    <div id="ifYesPlus" style="display: none;">
    <!-- Display Plus Pricing Dropdown -->
    <select name="" class="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected>Select Payment Plan</option>
    <option value="">One-Time ($49, $25 registration)</option>
    <option value="1m{p:178|c+_Pl_Mo}">Monthly ($178/mo, $25 registration)</option>
    <option value="6m{p:1068|c+_Pl_5%Off}">6 Mos ($1,068/6mo, save 5% + $0 regis!)</option>
    <option value="1y{p:2136|c+_Pl_10%off}">Yearly ($2,136/yr, save 10% + $0 regis!)</option>
    </select>
    </div>

    <div id="ifYesPremium" style="display: none;">
    <!-- Display Premium Pricing Dropdown -->
    <select name="" class="sub_frequency" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected>Select Payment Plan</option>
    <option value="">One-Time ($59, $25 registration)</option>
    <option value="1m{p:212|c+_Pm_Mo}">Monthly ($212/mo, $25 registration)</option>
    <option value="6m{p:1272|c+_Pm_5%Off}">6 Mos ($1,272/6mo, save 5% + $0 regis!)</option>
    <option value="1y{p:2544|c+_Pm_10%off}">Yearly ($2,544/yr, save 10% + $0 regis!)</option>
    </select>
    </div>

    <div id="ifYesDayBags" style="display: none;">
    <!-- Define Pick-up Day option -->
    <select name="Pickup_Day" required="" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected="">Select a Laundry Pickup Day?</option>
    <option value="Tues 8am{c+_tu}">Tues 8am</option>
    <option value="Thurs 8am{c+_th}">Thurs 8am</option>
    </select>

    <!-- Define the Delicates Bag option -->
    <select name="Delicates_Bag" required="" id="yui_3_17_2_1_1507857198588_459">
    <option value="" selected="">Add a Delicates bag?</option>
    <option value="Yes (+$5){p+5|c+_del}">Yes (+ $5)</option>
    <option value="No">No</option>
    </select>
    </div>
    <br />

    <script>
    function yesnoCheck(that) {
    // Display next dropdowns
    if (that.value == "Essentials_Membership") {
    document.getElementsByName("price")[0].setAttribute("value",29);
    switchMembership("ifYesEssentials");
    }
    else if (that.value == "Standard_Membership") {
    document.getElementsByName("price")[0].setAttribute("value",39);
    switchMembership("ifYesStandard");
    }
    else if (that.value == "Plus_Membership") {
    document.getElementsByName("price")[0].setAttribute("value",49);
    switchMembership("ifYesPlus");
    }
    else {
    document.getElementsByName("price")[0].setAttribute("value",59);
    switchMembership("ifYesPremium");
    }
    document.getElementById("ifYesDayBags").style.display = "block";
    }

    function switchMembership(type) {
    console.log(type);
    var selects = document.querySelectorAll(".sub_frequency");
    for (var i = 0; i < selects.length; i++) {
    selects[i].removeAttribute("required");
    selects[i].setAttribute("name", "");
    selects[i].parentNode.style.display = "none";
    }
    var parent = document.getElementById(type);
    parent.style.display = "block";
    var select = parent.querySelectorAll("select")[0];
    select.setAttribute("name", "sub_frequency");
    select.required = true;
    }
    </script>

    <div>
    <button type="submit">Add to Cart</button>
    </div>
    </form>
  • @fc_adam so gratefulllll!!!

    Wow! Awesome explanation & so helpful to have the associated code.

    We're trying hard to use FoxyCart!! Thank you!
Sign In or Register to comment.