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/
Related
I have the following
<select id="quantity_select{$item.id}"
onchange="update_quantity({$item.id}, {$item.quantity});" name="item_quantity_select">
<option name="quantity_1">1</option>
<option name="quantity_2">2</option>
<option name="quantity_3">3</option>
.
.
.
<option name="quantity_more">10+</option>
</select>
My desired behaviour is that when the user selects the option "quantity_more", the select tag disapears and instead a <input type="text" value="{$item.quantity}" /> appears. I believe this must be done with javascript,is there an easy way to do it?
You can't change a select dropdown into an input of type text. I suggest to add an additional input field and set it's visibility to hidden / display to non and on selection of the "more" option toggle the display attribute.
Define the onchange handler for your select and based on the value input by the user, you can create an input element and append it to the required place in the DOM.
function update_quantity(id, quantity) {
var selectedOption = document.getElementById("quantity_select" + id);
if (selectedOption.value === "10+") {
selectedOption.style.display = "none";
var input = document.createElement("input");
input.value = quantity;
document.querySelector('body').appendChild(input); // If you want to append at the end of the body
}
}
I am creating a form and dynamically populating a field using php so the field value looks like this 01-02-2015-01. I need to prefix the value with a number depending on the value of a select box. So if ( condition ) the prefix will look be 888 so the input value is now 888-01-02-2015-01. I need to do this dynamically so javascript/jQuery is what I need to use. Any help out be appreciated.
Untested code, but probably should work
Html :
<select id='currency'>
<option val='$'>$</option>
<option val='Rs.'>Rs.</option>
</select>
Amount : <input type='text' value='1200' id='amount'/>
Jquery :
$(function(){
$("#currency").change(function(){
var symbol = $(this).val();
var currentValue = $('#amount').val();
$.each(['$','Rs.'],function(i, a){
if(currentValue.indexOf(a)==0){ //if the currentValue starts with any matching symbol, then remove it.
currentValue = currentValue.replace(a,'');
}
});
$("#amount").val(symbol + ' ' + currentValue);
});
//In order to fire change manually, do this
$("#currency").change();
});
I am absolutly new in JavaScript and I have some problem working on a form validation script.
So in my page I have some input field such as:
<input id="kmProjectInfo_name" class="" type="text" value="" size="19" name="kmProjectInfo.name">
and I use the following function to get the value from this input field using document.getElementById('kmProjectInfo_name').value and to check is this value is
considerable valid for my pourpose:
function validateForm() {
alert(document.getElementById('selectCountry').value)
// VALIDAZIONE DEL PROJECT NAME:
if( document.getElementById('kmProjectInfo_name').value == "" )
{
alert( "Please provide a valid project name" );
//document.myForm.Name.focus();
document.getElementById('kmProjectInfo_name').focus();
return false;
}
Ok, this work fine but into my form I have also this field that need to be validate:
<select id="selectStatus" onchange="checkStatus(this)" name="kmProjectInfo.status.idProjectInfoStatus">
<option value="0">-- Please Select --</option>
<option id="aui_3_2_0_1240" value="1">Closed</option>
<option id="aui_3_2_0_1226" value="2">Active</option>
<option value="3">Testing</option>
<option value="4">Starting</option>
</select>
So now I need to accesse to the value into the value attribute (for example 0,1,2,3,4) or to the inner text of the option tag (for example: "-- Please Select --", "Closed", "Active", "Testing", "Starting").
Can I do this thing using JavaScript? How can I implement it?
Tnx
Try this
var el = document.getElementById("selectStatus");
var value = el.options[el.selectedIndex].value; // get value (1, 2, 3, ...)
var text = el.options[el.selectedIndex].text; // get text (Closed, Starting....)
Pure Javascript
This allows to acces the innerHtml attribute and whatever its content is.
var myInnerHtml = document.getElementById("forloop").innerHTML;
Using JQuery
.text() or .html() instead of .innerHTML
Yes, you can get the selected index of the select element, and then get the option value based on that:
var select = document.getElementById("kmProjectInfo_name");
var index = select.selectedIndex;
var value = select.options[index].value; //0, 1, 2, 3, 4
I have INPUT fields on my form which I want to collect the data input from them and store them in an ARRAY to then feed into a SELECT OPTION This is what I have so far, when it is used in the form it doesnt pick up the value from the INPUT boxes and the SELECT shows 2 empty rows, but has an ID against those rows as when I ouput the SELECT into another INPUT further on in my form it will show either 0 or 1.
How can I get the value input from the INPUT into the SELECT, also how can I then show the SELECTED option afterwards?
var MySelectOptions = [document.getElementById("inpbox1").value, document.getElementById("inpbox2").value];
$.each(MySelectOptions, function(key, value) {
$('#theselectbox').append($("<option/>", {
value: key,
text: value
}));
});
this is how I output from the SELECT, I would normally use the second example, but I don't know how to get the SELECTED Option within the code above
$(function() {
$("#theselectbox").change(function(){
var CustomerName = document.getElementById("theselectbox").value;
$('#customername').val(CustomerName);
});
});
How I normally get the SELECTED Option
$(function() {
$("#theselectbox").change(function(){
var CustomerName = $('option:selected', this).attr('theselectoption');
$('#customername').val(CustomerName);
});
});
You can append a new option with a value to select box as:
$('#theselectbox').append('<option value="'+inputValue+'">'+inputValue+'</option>');
And, you can show the selected option by using its value as:
$('#theselectbox').val(inputValue);
// Here you have the list of inputs, from which you will get values
// I will use classes, you can use ids
var inputs = ["input1", "input2"];
// The select to which you will paste the values
var sselect = $(".select-class");
for(var i = 0; i < inputs.length; i++){
var e = $("." + inputs[i]);
sselect.append("<option>"+ e.val() +"</option>");
}
// Now you can just put value to select
sselect.val("selected_value");
How select value from input
<input type="text" class="js-svalue" placeholder="Select value">
Now js
var input = $(".js-svalue");
input.on("change", function(){
sselect.val(input.val());
});
my select option has value & text
<select id="roomType" class="roomType" name="roomType">
<option selected="selected" value="N/A">--Select--</option>
<option value="25">Deluxe</option>
<option value="26">Standard</option>
</select>
according to some validation it needs to selected value.
my js code
//This is some validation method to make default
$(".roomOccupanice").each(function(){
var $t = $(this),
$select = $t.next().find('select');
if ($t.text().toLowerCase() == roomOccOffline.toLowerCase()){ // this is met condition correctly
$select[0].selectedIndex = $select.find('option').index($select.find('option[value^="'+roomTypeOffline+'"]')[0]);
//roomTypeOffline = "Deluxe" i need to make this as selected 1
}
});
As far i understood, you get a text "Deluxe" and with it you need to select the value "25".
If that's the case, i would suggest you to use Jquery selector :contains()
JQuery:
var roomTypeOffline = "Deluxe";
//get the option value that contains the text Deluxe
var selectValue = $("#roomType option:contains('"+roomTypeOffline+"')").val();
//Select that option
$("#roomType").val(selectValue);
JsFiddle