Display message when one value is selected

Display message when one value is selected - javascript

Not a complicated one but i have very limited coding knowledge.
Im looking for a message to be display when a value from a select menu (Less than $10,000) is selected and also prevents the form from submitting.
<select name="levelofdebt" class="form-control" id="levelofdebt" required>
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>
thanks in advance

function selectchange(){
if($("#levelofdebt").val() == '$10,000 or less')
{
alert('Amount Less than $10,000');
return false; // prevents page reload
}
else{
// Do something
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="levelofdebt" class="form-control" id="levelofdebt" required onchange="return selectchange();">
<option value="" disabled selected="selected">Select total debt</option>
<option value="$10,000 or less">Less than $10,000</option>
<option value="$10-15k">$10,000 - $15,000</option>
<option value="$15-20k">$15,000 - $20,000</option>
<option value="$20-30k">$20,000 - $30,000</option>
<option value="$30-40k">$30,000 - $40,000</option>
<option value="$40-50k">$40,000 - $50,000</option>
<option value="$50-60k">$50,000 - $60,000</option>
<option value="$60-100k">$60,000 - $100,000</option>
<option value="$100k +">$100,000 +</option>
</select>

Related

how to validate userinput with javascript

I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>

Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).

PHP+jQuery is preventing my select element from updating

I am using PHP to show years between 1940 and the current year and using a foreach loop to render each option inside a select element. Everything works as planned until I add an id to the select element that a block of jquery looks at for changes.
Essentially I am trying to console.log (for now) the value of whatever option gets selected but something about my jQuery/PHP is stopping the select from displaying the selected option. The console.log works as expected but the selected option doesn't update in the element. It always goes back to displaying the default option aka 2018 since it's the current year.
If I change the PHP foreach select/option to a static dropdown of plain HTML it works fine. Likewise, if I disconnect the jQuery but keep the PHP dynamically generated option list it works fine. Something about the combo of my PHP+jQuery is preventing the select from updating and I cannot figure what.
Here is my HTML/PHP code:
<select name="birthyear" id="birthyear">
<?php
// $years is setting the range from current year to 1940
$years = range(date('Y'), 1940);
foreach ($years as $year) {
echo "<option id='$year' value='$year'>".$year."</option>";
}
?>
</select>
Here is my jQuery:
$('#birthyear').on('change', function() {
var date = new Date();
var year = date.getFullYear();
var yearsOld = year - $(this).val();
console.log(yearsOld + " years old.");
if (yearsOld >= 18) {
console.log("age >= 18")
} else {
console.log("You aren't old enough!");
}
});
Am I missing something here?

Your code works fine... All I did was execute the PHP to get the HTML and then plugged it into JSFiddle.
I'd assume your problem is that you didn't properly include jQuery.
<select name="birthyear" id="birthyear">
<option id='2018' value='2018'>2018</option>
<option id='2017' value='2017'>2017</option>
<option id='2016' value='2016'>2016</option>
<option id='2015' value='2015'>2015</option>
<option id='2014' value='2014'>2014</option>
<option id='2013' value='2013'>2013</option>
<option id='2012' value='2012'>2012</option>
<option id='2011' value='2011'>2011</option>
<option id='2010' value='2010'>2010</option>
<option id='2009' value='2009'>2009</option>
<option id='2008' value='2008'>2008</option>
<option id='2007' value='2007'>2007</option>
<option id='2006' value='2006'>2006</option>
<option id='2005' value='2005'>2005</option>
<option id='2004' value='2004'>2004</option>
<option id='2003' value='2003'>2003</option>
<option id='2002' value='2002'>2002</option>
<option id='2001' value='2001'>2001</option>
<option id='2000' value='2000'>2000</option>
<option id='1999' value='1999'>1999</option>
<option id='1998' value='1998'>1998</option>
<option id='1997' value='1997'>1997</option>
<option id='1996' value='1996'>1996</option>
<option id='1995' value='1995'>1995</option>
<option id='1994' value='1994'>1994</option>
<option id='1993' value='1993'>1993</option>
<option id='1992' value='1992'>1992</option>
<option id='1991' value='1991'>1991</option>
<option id='1990' value='1990'>1990</option>
<option id='1989' value='1989'>1989</option>
<option id='1988' value='1988'>1988</option>
<option id='1987' value='1987'>1987</option>
<option id='1986' value='1986'>1986</option>
<option id='1985' value='1985'>1985</option>
<option id='1984' value='1984'>1984</option>
<option id='1983' value='1983'>1983</option>
<option id='1982' value='1982'>1982</option>
<option id='1981' value='1981'>1981</option>
<option id='1980' value='1980'>1980</option>
<option id='1979' value='1979'>1979</option>
<option id='1978' value='1978'>1978</option>
<option id='1977' value='1977'>1977</option>
<option id='1976' value='1976'>1976</option>
<option id='1975' value='1975'>1975</option>
<option id='1974' value='1974'>1974</option>
<option id='1973' value='1973'>1973</option>
<option id='1972' value='1972'>1972</option>
<option id='1971' value='1971'>1971</option>
<option id='1970' value='1970'>1970</option>
<option id='1969' value='1969'>1969</option>
<option id='1968' value='1968'>1968</option>
<option id='1967' value='1967'>1967</option>
<option id='1966' value='1966'>1966</option>
<option id='1965' value='1965'>1965</option>
<option id='1964' value='1964'>1964</option>
<option id='1963' value='1963'>1963</option>
<option id='1962' value='1962'>1962</option>
<option id='1961' value='1961'>1961</option>
<option id='1960' value='1960'>1960</option>
<option id='1959' value='1959'>1959</option>
<option id='1958' value='1958'>1958</option>
<option id='1957' value='1957'>1957</option>
<option id='1956' value='1956'>1956</option>
<option id='1955' value='1955'>1955</option>
<option id='1954' value='1954'>1954</option>
<option id='1953' value='1953'>1953</option>
<option id='1952' value='1952'>1952</option>
<option id='1951' value='1951'>1951</option>
<option id='1950' value='1950'>1950</option>
<option id='1949' value='1949'>1949</option>
<option id='1948' value='1948'>1948</option>
<option id='1947' value='1947'>1947</option>
<option id='1946' value='1946'>1946</option>
<option id='1945' value='1945'>1945</option>
<option id='1944' value='1944'>1944</option>
<option id='1943' value='1943'>1943</option>
<option id='1942' value='1942'>1942</option>
<option id='1941' value='1941'>1941</option>
<option id='1940' value='1940'>1940</option>
</select>
https://jsfiddle.net/gpfh150g/

Conditional dropdown depopulation

Right now I have two dropdowns of numbers. The functionality I want is: when I choose an option out of the first list, compare that selected option's value with the second list's option values and hide any options in the second list that are greater than the first list's selected option value.
<select name="input_6" id="input_2_6" class="medium gfield_select" tabindex="13">
<option value="117500">115,001 - 120,000</option>
<option value="122500">120,001 - 125,000</option>
<option value="127500">125,001 - 130,000</option>
<option value="132500">130,001 - 135,000</option>
<option value="137500">135,001 - 140,000</option>
<option value="142500">140,001 - 145,000</option>
<option value="147500">145,001 - 150,000</option>
<option value="152500">150,001 - 155,000</option>
<option value="157500">155,001 - 160,000</option>
<option value="162500">160,001 - 165,000</option>
<option value="167500">165,001 - 170,000</option>
<option value="172500">170,001 - 175,000</option>
<option value="177500">175,001 - 180,000</option>
<option value="182500">180,001 - 185,000</option>
<option value="187500">185,001 - 190,000</option>
<option value="192500">190,001 - 195,000</option>
<option value="197500">195,001 - 200,000</option>
<option value="205000">200,001 - 210,000</option>
<option value="215000">210,001 - 220,000</option>
<option value="225000">220,001 - 230,000</option>
<option value="235000">230,001 - 240,000</option>
<option value="245000">240,001 - 250,000</option>
<option value="255000" selected="selected">250,001 - 260,000</option>
<option value="265000">260,001 - 270,000</option>
<option value="275000">270,001 - 280,000</option>
<option value="285000">280,001 - 290,000</option>
<option value="295000">290,001 - 300,000</option>
<option value="305000">300,001 - 310,000</option>
<option value="315000">310,001 - 320,000</option>
<option value="325000">320,001 - 330,000</option>
<option value="335000">330,001 - 340,000</option>
<option value="345000">340,001 - 350,000</option>
<option value="355000">350,001 - 360,000</option>
</select>
<select name="input_7" id="input_2_7" class="medium gfield_select" tabindex="16">
<option value="102500" selected="selected">100,000 - 105,000</option>
<option value="107500">105,000 - 110,000</option>
<option value="112500">110,000 - 115,000</option>
<option value="117500">115,000 - 120,000</option>
<option value="122500">120,000 - 125,000</option>
<option value="127500">125,000 - 130,000</option>
<option value="132500">130,000 - 135,000</option>
<option value="137500">135,000 - 140,000</option>
<option value="142500">140,000 - 145,000</option>
<option value="147500">145,000 - 150,000</option>
<option value="152500">150,000 - 155,000</option>
<option value="157500">155,000 - 160,000</option>
<option value="162500">160,000 - 165,000</option>
<option value="167500">165,000 - 170,000</option>
<option value="172500">170,000 - 175,000</option>
<option value="177500">175,000 - 180,000</option>
<option value="182500">180,000 - 185,000</option>
<option value="187500">185,000 - 190,000</option>
<option value="192500">190,000 - 195,000</option>
<option value="197500">195,000 - 200,000</option>
<option value="202500">200,000 - 205,000</option>
<option value="207500">205,000 - 210,000</option>
<option value="212500">210,000 - 215,000</option>
<option value="217500">215,000 - 220,000</option>
<option value="222500">220,000 - 225,000</option>
<option value="227500">225,000 - 230,000</option>
<option value="232500">230,000 - 235,000</option>
<option value="237500">235,000 - 240,000</option>
<option value="242500">240,000 - 245,000</option>
<option value="247500">245,000 - 250,000</option>
<option value="252500">250,000 - 255,000</option>
<option value="257500">255,000 - 260,000</option>
<option value="262500">260,000 - 265,000</option>
<option value="267500">265,000 - 270,000</option>
<option value="272500">270,000 - 275,000</option>
<option value="277500">275,000 - 280,000</option>
<option value="282500">280,000 - 285,000</option>
<option value="287500">285,000 - 290,000</option>
<option value="292500">290,000 - 295,000</option>
<option value="297500">295,000 - 300,000</option>
<option value="302500">300,000 - 305,000</option>
<option value="307500">305,000 - 310,000</option>
<option value="312500">310,000 - 315,000</option>
<option value="317500">315,000 - 320,000</option>
<option value="322500">320,000 - 325,000</option>
<option value="327500">325,000 - 330,000</option>
<option value="332500">330,000 - 335,000</option>
<option value="337500">335,000 - 340,000</option>
<option value="342500">340,000 - 345,000</option>
<option value="347500">345,000 - 350,000</option>
<option value="352500">350,000 - 355,000</option>
</select>
Above are the two lists I'm working with (generated by gravity forms).
And here are two variations of jQuery I've tried so far:
<script type="text/javascript">
$('#input_2_6').change(function(){
var initial = $('#input_2_6 option:selected').val();
secondDropPop(initial);
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
</script>
And
<script type="text/javascript">
$('#input_2_6').change(function(){
$('#input_2_6 option').each(function(){
if($(this).is(':selected')){
var initial = $(this).val();
secondDropPop(initial);
}
});
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
</script>
What am I doing wrong?
jQuery ver: 1.11.3

Per jQuery documention
In the case of an array, the callback is passed an array index and a corresponding array value each time.
Looking at$(this).val() > i, i is not defined. This should be the first argument of your callback:
$('#input_2_7 option').each(function(i){
i = parseInt(i, 10);
if (parseInt($(this).val(), 10) > i){
$(this).css('display','none');
}
});
Edit
The problem here is that you are trying to apply styles to option tags which is a very unstable approach as each browser applies styles differently to option tags (some browsers do not allow any styles to apply). So your best bet is to create the second dropdown on the fly. Below is an example of this approach.
$('#input_2_6').change(function(){
var initial = $('#input_2_6 option:selected').val();
secondDropPop(initial);
function secondDropPop(i){
$('#input_2_7 option').each(function(){
if ($(this).val() > i){
$(this).css('display','none');
}
});
}
});
$('#input_2_6').change(function(){
$('#input_2_6 option').each(function(){
if($(this).is(':selected')){
var initial = $(this).val();
secondDropPop(initial);
}
});
function secondDropPop(i){
var $dropdown = $('#input_2_7').hide();//hide the dropdown as this will prevent the browser from rendering every time an option is appended
$dropdown.empty();
$('#full_dropdown option').each(function(){
if ($(this).val() <= i){
$dropdown.append($(this).clone());
}
});
$dropdown.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="input_6" id="input_2_6" class="medium gfield_select" tabindex="13">
<option value="117500">115,001 - 120,000</option>
<option value="122500">120,001 - 125,000</option>
<option value="127500">125,001 - 130,000</option>
<option value="132500">130,001 - 135,000</option>
<option value="137500">135,001 - 140,000</option>
<option value="142500">140,001 - 145,000</option>
<option value="147500">145,001 - 150,000</option>
<option value="152500">150,001 - 155,000</option>
<option value="157500">155,001 - 160,000</option>
<option value="162500">160,001 - 165,000</option>
<option value="167500">165,001 - 170,000</option>
<option value="172500">170,001 - 175,000</option>
<option value="177500">175,001 - 180,000</option>
<option value="182500">180,001 - 185,000</option>
<option value="187500">185,001 - 190,000</option>
<option value="192500">190,001 - 195,000</option>
<option value="197500">195,001 - 200,000</option>
<option value="205000">200,001 - 210,000</option>
<option value="215000">210,001 - 220,000</option>
<option value="225000">220,001 - 230,000</option>
<option value="235000">230,001 - 240,000</option>
<option value="245000">240,001 - 250,000</option>
<option value="255000" selected="selected">250,001 - 260,000</option>
<option value="265000">260,001 - 270,000</option>
<option value="275000">270,001 - 280,000</option>
<option value="285000">280,001 - 290,000</option>
<option value="295000">290,001 - 300,000</option>
<option value="305000">300,001 - 310,000</option>
<option value="315000">310,001 - 320,000</option>
<option value="325000">320,001 - 330,000</option>
<option value="335000">330,001 - 340,000</option>
<option value="345000">340,001 - 350,000</option>
<option value="355000">350,001 - 360,000</option>
</select>
<select name="input_7" id="input_2_7" class="medium gfield_select" tabindex="16" style="display:none">
</select>
<!--Create a new dropdown that is not used for anything except pulling data from. Turning this into an array could speed things up-->
<select id="full_dropdown" style="display:none;" tabindex="16">
<option value="102500" selected="selected">100,000 - 105,000</option>
<option value="107500">105,000 - 110,000</option>
<option value="112500">110,000 - 115,000</option>
<option value="117500">115,000 - 120,000</option>
<option value="122500">120,000 - 125,000</option>
<option value="127500">125,000 - 130,000</option>
<option value="132500">130,000 - 135,000</option>
<option value="137500">135,000 - 140,000</option>
<option value="142500">140,000 - 145,000</option>
<option value="147500">145,000 - 150,000</option>
<option value="152500">150,000 - 155,000</option>
<option value="157500">155,000 - 160,000</option>
<option value="162500">160,000 - 165,000</option>
<option value="167500">165,000 - 170,000</option>
<option value="172500">170,000 - 175,000</option>
<option value="177500">175,000 - 180,000</option>
<option value="182500">180,000 - 185,000</option>
<option value="187500">185,000 - 190,000</option>
<option value="192500">190,000 - 195,000</option>
<option value="197500">195,000 - 200,000</option>
<option value="202500">200,000 - 205,000</option>
<option value="207500">205,000 - 210,000</option>
<option value="212500">210,000 - 215,000</option>
<option value="217500">215,000 - 220,000</option>
<option value="222500">220,000 - 225,000</option>
<option value="227500">225,000 - 230,000</option>
<option value="232500">230,000 - 235,000</option>
<option value="237500">235,000 - 240,000</option>
<option value="242500">240,000 - 245,000</option>
<option value="247500">245,000 - 250,000</option>
<option value="252500">250,000 - 255,000</option>
<option value="257500">255,000 - 260,000</option>
<option value="262500">260,000 - 265,000</option>
<option value="267500">265,000 - 270,000</option>
<option value="272500">270,000 - 275,000</option>
<option value="277500">275,000 - 280,000</option>
<option value="282500">280,000 - 285,000</option>
<option value="287500">285,000 - 290,000</option>
<option value="292500">290,000 - 295,000</option>
<option value="297500">295,000 - 300,000</option>
<option value="302500">300,000 - 305,000</option>
<option value="307500">305,000 - 310,000</option>
<option value="312500">310,000 - 315,000</option>
<option value="317500">315,000 - 320,000</option>
<option value="322500">320,000 - 325,000</option>
<option value="327500">325,000 - 330,000</option>
<option value="332500">330,000 - 335,000</option>
<option value="337500">335,000 - 340,000</option>
<option value="342500">340,000 - 345,000</option>
<option value="347500">345,000 - 350,000</option>
<option value="352500">350,000 - 355,000</option>
</select>

Show a second select box based on the option chosen in the first?

I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?

bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select

<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task

Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>

you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box

Change fieldset via radio button

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

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.

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

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.

Develop Reference

JavaScript is the programming language of the Web.

Display message when one value is selected - javascript

Related

how to validate userinput with javascript

PHP+jQuery is preventing my select element from updating

Conditional dropdown depopulation

Show a second select box based on the option chosen in the first?

Change fieldset via radio button

Categories

Resources