<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
</form>
I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button
Your form should have a reset button
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
<input type="button" name="Reset" />
</form>
After adding a reset button input element to your form below code should reset all select fields.
jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() { //for each select type
$(this).val( "all" );
});
});
You have to add attribute selected to the first option of all select box.
$("select option:first").attr('selected','selected');
See my fiddle
Hope it helps.
You don't need to use jquery. This can be done by JavaScript
document.getElementById("sel1").selectedIndex = 0;
Here is my JSFiddler demo for complete code.
This is jQuery way to achieve above
$("select").val("0");
Or to be more specific
$("#sel1 , #sel2").val("0");
Related
I really need your help here. Just a heads up that I am newcomer to the jQuery library.
That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.
Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,
So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.
Here's both the HTML Markup and Code in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('#myform').on('change', function() {
var form = $(this);
form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {
return this.value.length;
}).length === 0)
}).change();
}
</script>
</head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>
Have generalized function to test all the input;
Consider $(':input:not([type="button"])') to select all the inputs excluding button
window.onload = function() {
var validateForm = function() {
return $(':input:not([type="button"])').filter(function() {
return this.value !== '';
}).length;
}
$('#myform').on('change keyup', ':input', function() {
$('#search').prop('disabled', !validateForm());
}).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</form>
I'm trying to select the value of a dropdown (select) based on whether my checkbox is checked or not. Here's the code i'm using, but it's not working:
<select name="scType" class="scType" onchange="$('.all').hide();$('.'+this.value).show();" style="display:none;">
<option value="One" selected>One</option>
<option value="Two">Two</option>
</select>
<span id="showActiveS" style="display:none;"><input name="showActive" class="showActive" type="checkbox" id="showActive" onclick="(this.checked)?$('.isNotActive').hide():$('.'+$(this).closest('.scType').val().show())"> Show Only Active?</span>
The $('.isNotActive').hide() part works, but i can't get the other part to work. Any ideas?
This example shows how to output a selected value of a drop down on checkbox checked with jQuery.
HTML:
<select name="scType" class="scType">
<option value="Five" selected>Five</option>
<option value="Six">Six</option>
</select>
<select name="scType" class="scType">
<option value="Three" selected>Three</option>
<option value="Four">Four</option>
</select>
<select name="scType" class="scType">
<option value="One" selected>One</option>
<option value="Two">Two</option>
</select>
<span id="showActiveS">
<input name="showActive" class="showActive" type="checkbox" id="showActive">
Display Closest Drop Down Value
</span>
<div>Output: <span id="output"></span></div>
Javascript:
$('.showActive').on('click', function(){
if ($(this).prop('checked'))
$('#output').text($(this).parent().prev('.scType').val());
else
$('#output').empty();
});
Updated JSFiddle: https://jsfiddle.net/cv22hwm6/7/
I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min 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>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<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>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<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>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<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>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/
Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();
I am using this javascript code for copying a field value to another field. When we just like use check box in dropdown, we have to click a check box then value copy into a text-box.
But it selects only single not multiple value in text box...
<script>
$(document).ready(function() {
$("#dropdown").on('change',function(){
var dropdownVal=this.value;
$("#textbox").val(dropdownVal);
});
});
</script>
<form>
<p>
<select multiple="multiple" name="dropdown" id="dropdown" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
</p>
<input type="text" class="normal" id="textbox" name="textbox" style="width:450px;"></td>
</form>
<script type="text/javascript">
$("select").multiselect().multiselectfilter();
</script>
I am using multiple select drop-down list with check-box.
this.value; should be $(this).val(); if you are using Jquery. and you needed click event instead of change event. see this working version: http://jsfiddle.net/5Q552/1/
and just as info: instead of $(document).ready(function(){});
you can also use: $(function(){});
$(function() {
$("#dropdown").on('click',function(){
var dropdownVal=$(this).val();
$("#textbox").val(dropdownVal);
});
});
<form>
<p>
<select multiple="multiple" name="dropdown" id="dropdown" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
</p>
<input type="text" class="normal" id="textbox" name="textbox" style="width:450px;"></td>
</form>
i have an old classic asp application that need to update. i need to add 2 dropdowns and the second one needs to be populated based on the first (ex. country and states). how do you do that using javascript?
UPDATE: Based on your comment below, I've updated my response to include code that will do what you're wanting. You can use the optgroup element to filter options based on what country is selected without having to use Ajax.
First way: (optgroup filtering)
Working example on jsFiddle.
HTML:
<select id="C_Country" name="C_Country" aria-required="true" class="required">
<option value="">-- Please Select --</option>
<option value="USA">United States</option>
<option value="CA">Canada</option>
</select>
<p>
<label for="C_State_Prov">State or Province <span title="required">*</span>
</label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
<option value="" selected="">-- Please Select --</option>
<optgroup label="United States">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
</optgroup>
</select>
JavaScript:
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');
state_province.hide();
$('#C_Country').change(function () {
state_province.hide();
$("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
.children()
.andSelf()
.show();
});
Second way: (Ajax)
Working example on jsFiddle.
Here's a rough idea of how to accomplish this. The URL defined in the jQuery should point to a location where the server-side code will generate the HTML needed based on the country the user selected (instead of being defined as a variable in the JavaScript).
HTML:
<form action="#">
<div>
<label for="country">Country:</label>
</div>
<div>
<select name="country" id="country">
<option value="">Please select</option>
<option value="us">United States</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<div>
<label for="state">State</label>
</div>
<div>
<select id="state" name="state"></select>
</div>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit">
</div>
</form>
CSS:
.hidden {
display: none;
}
JavaScript:
var $country = $("#country"),
$stateContainer = $("#stateContainer"),
$state = $("#state"),
url = "http://jsfiddle.net/htmled/KZ4jd/",
html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
countryVal;
$country.change(function () {
countryVal = $country.val();
$stateContainer.show();
$state.html(html).load(loadUrl);
});