function change() {
var select = document.getElementById("slct");
var divv = document.getElementById("container");
var value = select.value;
for (i = 0; i <value; i++) {
toAppend += "<input type='textbox' >";
}
divv.innerHTML=toAppend;`enter code here`
return;
}
I Have this code and I am calling it by dropdown menu
<select id="slct" onchange="change();">
<option value="0"> select value </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
but its not showing anything
Declare var toAppend='' before the for loop
Related
So I have a very complex form that contains selects with the same options that repeat probably around 300 times. The following is a very slimmed down example of that.
<select name="HelmAtt1">
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
</select><input type="number" name="Ha1val" value="0"><br>
Doing it this way is obviously very code intensive and not easily editable.
Is it possible to create a function that will display the options inside of a select for me, so I can end up with something like these two?
<select name="HelmAtt1">
printHTML();
</select><input type="number" name="Ha1val" value="0"><br>
<script>
function printHTML()
{
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
}
</script>
printHTML(HelmAtt1);
<input type="number" name="Ha1val" value="0"><br>
<script>
function printHTML(val)
{
<select name="val">
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
</select>
}
</script>
I'm not sure if its possible and any research I've found doesn't specify this exact problem or doesn't solve the issue so here I am.
IMHO you should do that on the backend layer when you render your template, but here goes a frontend solution:
function addOptions(classname) {
let elements = document.getElementsByClassName(classname);
for (let i=0; i<elements.length; i++){
let option = document.createElement('option');
option.innerText = 'your option';
option.value = 'your value';
elements[i].appendChild(option);
}
}
addOptions('foo');
Foo <select class="foo"></select>
Bar <select class="foo"></select>
Baz <select class="foo"></select>
<html>
<body>
<select name="HelmAtt1" id="select">
</select>
<script>
var html = '<option value="">default</option>';
for (var i = 0; i<10; i++)
{
html += '<option value="' + i + '"';
html += '>' + i + '</option>';
}
document.getElementById('select').innerHTML=html;
</script>
</body>
</html>
I'm trying to retrieve a value from a select box in my HTML table. How can I select the selected value?
What I've tried so far:
this.cells[14].innerHTML;
this.cells[14].children[0].innerhtml;
this.cells[14].children[0].innerText;
The last one .innerText returns all the items in my select box......
var table2 = document.getElementById('table_items_program');
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function () {
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("select").value = this.cells[14].children[0].innerText;
}
}
<td><select class="selectpicker" multiple>
<?php while ($row9 = mysqli_fetch_assoc($result9)):; ?>
<option value="<?php echo $row9['id']; ?>"><?php echo $row9['id'];?>
</option>
<?php endwhile; ?>
</select></td>
<input style="display: inline" id="id" name="id">
<input style="display: inline" id="select" name="select">
The selected value from my selection box in my HTML table
How can I select the selected value?
You can get the selected index with the method HTMLSelectElement.selectedIndex
But if I understand your trouble. You try to get the current values of your select. So you need to get the value of your selected options.
You can do it like:
document.getElementById('mySelect').onchange = function() {
let options = this && this.options;
let selectedValues = []
for (var i = options.length; i--;) {
let opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
console.log(selectedValues)
}
<select id="mySelect" multiple>
<option value="a"> a </option>
<option value="b"> b </option>
<option value="c"> c </option>
</select>
Implementation into your code example
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function() {
document.getElementById("id").value = this.cells[0].innerHTML;
var options = this && this.cells[14].children[0].options;
var selectedValues = []
for (var i = options.length; i--;) {
var opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
document.getElementById("select").value = JSON.stringify(selectedValues);
}
}
so simple...
ShowSelected.onclick = function()
{
console.clear()
document.querySelectorAll('.selectpicker option:checked').forEach(opt=>console.log(opt.value))
}
.selectpicker {
vertical-align: text-top;
}
choose one or more :
<select class="selectpicker" multiple size=6 >
<option value="a"> A element</option>
<option value="b"> B element</option>
<option value="c"> C element</option>
<option value="d"> D element</option>
<option value="e"> E element</option>
<option value="f"> F element</option>
</select>
<button id="ShowSelected"> Show Selected</button>
Welcome to Stack Overflow!
So, your <select> has the class selectpicker. We can use this to select your <select>!
Try the following to get your value:
document.querySelector(".selectpicker").value;
Or, if you have multiple <select>'s, you can use
[...document.querySelectorAll(".selectpicker")].forEach(opt => {
console.log(opt.value)
});
Hope that clears things up a little.
I have a set of checkboxes from
<input type="checkbox" name="parts_hoses" id="parts-cb1" value="1">
through id="parts-cb6"
I have a select box of #send-product
<select name="send_product" id="send-product">
<option value="wall-mounted" selected>Wall-mounted (Default)</option>
<option value="freestanding">Freestanding</option>
<option value="third_party">Third Party</option>
</select>
that when it is on its default value, "wall-mounted", the checkboxes are enabled (as they are by default), but when I switch that to another option in the list... I'd like to disable the checkboxes.
Here is my JS so far (doesn't work):
function switchProduct() {
var checkBoxes = document.querySelectorAll('input[type="checkbox"][id^="parts-cb"]');
var selectBox = document.getElementById('send-product');
if (selectBox.value == 'wall-mounted') {
checkBoxes.disabled = false;
} else {
checkBoxes.disabled = true;
}
}
document.getElementById('send-product').addEventListener('change', switchProduct);
What am I doing wrong? Any help is appreciated!
Here's a fiddle: https://jsfiddle.net/cwkgsuq1/
You're missing to loop your checkboxes Array collection.
plain JS is not jQuery, therefore "checkBoxes.disabled = false;" will not work.
Instead:
for(var i=0; i<checkBoxes.length; i++) {
checkBoxes[i].disabled = false;
}
So your code simplified could look like:
function switchProduct() {
var checkBoxes = document.querySelectorAll('input[type="checkbox"][id^="parts-cb"]');
var selectBox = document.getElementById('send-product');
for(var i=0; i<checkBoxes.length; i++) {
checkBoxes[i].disabled = selectBox.value == 'wall-mounted';
}
}
document.getElementById('send-product').addEventListener('change', switchProduct);
switchProduct();
<select name="send_product" id="send-product">
<option value="wall-mounted" selected>Wall-mounted (Default)</option>
<option value="freestanding">Freestanding</option>
<option value="third_party">Third Party</option>
</select><br><br>
<input type="checkbox" id="parts-cb1" value="1">
<br>
<input type="checkbox" id="parts-cb2" value="1">
<br>
<input type="checkbox" id="parts-cb3" value="1">
I have this form with the following options:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="1">100PHP</option>
<option value="2"> 500PHP</option>
<option value="3"> 1000PHP</option>
<option value="4"> 2000PHP</option>
<option value="5"> 3000PHP</option>
<option value="6"> 4000PHP</option>
<option value="7"> 5000PHP</option>
<option value="8"> 10,000PHP</option>
<option value="others"> others..</option>
</select>
<div class="control-group" id="show" style="display:none;">
When the user selects option 1-8, it will display the amount. I've successfully done that through this javascript:
function showText(){
var value = document.getElementById('options').value;
if(value == '1'){
var amount = document.getElementById("amount");
amount.value = "100";
document.getElementById('show').innerHTML =
"<br><br><font size =+1><b>Amount P 100 </b></font>"
document.getElementById('show').style.display = "block";
}
else if(value == '2'){
var amount = document.getElementById("amount");
amount.value = "500";
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P 500 </b></font>"
document.getElementById('show').style.display = "block";
}
//up to option 8
Now, when the user selects 'others' it will display another input field. The value that the user will input will be the value option 'others':
else if (value == 'others'){
document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> ";
var amount = document.getElementById("other_amount").value;
document.getElementById('show').style.display = "block";
}
Unluckily, I was not successful in getting the value of the second input to be the value of the first input. I hope you could help! Thank you!
First of all, you can improve your code quite a lot:
function showText(){
var value = document.getElementById('options').value;
if(value == '-1'){
//Other
document.getElementById('hidden').style.display = 'block';
}
else {
document.getElementById('hidden').style.display = 'none';
var amount = document.getElementById("amount");
amount.value = value;
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P " + value + "</b></font>"
document.getElementById('show').style.display = "block";
}
}
Where you change your html to:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="100">100PHP</option>
<option value="500">500PHP</option>
<option value="1000">1000PHP</option>
<!-- (...) -->
<option value="-1"> others..</option>
</select>
I'd also suggest adding the "hidden" input for when they choose others already in your html, but set it invisible:
<div id="hidden" style="display:none;"class='control-group'>
<label class='control-label'>Enter Amount</label><div class='controls'>
<input type='text' id='other_amount' name='other_amount' onChange='otherText()'/>
</div>
</div>
Now, when they select others.. with value -1 you want to show an input where they can choose their own value:
if (value == -1) {
document.getElementById('hidden').style.display = 'block';
}
Now we just need the function otherText() which shouldn't be a problem:
function otherText() {
document.getElementById('amount').value = document.getElementById("other_amount").value;
}
Working jsFiddle
I have a below code where if I select one value, it works fine, but now I need such that when I select multiple values from the listbox, i have to get the value of selected values. How do i go about it?
Here is the code,
HTML Code:
<select id="attributeNames" name="attributeNames" size="5" multiple="multiple"
onchange="getUniqueValues(value)">
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
<option value="Banana"> Banana </option>
</select>
JavaScript:
function getUniqueValues(value){
alert(value);
}
For instance:
If I select Apple, then I get alert saying apple, now if I select apple & mango, I have to get the alert having apple & mango values. Facing problem here.
Here is the code: http://jsfiddle.net/5VtE3/2/
Thanks in advance,
Here is an example on how to do it -
HTML -
<select id="attributeNames" name="attributeNames" size="5" multiple="multiple">
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
<option value="Banana"> Banana </option>
</select>
JS -
window.onload = function () {
var listbox = document.getElementById('attributeNames');
listbox.onchange = function () {
for(var index = 0; index < this.children.length; index++) {
if (this.children[index].selected) {
console.log(this.children[index].value);
}
}
};
};
Live Demo.
If you dont mind using jquery, -
function getUniqueValues(){
var k=0;
var selected_list = {};
$('#attributeNames option').is(':selected').each(function(){
selected_list[k++] = $(this).val();
});
alert(selected_list);
}
OR
function getrUniqueValues(){
$('#attributeNames option').is(':selected').each(function(){
alert($(this).val());
});
}
You might want to try checkboxes
<input type="checkbox" name="fruit" value="apple">Apple<br/>
<input type="checkbox" name="fruit" value="banana">Banana
Or you should just try to make:
<select id="attributeNames" name="attributeNames" size="5" multiple="multiple" onChange="getUniqueValues()" >
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
</select>
function getUniqueValues(){
var values = this;
}
Try this:
<select id="attributeNames" onchange="getUniqueValues.call(this)" name="attributeNames" size="5" multiple="multiple">
<option value="Apple"> Apple </option>
<option value="Mango"> Mango </option>
<option value="Orange"> Orange </option>
<option value="Banana"> Banana </option>
</select>
function getUniqueValues(){
for(var i = 0; i < this.options.length; i++){
if(this.options[i].selected)
alert(this.options[i].value);
}
}
jsfiddle: http://jsfiddle.net/5VtE3/7/
function getValue(id) {
var retval = "";
var lstdatabase = document.getElementById(id);
for (var i = 0; i < lstdatabase.options.length; i++) {
if (lstdatabase.options[i].selected) {
if (retval == "") {
retval = lstdatabase.options[i].value;
}
else {
retval = retval + ',' + lstdatabase.options[i].value;
}
}
}
return retval;
}