I have created an HTML form that is generated from a PHP script. The PHP script outputs an HTML dropdown based on data held in a database. The number of dropdowns being displayed on the page varies as it is based on the number of lines in a MySQL database. All the dropdowns have the same ID inputDropdown
I am trying to create a jquery script that prevents the form from being submitted until all the dropdown boxes have been completed (So whenever the value doesn't equal No Response).
This is the HTML code outputted from the PHP Script. Please note the number in the name (E.G. "1" in dropdown_1) is generated based on the ID of a row in the database.
<select name="dropdown_1" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_2" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_3" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
I tried the following jquery Code, however, this only worked for the first of the dropdowns and didn't check the other dropdown values.
$(document).ready(function () {
$("#update-form").submit(function (e) {
if ($('#inputDropdown').val() == 'No Response') {
alert('Please complete all the boxes');
}
e.preventDefault(e);
});
$("#inputDropdown").change(function () {
$("#inputDropdown").submit();
return false;
});
});
Please, could someone advise of an efficient way on how to do this?
Thank you in advance!
Your first issue is that you have repeated the same id in the DOM, which is invalid. Use a class to group the elements instead.
Then you can use filter() to find how many of the selects still have the first option selected when the form is submit. If any of them do, show the alert(). You also need to call preventDefault() at this point only. Try this:
jQuery(function($) {
$("#update-form").submit(function(e) {
var unselected = $('.inputDropdown').filter(function() {
return $(this).find('option:selected').index() == 0;
}).length;
if (unselected != 0) {
e.preventDefault(e);
alert('Please complete all the boxes');
}
});
$(".inputDropdown").change(function() {
$("#update-form").submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update-form" action="#">
<select name="dropdown_1" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_2" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_3" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
</form>
Related
I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?
See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!
You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp
Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.
Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);
See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.
<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>
I try to find a solution, but I can't find it and I am not able to program it by myself. I hope you can help me.
I have 2 elements: A textfield and a drop down menu (select/options).
Based on the birth/year of a person I enter into the textfield, I want to have a related drop down values.
If the person is 0-17 years old, the values in the drop down should bei 0, 100, 200, 300, 400, 500, 600.
If the person is 18 years old or older, the values in the drop down should bei 300, 500, 1000, 1500, 2000, 2500.
Example: If I enter 1978 into the text field, the drop down menu should show the values 300, 500,…
If I enter 2002 into the text field, the drop down menu should show the values 100, 200,…
I hope it is understandable what I am looking for.
I have checked this one:
Change dropdown value based on Text Input
and also this one, which looks also similar to what I need:
jQuery - Change hidden value based on input field
But I can't make it.
A jsfiddle would be really cool!
Thank you in advance.
<input name="Year" type="text" value="" />
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Kind regards,
Andy
You could handle this by taking advantage of data-* attributes and using jQuery to determine which values should be shown based on your selection :
<!-- Assumes a valid year is entered -->
<input name="Year" type="text" value="" />
<!-- Notice your possible values data options -->
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<script>
$(function(){
// When your year changes...
$('[name="Year"]').change(function(){
// Check that the value is a year (assumes 4 digit number)
if(/^\d{4}/.test($(this).val())){
// Parse the value
var year = parseInt($(this).val());
// Determine the user's age
var age = new Date().getFullYear() - year;
// Use the data attributes to set each value (ignore the first one)
$('[name="Results"] option:not(:first)').each(function(){
var valueToUse = (age >= 18) ? $(this).attr('data-over-18') : $(this).attr('data-under-18');
$(this).val(valueToUse).text(valueToUse);
});
}
else{
alert('Please enter a year! (any 4-digit number will do)');
$(this).val('').focus();
}
})
})
</script>
You can see a complete working example here and demonstrated below :
https://jsfiddle.net/erjc0fna/
Basically each option has a class that identifies it as lessThan18 or over18. The ones without classes are available for either case according to what you wrote. On keyup for the textbox it then calculates the age and hides/shows the correct options.
Include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
After add ids to the input(inputId) and the 2 select(select1 and select2)
<input id="inputId" name="Year" type="text" value="" />
<select id="select1" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select id="select2" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Code jquery
<script>
//here the code
$( document ).ready(function() {
$("#inputId").keypress(function(e)
{
if(e.which == 13) //When you press enter key one select is hide an the other is show
{
var aux = parseInt($(this).val());
if( aux >= 1999)
{
$("#select2").show();
$("#select1").hide();
}
else
{
$("#select1").show();
$("#select2").hide();
}
}
});
});
<script>
I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text
drop down html is :
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.
Thanks in advance
You could add hidden input field by default for other text :
<input type='text' id='other' name='other' style="display:none"/>
And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
Hope this helps.
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.
<input id="transportOptions" list="transport">
<datalist id="transport">
<option value="Car">
<option value="Bike">
<option value="Scooter">
<option value="Taxi">
<option value="Bus">
</datalist>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Hello I have first one input which is
<select id="selectcontract" name="contract" class="input-xlarge" >
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
this input contains 2 options Buy and Rent. So I would like when you choose Buy foe example to populate the values of second and third input if you choose Rent to populate exactly those same inputs but with different values and value names.
here are the second and the third inputs:
Second Select:
<select id="Pricefrom" name="minimum_price" >
<option value="">Price From</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
Third Select:
<select id="Princeuntil" name="maximum_price" >
<option value="">Price Until</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
Any advice in which direction I should realize this goal ? I guess it should be something with jquery since the change should be made mediate when you choose either buy or rent.
You can create one div for buy and one for rent with class and after show or hide their
Example on fiddle:
https://jsfiddle.net/tehb2fxt/1/
Div Buy (is necessary change the name prop to not repeat) and add CLASS "class_price"
<select id="selectcontract" name="contract" class="input-xlarge class_price">
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
</select>
<div class="div_buy" style="display: none">
<select id="Pricefrom_buy" name="Pricefrom_buy" class="class_price">
<option value="">Price From Buy</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
<select id="Princeuntil_buy" name="Princeuntil_buy" class="class_price">
<option value="">Price Until Buy</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
</div>
<div class="div_rent" style="display: none">
<select id="Pricefrom_rent" name="Pricefrom_rent" class="class_price">
<option value="">Price From Rent</option>
<option value="8">8</option>
<option value="800">800</option>
<option value="8000">8000</option>
<option value="8500">8500</option>
</select>
<select id="Princeuntil_rent" name="Princeuntil_rent" class="class_price">
<option value="">Price Until Rent</option>
<option value="900">900</option>
<option value="9000">9000</option>
<option value="9500">9500</option>
<option value="9000">9000</option>
</select>
</div>
Jquery to show and hide according with select:
<script type="text/javascript">
$(document).ready(function(){
$('#selectcontract').change
(
function()
{
if($(this).val() == "1")
{
$('.div_buy').show('slow');
$('.div_rent').hide('slow');
}
else if($(this).val() == "2")
{
$('.div_buy').hide('slow');
$('.div_rent').show('slow');
}
else
{
$('.div_buy').hide('slow');
$('.div_rent').hide('slow');
}
}
);
}
);
</script>
To control and not be in conflict 2 selects add input text(will changed to type="hidden" when finish test) for recovery values of pricefrom and princeuntil(buy and rent)
<input type="hidden" id="Pricefrom" value="0" name="Pricefrom">
<input type="hidden" id="Princeuntil" value="0" name="Princeuntil">
And add event Jquery when values class changed
$('.class_price').change
(
function () {
if($('#selectcontract').val() == "1") //if buy
{
$('#Pricefrom').val($('#Pricefrom_buy').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_buy').val()); //get value select
}
else if($('#selectcontract').val() == "2") //if rent
{
$('#Pricefrom').val($('#Pricefrom_rent').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_rent').val()); //get value select
}
else {//if not select
$('#Pricefrom').val("0");
$('#Princeuntil').val("0");
}
}
);
Static Lists
A simple fiddle proof of concept.
https://jsfiddle.net/cgjjg2dy/
The main part is:
$('#selectcontract').change(function (event) {
$(".section").hide();
$("#section" + $(this).val()).show();
});
I hide all the sections, then I show the one that corresponds to the option chosen. You can get even fancier with fadeOut() and fadeIn() too!
AJAX
If you want to dynamically retrieve your options from a server/database, you have to use AJAX. Instead of using .hide() and .show() in your change() handler, you just make an AJAX call and retrieve the data, then modify the DOM as necessary. Quite a bit more complex, but still the same idea.
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
Here option Test Two is selected and disabled. The below code fetches select value when dropdown is enabled and value is changed.
//pass value to hidden input
$('#test_me').change(function () {
var id = $(this).val();
$('input#test_hidden').val(id);
})
How can I pass selected option value i.e. 2 to my hidden input, when dropdown is disabled and value is selected ?
This issue is reported at http://bugs.jquery.com/ticket/13097 and marked as wont fix. for reason:
The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency.
Alternative for this would be to use selectedindex property of select to target option by index:
$("#test_me option").eq($("#test_me").prop("selectedIndex")).val();
Complete Snippet:
var id = $("#test_me option").eq($("#test_me").prop("selectedIndex")).val();;
$('input#test_hidden').val(id);
<script type="text/javascript">
//pass value to hidden input
$(document).ready(function(e) {
var sel = $("#test_me").val();
$("#test_hidden").val(sel);
});
</script>
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">