通过单选按钮更改字段集

Question

I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.

I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/

So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.

<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
    <select id="pricemin" name="min">
        <option value="50000">Min Price</option>
        <option value="50000">£50,000</option>
        <option value="100000">£100,000</option>
        <option value="200000">£200,000</option>
        <option value="300000">£300,000</option>
        <option value="400000">£400,000</option>
        <option value="500000">£500,000</option>
        <option value="600000">£600,000</option>
        <option value="700000">£700,000</option>
        <option value="800000">£800,000</option>
        <option value="900000">£900,000</option>
        <option value="1000000">£1,000,000</option>
        <option value="1250000">£1,250,000</option>
        <option value="1500000">£1,500,000</option>
        <option value="1750000">£1,750,000</option>
        <option value="2000000">£2,000,000</option>
        <option value="3000000">£3,000,000</option>
    </select>
    <select id="pricemax" name="max">
        <option value="5000000">Max Price</option>
        <option value="100000">£100,000</option>
        <option value="200000">£200,000</option>
        <option value="300000">£300,000</option>
        <option value="400000">£400,000</option>
        <option value="500000">£500,000</option>
        <option value="600000">£600,000</option>
        <option value="700000">£700,000</option>
        <option value="800000">£800,000</option>
        <option value="900000">£900,000</option>
        <option value="1000000">£1,000,000</option>
        <option value="1250000">£1,250,000</option>
        <option value="1500000">£1,500,000</option>
        <option value="1750000">£1,750,000</option>
        <option value="2000000">£2,000,000</option>
        <option value="3000000">£3,000,000</option>
        <option value="4000000">£4,000,000</option>
        <option value="5000000">£5,000,000</option>
    </select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
    <select id="lpricemin" name="min">
        <option value="500">Min Price</option>
        <option value="500">£500</option>
        <option value="600">£600</option>
        <option value="700">£700</option>
        <option value="800">£800</option>
        <option value="900">£900</option>
        <option value="1000">£1000</option>
        <option value="1150">£1150</option>
        <option value="1250">£1250</option>
        <option value="1500">£1500</option>
        <option value="2000">£2000</option>
        <option value="2500">£2500</option>
        <option value="3000">£3000</option>
        <option value="4000">£4000</option>
        <option value="5000">£5000</option>
    </select>
    <select id="lpricemax" name="max">
        <option value="5000">Max Price</option>
        <option value="600">£600</option>
        <option value="700">£700</option>
        <option value="800">£800</option>
        <option value="900">£900</option>
        <option value="1000">£1000</option>
        <option value="1150">£1150</option>
        <option value="1250">£1250</option>
        <option value="1500">£1500</option>
        <option value="2000">£2000</option>
        <option value="2500">£2500</option>
        <option value="3000">£3000</option>
        <option value="4000">£4000</option>
        <option value="5000">£5000</option>
    </select>
</center>
</fieldset>

and the jquery used:

$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");

});

My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?

Many thanks

Answer 1

When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.

Method 1:

Change the

<select id="lpricemin" name="min">

<select id="lpricemin" name="lmin">

to

<select id="lpricemax" name="max">

<select id="lpricemax" name="lmax"> respectively.

This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.

Method 2:

Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.

Answer 2

Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

Answer 3

Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:

function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
    <option value="50000">£50,000</option>\
    <option value="100000">£100,000</option>\
    <option value="200000">£200,000</option>\
    <option value="300000">£300,000</option>...";
}

An other clean solution would be to create your scales dynamically with a loop.