I am looking for a way to validate multiple sumo select boxes. The code I have is as follows.
HTML
<select class="kid-age form-select" id="edit-age-big-kid-1" name="age_big_kid_1">
<option value="">-</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="kid-age form-select" id="edit-age-big-kid-2" name="age_big_kid_2">
<option value="">-</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="kid-age form-select" id="edit-age-small-kid-1" name="age_small_kid_1">
<option value="">-</option>
<option value="3">0</option>
<option value="4">1</option>
<option value="5">2</option>
</select>
JS
$('.kid-age').SumoSelect();
How can I client side validate all of the drop downs (there may be multiple) to be required and display a single message "All kid ages are required."
Thanks in advance!
Here is quick and simple validation, but it will give you idea, you can modify it to fit your needs:
$(document).ready(function () {
$('.kid-age').SumoSelect();
$('#submit').on('click', function() {
errors=[];
$('p.SelectBox').each(function() {
if($(this).attr('title')==" -") {
errors.push('invalid');
}
});
if(errors.length>0) { // if there are errors, show message, stop submission, etc...
message='All kid ages are required.';
$('.error').text(message);
}
else { //if no errors, continue with script execution...
$('.error').text('fields validated');
}
});
});
Plugin creates one specific p tag (for all dropdowns) which holds selected options... so, you can check its value, and if different than ' -', continue script execution, otherwise error will be thrown.
See it in action: https://jsfiddle.net/g7bLbevy/
Related
I have a select form element with values from 1-7+. If the user selects "7+" I want the URL to go to emailForm.php. How can I get this to work? The other options will be captured when the user click a submit button.
<select id="replyNumber">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+" onchange="document.location.href=emailForm.php">7+</option>
</select>
You cannot add onchange to option but need to add it to select tag.
You can add on a function changePage and you can check value and then implement the page change like below
<script>
function changePage() {
var val = document.getElementById("replyNumber").value;
if (val == "7+") {
document.location.href='emailForm.php'
}
}
</script>
<select id="replyNumber" onchange="changePage()">
<option selected="true" disabled="disabled" value="">No of people</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7+">7+</option>
</select>
You can solve this in JavaScript.
First add an onchange=testFunction(this) attribute to your select tag.
Then create and define a function in your JavaScript like follows:
function testFunction(el) {
if (el.value === '7+') {
// change the webpage you're currently on
document.location.href = 'emailForm.php';
// change the url your form posts to
document.form-name.action = 'emailForm.php';
}
}
Whenever a user changes your select box it'll call this function, you can then choose what values to check for, what to do when certain values are selected without submitting the form itself.
I have a successful piece of javascript that when selecting from a drop down menu makes a text box or text area required. It however does not work with another drop down box. Any help would be appreciated.
Example: When selecting "Collection" from the first drop down, the drop down "Number_of_parcels" (which is always visible), becomes required. Nothing changes when selecting "Delivery" etc. I am stumped and any help would be appreciated.
JAVASCRIPT
function selection()
{
var cat = document.getElementById('Collection_Delivery').value;
if (cat == "Collection") {
if (document.getElementById("Number_of_parcels").value == "") {
alert('This must be completed');
return false;
}
}
return true;
}
HTML first drop down:
<select name="Collection_Delivery" id="Collection_Delivery" onChange="selection()">
<option disabled="disabled" selected="selected">-</option>
<option value="Delivery">Delivery</option>
<option value="Collection">Collection</option>
<option value="Collection and Delivery">Collection & Delivery</option>
</select>
HTML second drop down:
<select name="Number_of_parcels" id="Number_of_parcels">
<option value="" selected="selected">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="submit" value="Send" onClick="return checkForm(this.form);selection()" name="myButton">
var beneficiarioDiv = $('<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>');
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
<div class="beneficiarios-wrapper"></div>
// this is the div where I want to append the number of divs selected by the user
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I have been hitting my head cuz I can't think on a way to get this to work ( I'm new with Jquery )
So.. I have a select input field in a form with number options.. I want to check which of the options the user selected and add a DIV the number of times the user selected ( from 0 to 10 ) and if the user selects a number lower than the one he previously chose delete the DIVs previously added and add the ones he now chose (if he selects number 3 add 3 DIVs, if he now selects 2 because he was just mistaken then just show 2 instead of the 3)
I know how to get the number the user selected with the .change event listener and the :selected.val() method.. my problem is appending the divs that number of times the user selected, and deleting them if the user selects a number lower than.
Please i don't know how to make this work!
In your change function, first clear the wrapper and then append the divs in a loop
var beneficiarioDiv = '<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>';
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
$('.beneficiarios-wrapper').empty();
while (beneficiarios--) {
$('.beneficiarios-wrapper').append(beneficiarioDiv);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="beneficiarios-wrapper"></div>
You can clear the div on change event. Then use a for loop to append div
const divToAppend = '<div>test</div>';
let number = $('#beneficiarios').val();
$('#beneficiarios').on('change', function () {
$('#placeholder').html('');
number = $(this).val();
for (let i = 0; i < number; i++) {
$('#placeholder').append(divToAppend);
}
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You could just append the divs in a loop:
var b = = $('#beneficiarios :selected').val();
while(b--) {
$(".beneficiarios-wrapper").append("<div>"+b+"</div>")
}
I've a dropdown
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
now what i'm doing is as soon as user clicks on ddl1 i change its default value to 4 like this
$(function () {
var defaultValue = "4";
$('#ddl1').click(function () {
var select_val = $('#ddl1').val();
if (select_val == "0")
$('#ddl1').val(defaultValue);
});
});
but now the problem is when user tries to select the default option of dropdown i.e number, option 4 is selected. Any ideas how to fix this?
The problem is when the user just clicks on dropdown -> option4 must be selected and when user clicks on option number -> option number must be selected instead of option 4.
Not sure why you're doing that but focusin or focus events can help you achieve that as follows:
$(function() {
$('#ddl1').on('focusin', function() {
this.value != 0 || $(this).val( 4 );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
You should call this function on change, not click - else, like you said, as soon as you click an option is selected.
$('#ddl1').change(function () {
DEMO
Edit: You should use a class to give the feel of the default option, you don't actually want it set to selected EACH time the user clicks:
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" class="default">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
.default {
color: blue;
}
is this what you're looking for? http://jsfiddle.net/swm53ran/84/
$(function () {
var defaultValue = "4";
var count = 0;
$('#ddl1').click(function () {
if (count < 1) {
$('#ddl1').val(defaultValue);
count++;
}
});
});
This is a weird one but our developer is away and my client is having a web site presentation tomorrow.
On a web page one drop-down has the values below. Is there a way using script/css our designer can hide the replicated values and just show 1-9 once? Thanks so much.
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
Try this:
var usedNames = {};
$("select > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}});
Working Demo
you can remove the dups using jQuery like below:
var found = [];
$("select option").each(function() {
if($.inArray(this.value, found) != -1) $(this).remove();
found.push(this.value);
});
Keep an array of found values, if value not found in array, add it .push(), if found, its a dupe, .remove() it.
You can use :gt() selector:
$('select option:gt(8)').hide();
try this ....
$('select option').each(function(i)){
if(i >= 9)
$(this).remove();
});