How can I show the value of the selected items in the textbox using javascript?
// MY LIST
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" />
I came up with this javascript code
function showgroup_id () {
$('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selected-value = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
selectedselectedItem.push(myList[i].value);
}
}
}
When I tried, it doesn't work.. anyone can help me please?
You can use onchange event to change the textbox content with changing select element.
HTML :
<select id="selectBox">
<option>A</option>
<option>B</option>
</select>
<input type="text" id="messageTextBox" />
javaScript :
var selectBox = document.getElementById("selectBox");
selectBox.onchange = function(){
var textbox = document.getElementById("messageTextBox");
textbox.value = this.value;
};
jsFiddle
Your Solution :
HTMl :
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
javaScript/jQuery :
function showgroup_id () {
var result = "";
var selectedItem = $('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selectedValues = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
//selectedselectedItem.push(myList[i].value);
//alert(myList[i].text);
result = result + " " + myList[i].text;
$("#selectedvalue").val(result);
}
}
}
jsFiddle
Try this :
give some id to button and remove onclick
<button id="getValue" type="button" value="Get Value">Get Value</button>
bind onclick event to button as shown below
$('#getValue').click(function(){
var text = $('#list option:selected').text();
$('#selectedvalue').val(text);
});
Try this,
<html lang="us">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script>
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
</script>
</head>
<body>
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
</body>
replace your javascript code with the following:
function show_value() {
document.getElementById("selectedvalue").value = document.getElementById( "list" )[ (document.getElementById( "list" )).selectedIndex ].text;
}
The show_value() function will be called when the button is clicked. Inside the function, I have set the value of the textbox with the value of the select list.
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
Related
document.querySelector('#submit').onclick = () => {
document.querySelectorAll('.merge').forEach((select) => {
const option = document.createElement('option');
option.innerHTML = document.querySelector('#text-get').value;
document.querySelector('.merge').append(option);
})
return false;
};
<select id="task" class="merge">
</select>
<select id="task2" class="merge">
</select>
<form>
<input type="text" id="text-get">
<input type="submit" id="submit">
</form>
I would like to add option in both the drop down but with same input tag
value.
There is something wrong with JavaScript code.it is not adding to any.
You are close. Try this way :
const selects = document.querySelectorAll('.merge'), // Caching elements so the DOM won't be queried constantly
input = document.querySelector('#text-get');
document.querySelector('#submit').onclick = () => {
selects.forEach(select => {
let option = document.createElement('option');
option.innerHTML = input.value;
select.append(option)
});
return false;
};
<select id="task" class="merge">
</select>
<select id="task2" class="merge">
</select>
<form>
<input type="text" id="text-get">
<input type="submit" id="submit">
</form>
My concept is to create maximum 20 blocks( it contains some input field) on button click "Add", If you tap on "Add" button then new block could be added, that was successfully done. Now i want to remove the block which is created on "Add" button click.
Eg: If user is create 5 block by using in "ADD" button. If user taps on "Minus" button, in Block 2, then Block 2 should be removed from the list and count of the block should be updated correspondingly.
http://www.w3schools.com/code/tryit.asp?filename=FADO51NINJMD
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
Set id while creating div node
divtest.setAttribute("id", "div" + i);
For minus function pass created id number in onclick
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
And set minus function as
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
var i = 1;
$(document).ready(function () {
//$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.setAttribute("id","div" + i);
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="commentForm" method="post" action="">
<div id="room_fileds">Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div><br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
You can just remove the label parent on click. See the minus function content.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
//This is the clicked label, so we remove the parent (the div)
$(this).parent().remove();
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
<div class="removePhoneDiv">
<input type="button" value="Add Text Field" id="add_button" >
<ul style="list-style:none;" id="phoneNumberList">
<li class='Textbox1' style="float:left;width:100%;">
<div style=" margin-top: 2%; " class='form-group' id='answerdiv'>
<input type='text' class='input_phone form-control1'>
<img style="float:left;" src="images/close.png" class="remove_phone_number">
</div>
</li>
</ul>
</div>
<script>
var wrapper = $(".form-group");
$("#add_button").click(function (e) {
e.preventDefault();
$("#phoneNumberList").append("<li class='Textbox1'><div class='form-group' id='answerdiv'><input type='text' class='form-control1' ><img src=\"images/close.png\" class=\"remove_phone_number\"></div></li>");
});
$(".removePhoneDiv").on("click", ".remove_phone_number", function (e) {
e.preventDefault();
$(this).parent('div').parent('li').remove();
})
</script>
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});
I am trying to add two functions calculate1() and calculate2(). Both functions are taking values from function populate(). Is the code wrong? Once I enter an amount on both functions, the result is total amount undefined.
<form>
Car:
<select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Car:
<select id="slct2" name="slct2">
</select>
<label> Amount <input style="width:10%" type="number" name="amount1" id="amount1" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer1" id="answer1"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
</form>
<!--Starts 2 selection-->
<form>
Food:
<select id="slct1a" name="slct1a" onchange="populate('slct1a','slct2a')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Food:
<select id="slct2a" name="slct2a">
</select>
<label> Amount <input style="width:10%" type="number" name="amount2" id="amount2" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer2" id="answer2"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
<p id="ansCAL"></p>
</form>
<input type="reset" onclick="resetFunctions()" value="Reset">
</script>
var t = total1 + total2;
function result() {
document.getElementById('ansCAL').value = calculate1() + calculate2();
}
function populate(select1, select2)
{
var Brand1 = document.getElementById(select1);
var Brand2 = document.getElementById(select2);
Brand2.innerHTML = "";
if(Brand1.value == "Fiat")
{
var optionArray = ["|","4000|Uno","5000|Ritmo","6000|Panda"];
}
else if(Brand1.value == "Dodge")
{
var optionArray = ["|","4000|Avanger","5000|Challengere","6000|Charger"];
}
else if(Brand1.value == "Ford")
{
var optionArray = ["|","7000|Mustang","8000|Shelby","focus|Focus"];
}
for(var option in optionArray)//the options within the optionArray
{
var pair = optionArray[option].split("|");//in tha variable pair is stored both value and label
var newOption = document.createElement("option");// option in the bracket is used to create new options or you can insert divs paragraph etc
newOption.value = pair[0];//pair 0 gives the value
newOption.innerHTML = pair[1];//pair 1 gives the label
Brand2.options.add(newOption);
}
}
function calculate1() {
Brand1 = document.getElementById('slct1').value;
Brand2 = document.getElementById('slct2').value;
multi=document.getElementById('amount1').value;
total1=parseInt((Brand2)*multi/100);
document.getElementById('answer1').value=total1;
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function calculate2() {
Brand1 = document.getElementById('slct1a').value;
Brand2 = document.getElementById('slct2a').value;
multi=document.getElementById('amount2').value;/*to change accordingly amount1*/
total2=parseInt(((Brand2)*multi)/100);
document.getElementById('answer2').value=total2;/*to change accordingly amount1*/
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function resetFunctions() {
//using the array forEach method on the form
Array.prototype.forEach.call(document.forms,function(el,idx,array){
//the method parameters are element, index and the array
// we loop through all the forms and invoking reset()
el.reset();
});
result();
}
function rstFunction()
{
document.getElementById("ansCAL").innerHTML = "<br>Total amount" + result().value;
}
</script>
The answer was to increase the total in every calculate function. Example (total + total1). Removed the variable t and declared the totals in the printout section.
I am using javascript to add values from an input text to a listbox (select). For some reason, the text values inserted goes to the bottom instead of the top. How can I get it to start from the top please? Below is the code I'm using;
var i = 0;
function addValue() {
var textValue = document.getElementById("txtValue");
var v = textValue.value;
AddOpt = new Option(v, v);
document.getElementById("lstValues").options[i++] = AddOpt;
v = "";
return true;
}
Html Markup:
<input id="txtValue" type="text" />
<input id="btnAdd" type="button" value="Add" onclick="addValue();" />
<input id="btnRemove" type="button" value="Remove" onclick="deleteValue();" />
<br />
<select id="lstValues" multiple="multiple" style="width: 140px; height: 100px">
<option value="empty"></option>
</select>
Try changing this line
document.getElementById("lstValues").options[i++] = AddOpt;
with
document.getElementById("lstValues").add(AddOpt,0)
Fiddle