I found two threads which answer my question of what code to use. However I have been searching here and the rest of the internet for something to demonstrate how to get the script to run. I have almost no experience with JavaScript which is probably why I can't get this.
Threads:
How to avoid the need for ctrl-click in a multi-select box using Javascript?
Selecting multiple from an html select element without using ctrl key
The code that I wish to use is
<script>
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
However I have no idea on how to get it to work with a multiple select dropdown menu. The example drop down that I have been using to try and figure out how to get this to work is:
<form id="AddProductForm" name="AddProductForm" method="POST">
<select id = "practice" name="practice" multiple>
<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>
</select>
I don't understand how to get the script to run so that when I click on one of the options I don't need to hold ctrl down to select multiple.
Any help will much appreciated. Thanks!!
EDIT:
I have been looking at the two links and I have a page with the code on it but when I run it I still have to hold ctrl to be able to select multiple options.
The javascript code must be AFTER the select tag. Copy-paste next code in a HTML file and open it in your browser:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<select id="practice" name="practice" multiple>
<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>
</select>
<script type = "text/javascript">
$(document).ready(function(){
$('select').mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(function(){select.scrollTop = scroll;}, 0);
$(select).focus();
});
$('select').mousemove(function(e){
e.preventDefault();
});
});
</script>
</body>
</html>
Related
I am using the Jquery Chosen plugin and I want to dynamically set the maximum number of options the user can select on change event of another chosen select. Note: milestone select control is a multiselect
Here is my code,
const $milestone = $('#mainmodallg .modal-body form select[name="milestone"]');
$('#mainmodallg .modal-body form select[name="item_code"]').change( function () {
$milestone.chosen({ max_selected_options: 1 });
$milestone.trigger("chosen:updated");
});
Right now it's not changing it. What am I missing?
You need to get instance of chosen select and then using that update your max_selected_options value.
Demo Code :
$(".chosen-select").chosen({
width: "95%"
});
const $milestone = $('select[name="milestone"]');
$('select[name="item_code"]').change(function() {
$milestone.data('chosen').max_selected_options = 1; //get instance
$milestone.trigger("chosen:updated"); //update
//or
//destroy plugin & re-intialize
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>
<select data-placeholder="Choose..." class="chosen-select" name="item_code">
<option value=""></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>
</select>
<select data-placeholder="Choose..." class="chosen-select" multiple="" name="milestone">
<option value=""></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>
</select>
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">
I have textarea (x1_typdv) and I want this:
If I write "3" to textarea, select option with value "3" in dropdown (x1_typdv2). I have this code but it not work, how to do it? Thanks.
$('#x1_typdv').change(function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x1_typdv" value="" name="x1_typdv">
<select name="x1_typdv2" id="x1_typdv2">
<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>
</select>
EDIT: I tried it again, it works for me if I use just normaln textarea. But I want use it for textarea which is filled by javascript (its calculations form), and here its not work. How to get the same value which is in teaxtarea to dropdown? Thanks.
$x1_typdv = parseFloat($('#x1_field_skrinka option:selected').attr('data-typdv')),
$x1_fieldTypdv.val($x1_typdv);
$x1_fieldTypdv = $('#x1_typdv');
Hi please check below answer its working..
$('#x1_typdv').keyup(function(e) {
if($('#x1_typdv').val()!="" && $("#x1_typdv2 option[value='"+$('#x1_typdv').val()+"']").length > 0)
$('#x1_typdv2').val($('#x1_typdv').val());
else if($('#x1_typdv').val()!="" && e.which != 8)
alert("Value doesnot exists.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x1_typdv" value="" name="x1_typdv">
<select name="x1_typdv2" id="x1_typdv2">
<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>
</select>
Try to use below code
using Javascript:
document.getElementById("x1_typdv2").value = document.document.getElementById("x1_typdv").value;
OR
using jQuery
$('#x1_typdv2 option[value=' + $('#x1_typdv').val() + ']').attr('selected','selected');
You have to add jquery in your page and try this code :
$('#x1_typdv').on('change', function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});
I noticed some browsers don't catch the change until blur
$(document).ready(function(){
$('#x1_typdv').on("keyup", function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});
});
EDIT: I'd also add more solidity
$(document).ready(function(){
$('#x1_typdv').on("keyup", function() {
var value = $('#x1_typdv').val();
value && $('#x1_typdv2').val(value);
});
});
working fiddle ==> https://jsfiddle.net/tonysamperi/aepc4sbj/
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/