<html>
<script type="text/javascript">
function chkind1(){
var dropdown2 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox1');
textbox.value=dropdown1.value;
}
</script>
<script type="text/javascript">
function chkind2(){
var dropdown3 = document.getElementById('dropdown2');
var textbox = document.getElementById('textbox2');
textbox.value=dropdown2.value;
}
</script>
<input id="textbox1" name="size" type="text" />
<input id="textbox2" name="copies" type="text" />
<select onchange=chkind1()' id='dropdown1'>
<option value='Nil'>Select Print Size</option>
<option value = '$file - 5x7'>5x7</option>
<option value = '$file - 6x8'>6x8</option>
</select>
<select onchange='chkind2()' id='dropdown2'>
<option value = 'Nil'>Select how many Copies</option>
<option value = '1'>1</option>
<option value = '2'>2</option>
</select>
</html>
Hi all, trying to achieve on the first drop down box (size), is not to overwrite each selection but to append or add each selection one after the other. E.G 5x7, 6x8, etc etc.
I have had a go but can't seem to get it right, could I please have some help on this.
Cheers.
Change your value assignment to append your selection to the current value:
textbox.value += ' ' + dropdown1.value;
Add whatever characters in between the quotes to separate your entries.
UPDATE:
Per question in the comment to remove the value if it is selected again.
if(textbox.value.indexOf(dropdown1.value) == -1) {
textbox.value = textbox.value.replace(dropdown1.value, '');
} else {
textbox.value += ' ' + dropdown1.value;
}
Check to see if the value is contained in the string. indexOf returns -1 if the value is note present. Then you assign the value to be the string with that value removed.
Rather than over-write your previous textbox selection, add to it:
textbox.value += ", " + dropdown1.value;
Related
I am adding values from a select input element to a textarea. How can I then add conditions to this so that if a certain option value is selected, it is always added at the end of all others?
HTML
<p>
<select name="selectfield" id="selectfield">
<option value="" selected>- Select -</option>
<option value="HTML/">HTML/</option>
<option value="CSS/">CSS/</option>
<option value="JQUERY/">JQUERY/</option>
</select>
</p>
<textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>
jQuery
$("#selectfield").on("change", function() {
var $select = $(this);
$("#info").val(function(i, val) {
return val += $select.val();
})
});
In this example, I would like "HTML/" to always be at the end of the textarea regardless of when it is selected.
FIDDLE
When you set the textarea's value, compare what the value of the select is. If it is the string you want to be added at the end, then add it to the end of the value otherwise add it at the beginning.
if($select.val()==="HTML/")
return val = val + $select.val();
else
return val = $select.val() + val;
https://jsfiddle.net/qshcr01a/
Above is smarter but this also works:
$("#selectfield").on("change", function() {
var $select = $(this);
$("#info").val(function(i, val) {
if (val=="HTML/"){
return $select.val()+"HTML/";
}else{
if(val=="JQUERY/HTML/"){
return "CSS/JQUERY/HTML/";
}else if (val=="CSS/HTML/"){
return "JQUERY/CSS/HTML/";
}else{
return val+= $select.val()
}
}
})
});
How can I get 2 different variables from select box and hidden inputs in jquery, i.e:
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text1">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text2">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text3">
so I have 3 select boxes with 3 hidden inputs, how can I get the value of each select boxed and the text that is attached to? i.e: if I select like this:
Select item is 1 and text is Text1
Select item is 3 and text is Text2
Select item is 2 and text is Text3
Thanks in advance
function getValues() {
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
});
}
If you want to list the values on change:
$('select.startID,input[type="hidden"]').change(getValues);
Demo (modified a bit):
http://jsfiddle.net/6ev9evew/
NOTE
The updates below are not answers for the original question, but the question's author keeps posting extra questions in the comments! So the solution is above!
UPDATE:
As I can understand this is what you looking for:
function getValues() {
var me = this;
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
if (el === me) return false;
});
}
So basically we stop the loop at the actual element. But it works only if you pass this function to an event handler.
DEMO 2: http://jsfiddle.net/6ev9evew/1/
UPDATE 2:
So, according to the third question, this is a version of the implementation. As I mentioned below in the comments section, there are multiple ways to implement it. This implementation uses that the array indexes are always in order.
function getValues() {
var result = [];
var me = this;
$('select').each(function (idx, el) {
var $el = $(el);
result[10*$el.val()+idx]=("Select item is " + $el.val() + " and text is " + $el.next('input[type="hidden"]').val()+'<br />');
if (me === el) return false;
});
$('#res').html(result.join(''));
}
$('select.startID,input[type="hidden"]').change(getValues);
DEMO 3:
http://jsfiddle.net/6ev9evew/2/
But you can also implement it with array.sort(fn) but than you do a second iteration on the result set.
Anyway if you have more than ten selects in your real code, don't forget to modify the multiplier at result[10*$el.val()+idx] !
If you want to know the value of the changed select (when the user selects a value on any of them) and also get the value of the input type hidden which is next to it, that's the way:
$('.startID').on('change', function () {
var sel = $(this).val();
var hid = $(this).next('input[type=hidden]').val();
console.log('Select item is ' + sel.toString() + ' and text is ' + hid.toString());
});
Demo
UPDATE
To achieve what you've asked in the comments, you can do it like this:
// Create two arrays to store the values.
var sel = [];
var hid = [];
$('.startID').on('change', function () {
// Put the selected values into the arrays.
sel.push($(this).val());
hid.push($(this).next('input[type=hidden]').val());
console.log(sel);
console.log(hid);
for (var i = 0; i < sel.length; i++) {
console.log('Select item is ' + sel[i].toString() + ' and text is ' + hid[i].toString());
}
});
Demo
I have a Select Box and a Text Field input box. Currently when the User selects a value from the Select Box, then the selected value is inputted into the Text Field input box.
<select name="nSupervisor" id="iSupervisor" onchange="PopulateUserName()">
<option value="fff">fff</option>
<option value="test1">test1</option>
<option value="dd">dd</option>
</select>
<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
field.value = dropdown.value;
}
Jsfiddle
http://jsfiddle.net/Hx6J5/1/
Currently it only takes one input.
I would like it to append inputs so the field will accept more than one select value, so if the User selects "fff", "fff" will get inputted into the field.
If the User then selects "dd", the field.value should become "fff/dd" with the "/" being the separator.
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
$('field').val($('field').val() + dropdown.value);
}
I have tried this but it doesn't append.
You need to give field without quotes. If field is given in quotes jQuery will try to find elements with tag name field.
Live Demo
$(field).val($(field).val() + dropdown.value);
Using pure JS:
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
if ( field.value == "" ){
field.value = dropdown.value;
}else{
field.value += "/" + dropdown.value;
}
}
See the working code at:
JSFiddle
I suggest to use multi select jquery plugin:
http://harvesthq.github.io/chosen/
I have some options that I am adding to a web form and to clean up the HTML a bit I am using some scripts to populate the options for some of the select boxes. I need to show/hide some divs based on what is selected and it is working correctly for one of the selects that has the hardcoded HTML options. However, for the other dropdown that I am populating via a script and some JSON it is not showing or hiding the div on change. Anyone see what I am doing wrong?
JS Fiddle
if you choose member +1 guest then the one div shows as it should. But the other never shows the other div!
Here is the HTML:
<div id="tickets">
<label for="group1">Number of Tickets: <span class="req">*</span></label>
<select class="group1_dropdown" id="group1" name="group1">
<option value="0">-- Please select --</option>
<option value="1">Member</option>
<option value="2">Member + 1 Guest</option>
<option value="3">Member + 2 Guests</option>
<option value="4">Member + 3 Guests</option>
</select>
<label class="visuallyhidden">Year</label>
<select id="yearSelectionBox2" class="stringInfoSpacing">
<option value="0" selected="selected">Year</option>
</select>
</div>
<div id="payMethod">
<div class="header"> PAYMENT METHOD </div>
<div id="payOptions">
<div id="payInfo">
<div id="pay0" class="paymentinfo">
<p>PAYMENT INFO OPTION 1</p>
</div>
</div>
</div>
</div>
<div id="pay222" class="tacos">
<p>Years Data</p>
</div>
Here are the scripts I am using:
var YearListItems2= "";
for (var i = 0; i < modelYearJsonList2.modelYearTable2.length; i++){
YearListItems2+= "<option value='" + modelYearJsonList2.modelYearTable2[i].modelYearID + "'>" + modelYearJsonList2.modelYearTable2[i].modelYear + "</option>";
};
$("#yearSelectionBox2").html(YearListItems2);
//The div is not showing/hiding as it should
$("#yearSelectionBox2").change(function () {
var str = "";
str = parseInt($("select option:selected").val());
if(str == 2013)
$("#pay222").show('slow');
else
$("#pay222").hide('fast');
});
//This one works as it should
$("#group1").change(function () {
var str = "";
str = parseInt($("select option:selected").val());
if(str == 2)
$("#payMethod").show('slow');
else
$("#payMethod").hide('fast');
});
Your select element selector is wrong in the change event handlers, this refers to the select element that was changed use that to refer to the element instead of using another selector
$("#yearSelectionBox2").change(function () {
var str = parseInt($(this).val());
if (str == 2013) {
$("#pay222").show('slow');
} else {
$("#pay222").hide('fast');
}
});
You have used $("select option:selected") to get the selected value, which will always return the value of the first select element instead of the current one, use $(this).value() instead.
Note: The same mistake is there in the group1 handler also, it is working now because that is the first select in the given page now, when a new select is added before that this will fail.
Your select element selector is wrong. Either you should use $(this) or select element id(becuase id's will be unique).
$("#yearSelectionBox2").change(function () {
var str = "";
str = parseInt($(this).val());
if(str == 2013)
$("#pay222").show('slow');
else
$("#pay222").hide('fast');
});
DEMO
or
$("#yearSelectionBox2").change(function () {
var str = "";
str = parseInt($("select#yearSelectionBox2 option:selected").val());
if(str == 2013)
$("#pay222").show('slow');
else
$("#pay222").hide('fast');
});
DEMO
In your code just change
This line :
str = parseInt($("select option:selected").val());
To:
str = parseInt($("select#yearSelectionBox2 option:selected").val());
I have a multiselect dropdown inside a table
<td>
<select multiple="multiple" name="multiple" id="multiple" class="required">
</select>
</td>
The option values are populated with json data.
for(var i=0;i<jsonString.length;i++){
var name=jsonString[i].Name;
$('#multiple').append('<option value=' + name + '>' + name + '</option>');
}
When the user start selection i am trying to display each selected item inside a paragraph
<script>
function displayVals() {
var multipleValues = $("#multiple").val() || [];
$("p").html( " <b>Selected Properties:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
But in the paragraph i get just one word per selection, not the complete name. (Say If i select "some text" i get only "some"). Can somebody point out where is the error?
While populating with JSON data use
<option values= > instead of `<option value>
Working fine for me now.`