check required field in Javascript on different button - javascript

i am not too good with java Script but trying to learn few things in different ways and this community always help me to learn such stuff.
i need some help from you guys again. below is my code and what i want is.
i have different dropdowns on a single page, with different buttons to run different queries in php. but i want to make sure that drop should have some selected value before proceeding to php query on button click. i am not able to perform this task, below is the sample which is definitely wrong. i want on button click "fun" Myfunction should run which should check that proper value is selected from drop down s1 and here s2 value is not required. and same is with 2nd button vice verse. kindly help and any idea would be appreciated.
function myFunction() {
document.getElementById("s1").value = "required"
}
function myFunction1() {
document.getElementById("s2").value = "required"
}
dd1:
<select id="s1">
<option>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>dd2:
<select id="s2">
<option>Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br>
<br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>

You have to check value of document.getElementById("s1").selectedIndex and ...(s2) as following:
function myFunction() {
var s1 = document.getElementById("s1").selectedIndex;
var s2 = document.getElementById("s2").selectedIndex;
if (s1<1 && s2<1) {
alert("Please select atleast one item from dropdowns!");
return false;
};
}
<html>
<body>
dd1:<select id="s1">
<option >Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option >Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>
</body>
</html>

Using jQuery will do the trick. You just need to check the value of your select component. To achieve this, you should first add a value for when nothing is selected:
dd1:<select id="s1">
<option value="0">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option value="0">Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
Now, when nothing is selected, the value of your component will be 0. To check this values, you have to do something like this:
function myFunction() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
function myFunction1() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
Using vanilla
If you don't want to use jQuery for whatever the reason, you just have to change var selectedValue1 = $('#s1').val(); for var selectedValue1 = document.getElementById('s1').value;.
I hope this helps :)

Related

Selecting item from a dropdown with javascript

Here is a dropdown menu of a website
<select name="ctl00$ddlWersjeJezykowe" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0)" id="ddlWersjeJezykowe" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
I want to change the language to English through browser console. I tried this on my console
document.getElementById("ddlWersjeJezykowe").value="2";
It only selects English but doesn't change the language. How can i change the language to English through my browser console?
Changing the value programmatically doesn't fire the onchange event, so you have to call setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0) too.
Alternatively, you can call document.getElementById("ddlWersjeJezykowe").onchange()
This is will get the selected value from select dropdown
<select id="language" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
function GetValue() {
var e = document.getElementById("language");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
<button type="button" onclick="GetValue()">Get Selected Value</button>
<div id="result"></div>

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

How to copy and paste an html select selected value to other selects

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>

Html and javascript <select> tags with filtering

I will try to be as specific as I can.
So I need to create a selector that filters the options.
I have:
types of cars
The places where you can drive those cars.
So for example you would select > Ferrari > then the correct areas on the second select tag show up
I.e. Select > Ferrari = London, Cambridge, Devon, New hampshire
Select > Lamborghini = London, Bertshire, Oakwood,
And then finally
they choose (Ferrari + Cambridge) and then press "go" and jump to the final link that will take them to the right page.
My code is:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<script type='text/javascript'>//<![CDATA[
$('#filter-regions').on('click', function() {
var pilotage-carFilter = $('#pilotage-car').text();
var itemFilter = $('#items').text();
console.log('pilotage-carFilter: ' + pilotage-carFilter);
console.log('itemFilter : ' + itemFilter);
console.log('Applying filter now...');
featureList.filter(function(item) {
console.log('Running filter() on item: ('+item+')');
console.log('item.values().pilotage-car: ' + item.values().pilotage-car);
console.log('item.values().item: ' + item.values().item);
return
(pilotage-carFilter==='Ferrari' || item.values().pilotage-car === pilotage-carFilter)
&& (itemFilter==='All items' || item.values().item === itemFilter);
});
return false;
});
//]]>
</script>
</head>
<body>
<form id="filter">
<select id="pilotage-car" name="pilotage-car" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-BN-5iZ5.aspx?SqNo=5iZ5&cm_sp=LHN-_-Voiture-_-Ferrari&cm_re=Ferrari-_-Voiture-_-LHN">Ferrari</option>
<option value="Porsche">Porsche</option>
<option value="Lamborghini" selected>Lamborghini</option>
<option value="Mustang">Mustang</option>
<option value="Audi" selected>Audi</option>
<option value="Multivolants">Multivolants</option>
<option value="Rallye">Rallye</option>
<option value="Subaru">Subaru</option>
<option value="Karting">Karting</option>
<option value="4x4">4x4</option>
<option value="Moto">Moto</option>
<option value="Quad">Quad</option>
<option value="Buggy">Buggy</option>
<option value="Renault Sport">Renault Sport</option>
<option value="Prototype">Prototype</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Corvette">Corvette</option>
</select>
<select id="items" name="items" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx?SqNo=5iZ5Z1z13skq&cm_sp=LHN-_-Region-_-Alsace&cm_re=Alsace-_-Region">A l'étranger</option>
<option value="Alsace">Alsace</option>
<option value="Aquitaine" selected>Aquitaine</option>
<option value="Auvergne">Auvergne</option>
<option value="Basse-Normandie" selected>Basse-Normandie</option>
<option value="Bourgogne">Bourgogne</option>
<option value="Bretagne">Bretagne</option>
<option value="Centre">Centre</option>
<option value="Champagne-Ardenne">Champagne-Ardenne</option>
<option value="Franche-Comté">Franche-Comté</option>
<option value="Haute-Normandie">Haute-Normandie</option>
<option value="Ile-de-France">Ile-de-France</option>
<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
<option value="Limousin">Limousin</option>
<option value="Lorraine">Lorraine</option>
<option value="Midi-Pyrénées">Midi-Pyrénées</option>
<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
<option value="Pays de la Loire">Pays de la Loire</option>
<option value="Picardie">Picardie</option>
<option value="Poitou-Charentes">Poitou-Charentes</option>
<option value="Provence-Alpes-Côte d'Azur">Provence-Alpes-Côte d'Azur</option>
<option value="Rhône-Alpes">Rhône-Alpes</option>
</select>
<input id="go-button" type="button" name="test" value="Go"/>
</form>
Im really not sure about javascript at all.
How could I, and/or what is the best way I could achieve this? Are there any examples out there?
EDIT: I found something like this http://jsfiddle.net/dtAgX/1/
But i need a sumbit button that will link to the right page based on selection.
Thanks in advance
You have several options depending on your backend, PHP, ASP ect. or plain HTML.
If you use PHP/ASP you can provide an 'action' and a 'method' for your and have the server provide the correct page, depending on the values of your selects.
If you use plain HTML, you can add an 'onsubmit' event to your and have a javascript redirect to the correct page.
In both cases the "go-button" should be of type "submit".
If you want more help I'll need to know more about your setup :-)
Also, can all cars be driven at all locations?

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}

Categories