Select dropdown value by textarea with jQuery - javascript

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/

Related

Getting JS Script to work with multiple select drop down

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>

jQuery select option last doesn't work

I've got a button and list of options. The idea is that when user clicks the button the default option changes from disabled to max value. And oposite - if the input is not checked, the default is again disabled.
But the value returns undefined. If I change the first and thelast to numeric values, everything works fine. What's wrong?
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected> -- choose -- </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>
</select>
jQuery(function(){
jQuery(".input").click(function(){
var thefirst = jQuery(this).next('#select option:first').val();
var thelast = jQuery(this).next('#select option:last').val();
if( jQuery(this).is(':checked') )
jQuery(this).next('#select').val(thelast);
else
jQuery(this).next('#select').val(thefirst);
});
});
.next() gets the next sibling, so you need to get the select and use .find() or .children() afterwards:
var thefirst = jQuery(this).next('#select').find('option:first').val();
var thelast = jQuery(this).next('#select').find('option:last').val();
Since IDs must be unique, there's no point in doing something like:
jQuery(this).next('#select option:first')
when
jQuery('#select option:first')
would suffice, plus .next() would fail here since it evaluates the siblings of an element and filters on anything you pass, but your filter is what would cause it to not match anything.
Instead, use:
jQuery(".input").click(function () {
var thefirst = jQuery('#select option:first').val();
var thelast = jQuery('#select option:last').val();
if (jQuery(this).is(':checked')) jQuery('#select').val(thelast);
else jQuery('#select').val(thefirst);
});
jsFiddle example
The vanilla javascript alternative for future viewers
(function () {
"use strict";
var inputs = document.getElementsByClassName('input'), input;
for (var i = 0; input = inputs[i]; i++) {
input.addEventListener('click', function (e) {
e.target.nextElementSibling.lastElementChild.selected = e.target.checked;
e.target.nextElementSibling.firstElementChild.selected = !e.target.checked;
}, false);
}
})();
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected>-- choose --</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>
</select>

Mandatory fields and selecting drop down list values

Basically, I have two fields, one a selection (drop down) list and the other an input textbox, both different question's.
My question is, if I choose only one value in the selection list (first question), the textbox (second question) must be 6 characters or numbers in length. Otherwise, the other values chosen in the selection list can be 10 characters long in the textbox.
How can I write this in Javascript form without the use of regex and within ?
I have written parts of this script but I would like to see how others can write it. My sole problem is to get the rest of the other values to be 10 characters long.
I'd also like to add that the first question does not need to be a selection list. I made it this way for the html to be more presentable and organised.
This is my script (so far):
function imposeMaxLength(object, limit) {
var num = document.getElementById("Number").value;
if (num == "3") {
document.getElementById("Type").value {
return (object.value.length <= limit);
}
}
}
HTML:
<label for="number">Number:</label>
<select size="1" id="Number">
<option disabled>...</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>
<br>Type:<input type="text" id="Type" onkeypress="return imposeMaxLength(this,6);"><br>
<input type="button" value="submit"/>
Please help.
i think you need this
<script>
$('#Number').on('change', function () {
var value=this.value;
if(value==1)
{
$("#Type").attr('maxlength','6');
}
else
{
$("#Type").attr('maxlength','10');
}
});
</script>
This sets the maxlength to the required value whenever the Select element changes. So if you do select multiple values, then the maxlength will change to 10, otherwise, if only 1 item is selected it will have a maxlength of 6.
<div>
<select size="1" id="Number" multiple>
<option disabled>...</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>
</div>
<div>
<input type="text" id="Type" />
</div>
<div>
<input type="button" value="submit"/>
$("#Number").on('change', function() {
var selects = $(this).find('option:selected');
if(selects.length > 1) {
$("#Type").attr('maxlength', 10);
} else {
$("#Type").attr('maxlength', 6);
}
});
Demo
u may simply use the property maxlength:
html
<input type="text" id="Type" maxlength="1"/><!-- default value in select -->
<select onchange="imposeMaxLength(this.value);">
js
<script>
function imposeMaxLength(max) {
document.getElementById("Type").maxlength = max;
}
</script>

jQuery/ Javascript change select options based on selected answer

I have the following code:
<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple">
<option value="#" selected="selected">Rank...</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></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges">
<option value="#" selected="selected">Rank...</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></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas">
<option value="#" selected="selected">Rank...</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></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons">
<option value="#" selected="selected">Rank...</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></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes">
<option value="#" selected="selected">Rank...</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></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi">
<option value="#" selected="selected">Rank...</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></td></tr>
And here in jsFiddle: http://jsfiddle.net/XNYU2/
I'm trying to understand if this is possible and, if so, whether jQuery or Javascript is the best solution and how I'd go about making it happen.
It's a ranking system and what I need to happen is simple. If a user selects from any dropdown any value, that value needs to be removed from the other dropdowns. Conversely, if the user then unselects that value, it needs to return to all the dropdowns.
Try this:
$(function() {
$('select').on('change', function(event){ // This binds listeners to the change event on all the select elements
var sId = this.id; // store off the changed element id
var vId = this.value; // store off the changed element value
$('select').each( function(){ // this loops across the same set of elements
if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something
this.options.selectedIndex = 0; // reset the value to 'rank'
}
});
});
});
You can do this in either jQuery or pure js, but jQuery selectors sure make it easy to loop through the elements and apply actions on change with very little code.
Upon re-reading you question, this accomplishes the same thing but slightly differently; the user is forced to have only 1 set of ordered ranking with no overlap, but we don't have to go to the trouble of removing/adding options.
Yes, this is a task for JavaScript. jQuery isn't an alternative to JavaScript but basically a toolset on top of it that makes manipulation of browser elements easier. I recommend using it, even though you'll need to understand JavaScript basics in order to use it effectively.
The key here is to decompose your problem; one is to perform an action once a Select has been changed. See here how this is done: http://api.jquery.com/change/
The second action is to actually implement the change, which is described e.g. here
Removing an item from a select box
The jsFiddle is here and that's the code:
var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];
$(document).ready(function () {
$('#TheTable').find('select').change(function () {
var TheSelectedValue = parseInt($(this).val(), 10);
var TheSelectID = $(this).prop('id');
var TheHTML = "";
for (var i = 0; i < SelectOptions.length; i++) {
if (SelectOptions[i] !== TheSelectedValue) {
TheHTML = TheHTML + '<option value="';
TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
}
}
$('#TheTable').find('select').each(function () {
if ($(this).prop('id') !== TheSelectID) {
$(this).html(TheHTML);
}
});
});
});
That's just one way to do it: I put it together in a few minutes and I'm sure it can be improved but that should get you started.

selected value from select box in javascript

I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"
You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);
var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check
Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>
the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox

Categories