I want to validate my drop down list to current javascript function.
Javascript
function theteam() {
document.add_team_frm.action = "team.php";
document.add_team_frm.submit();
}
HTML
<form name="add_team_frm" action="team.php" method="post">
<select name="team_name[]">
<option value="0">Select Team</option>
<option value="1">Team A</option>
<option value="2">Team B</option>
<option value="3">Team C</option>
</select>
Submit Team
</form>
I use link as submit button. How do I add a a validation on name="team_name[]" to the theteam() if value = 0
Let me know.
try this:
function theteam(){
//check select
if(document.getElementById('selectID').value == 'whatever'){
document.forms['add_team_frm'].submit();
}
else { /*select check failed*/ }
}
Related
I am trying to use the code below so website users have the option to select which database they'd like to search from a list of drop-down menu options. The code works just fine, but users are able to submit a search when the drop-down menu is set to the default selection which results in an error. I only want users to be able to submit a search if they select Option 1, Option 2, etc. from the drop-down menu.
Is there a way to accomplish this? Thanks in advance!
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>
<form name="searchform" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="" disabled selected>Select an option by category</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
For:
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
</form>
Step 1
First, you should assign different values to each dropdown options. Right now, all options have the same value "", so you can not differentiate among selected options.
<option value="option_0" disabled selected>Select an option by category</option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
Step 2
In dosearch() function, check if the selected option is different than option_0. If it is, then perform the search. If it is not, alert the user that he should select the option from dropdown first.
function dosearch() {
const sf = document.searchform;
const selected_option = sf.sengines.options[sf.sengines.selectedIndex].value;
if (selected_option === "option_0") {
alert('Choose an option from dropdown first.')
} else {
const submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
}
Working example
I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?
You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
I have 4 dropdowns from which you have to select an option.
What I am trying to do is show an alert if you chose the same option more than once. Its purpose is to keep the score for a game so a person shouldn't be able to play as 2.
At the moment the dropdown looks like this:
<select id="users_1" aria-labelledby="dropdownMenu1">
<option>Select player</option>
<?php foreach($users as $user) : ?>
<option value="<?=$user['id_user']?>"><?=$user['nume']?></option>
<?php endforeach; ?>
</select>
And what I've tried to do in JQuery is this:
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
And I also tried to compare them like this:
$("#users_2").change(function() {
if($(this).val() == $("#users_1").val()) {
alert($(this).val());
}
});
None seems to work and I have no clue why. I've checked and the actual values are taken from the view but the if clause cannot compare them apparently.
Thank you for any help! Much appreciated!
Get your values, don't set them
Change this…
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
…to this…
$("#users_2").change(function() {
var a = $("#users_1").val();
var b = $(this).val(); // equivalent to $("#users_2").val()
if(a === b) { // Use strict comparison operator as a best practice
alert(a + ' matches ' + b);
}
});
Make it dynamic
You can take it a step farther by listening to a set of elements and making your handler dynamic:
// Listen to set of all select elements.
$('select').on('change', function(e) {
// Serialize form values.
var vals = $('#select_player').serializeArray();
// Convert to simple array of just values.
vals = $.map(vals, function (val, i) {
return val.value;
});
// Remove current selection from array…
vals.splice(vals.indexOf($(this).val()), 1);
// …then check to see if it's value was already there.
if(vals.indexOf($(this).val()) !== -1) { // If value is found,
// …reset current select element to default option,
$(this).val('default');
// …and alert user with a relevant message.
alert('You cannot select this player more than once.');
};
});
label {
display: block;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="select_player" name="select_player">
<label>Player 1:
<select id="users_1" name="users_1">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 2:
<select id="users_2" name="users_2">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 3:
<select id="users_3" name="users_3">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 4:
<select id="users_4" name="users_4">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
</form>
I used the same class on all the dropdowns and then use only one event handler.
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
In the event handlers I can get the selected value, filter all the dropdowns that match that value and if I get more than 1 dropdown I will just show the alert.
You can check it on fiddle.
I want menu to be in select control, like this
<form id="go">
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="">Select option</option>
<option onclick="openChangePassword()">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
This is changing url not a problem, but i have problem with some option because values are calling function, onclick="openChangePassword() and it is not working this way, any solution.
On some option i need url redirect on other i need function call?
As A. Wolff points out in his comment, you should add an event listener to the <select> element instead. Like this:
<form id="go">
<select name="URL">
<option value="">Select option</option>
<option value="openChangePassword">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
<script>
document.querySelector('select[name="URL"]').addEventListener('change', function(e){
var selection = this.options[this.selectedIndex].value;
if(selection == 'openChangePassword'){
openChangePassword();
} else {
window.location.href = selection;
}
});
</script>
Notice that I only use the value attribute of <option> and then decide what to do in the listener callback function.
I have the following HTML and Javascript, that is not working:
<select id="shirtinfo[0]" name="shirtinfo[0]">
<option value="">Confederation</option>
<option value="6770">Europe (UEFA)</option>
<option value="16272">South America (CONMEBOL)</option>
<option value="21684">Africa (CAF)</option>
<option value="21771">North & Central America (CONCACAF)</option>
<option value="18091">Asia (AFC)</option>
<option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
<option value="">Season</option>
<option value="2013">2013</option>
...
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="validate()" />
<script>
function validate() {
if (document.querySelectorAll("#shirtinfo[0], #shirtinfo[1], #shirtinfo[2], #shirtinfo[3], #shirtinfo[4], #season, #style, #status").value)
{
alert("[[Please enter the mandatory fields]]");
return false;
}
}
</script>
All the first option values are empty with just the title, and the alert will be shown if any of the options are not selected. So the user needs to select from the lists at least something else that is not the first option.
How can I do that?
Alter the following code as necessary. Just loop through the proper elements, and if the select's value is empty, then break and handle as necessary.
function validate() {
"use strict";
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('[[Please enter the mandatory fields]]');
return false;
}
}
// If the code execution reaches this point, all the tests pass
// ...
}
The code can be improved, for example, if you want to continue looping through all the elements, and highlight the problem select elements, but that is beyond the scope of this question.
Try this: Also in this fiddle: http://jsfiddle.net/9f76X/
<select id="shirtinfo" name="shirtinfo[0]">
<option value="">Confederation</option>
<option value="6770">Europe (UEFA)</option>
<option value="16272">South America (CONMEBOL)</option>
<option value="21684">Africa (CAF)</option>
<option value="21771">North & Central America (CONCACAF)</option>
<option value="18091">Asia (AFC)</option>
<option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
<option value="">Season</option>
<option value="test">test</option>
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="return validate();" />
<script type="text/javascript">
function validate() {
var controls, cnt, showAlert;
controls = document.querySelectorAll("#shirtinfo,#season");
for (cnt=0;cnt < controls.length; cnt++)
{
if (!controls[cnt].value)
{
showAlert = true;
break;
}
}
if (showAlert) {
alert("[[Please enter the mandatory fields]]");
}
return !showAlert;
}
</script>