I am trying to add buttons dynamically to a division when a combobox item is clicked and I want to use the onclick() function rather than onchange() function
Here is my HTML code :
<div class = "row" id = "activityRow">
<select class="combobox" id = "activityCombobox" onclick="addButtons()">
<option value="" selected="true" style = "display:none;">-- Choose your Activity --</option>
<option value="val1" >Val1</option>
<option value="val2">Val2</option>
<option value="val3">Val3</option>
<option value="val4">Val4</option>
</select>
</div>
<div class="row" id = "addonRow">
</div>
Jaavascript Code:
var list = [];
function addButtons() {
var e = document.getElementById("activityCombobox");
var sel = e.options[e.selectedIndex].text;
var buttonName = " ";
buttonName += sel;
list.push(sel);
var funcName = sel;
if(sel == "Val4")
funcName = "Places";
jQuery('#addonRow').append('<button type = "button" id = "addonButton'+funcName+'"><i class="glyphicon glyphicon-remove-sign" onclick = "removeButtons'+funcName+'()"></i>'+buttonName+'</button>');
}
This code works fine in Chrome. But when I run it in mozilla, one button is added every time I click the combobox for dropdown and another button for the selected value. So basically two buttons are added whenever I try to add one button.
I want a way to add buttons using onclick() not onchange().
Related
I have a dropdown list which looks like this:
<select id="cityID">
<option value="mission">Mission</option>
<option value="bakersfield">Bakersfield</option>
<option value="knoxville">Knoxville</option>
</select>
And my code to get the value is:
var select = document.getElementById('cityID');
var text = select.options[select.selectedIndex].text;
text.innerHTML = cityID.value;
text.onchange = function(e) {
text.innerHTML = e.target.value;
}
The value always chooses the first item. How can I get it to accept the cityID and change the page,
I'm sure its a formatting or typo or wrong value ?
onchange event is trigger from the select element
your text variable seems to be an HTML element because you set its innerHTML property
a select element has a "value" property so you don't need to get it from the selectedIndex of the options.
var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
text.innerHTML = select.value;
select.onchange = function(e) {
textEl.innerHTML = e.target.value;
}
<select id="cityID">
<option value="mission">Mission</option>
<option value="bakersfield">Bakersfield</option>
<option value="knoxville">Knoxville</option>
</select>
<p id="text"></p>
You could achieve this using addEventListener also.
var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
select.addEventListener("change", (e) => {
textEl.innerText = e.target.value;
})
I am creating one drop down and in that dropdown I have a option called others, when others is selected, a new text box appear and user can enter any value. Now i want this entered value to be added to my drop down options.
Till now I could implement the first half and i am now unable to add the new value back to my drop down.
function CheckColors(val){
var element=document.getElementById('popup');
if (val=='others') {
element.style.display='block';}
else {
element.style.display='none';
}
}
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
<option>40%</option>
<option value="others" >others
</option>
<input type="button" name="button" value="Add"/>
</select>
<input type="text" id="popup" style='display:none;'/>
You would need to get the value that was added to the text box and create a new element to store in side the select.
Here, I am using createElement to create a new option when the user clicks add. Then, I'm setting it's content using innerText to what was added to the input.
I've done this when clicking the add button but it could be used elsewhere. I've also added a check so we don't add an empty value as an option.
const CheckColors = (val) => {
const element = document.getElementById('popup')
if (val === 'others') {
element.style.display = 'block'
} else {
element.style.display = 'none'
}
}
const addBtn = document.querySelector('input[type="button"]')
// Add a listener for when the add button is clicked
addBtn.addEventListener('click', () => {
// get our dropdown and text box
const dropdown = document.getElementsByTagName('select')[0]
const element = document.getElementById('popup')
// Only add the value to the dropdown if it's not blank
if (element.value.length !== 0) {
// create the new option to add to our select
const option = document.createElement('option')
// Add the text that was in the text box
option.innerText = element.value
// Optionally give the option a value
option.value = 'something'
// Let's select this option too
option.selected = true
// Add the option to the select
dropdown.appendChild(option)
}
})
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
<option>40%</option>
<option value="others" >others
</option>
<input type="button" name="button" value="Add"/>
</select>
<input type="text" id="popup" style='display:none;'/>
I'm trying to display a message to the user if they decide not to choose an item from the dropdown menu using strictly vanilla JS. Instead, I get an error in the console that says cannot read property 'selectedIndex' of null. I cannot see what I'm doing wrong.
How can I rectify this problem?
Here's HTML:
<form>
<div>
<label>Drop Down Menu
<select name="menu">
<option value="">---</option>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select>
</label>
</div>
</form>
Here's JS:
var myForm = document.getElementsByTagName("form");
myForm.id = "the-form";
var submitButton = document.getElementsByTagName("button")[1];
submitButton.id = "submit-button";
function formValidation() {
var select = document.getElementsByTagName("select");
select.id = "myMenu";
var selectId = document.getElementById("myMenu");
if(selectId.selectedIndex <= 0) {
console.log("a menu item must be selected!");
}
alert("Chosen!");
}
submitButton.onclick = myForm.onsubmit = function() {
formValidation();
};
You are targeting a DOM node by the id of "myMenu" here:
var selectId = document.getElementById("myMenu");
while the select you want to target has id "menu". Therefore, you have to change either the id in the JS selection or the select's id in the html.
In a HTML form I have a check box like-
<select class="text" name="department" id="department">
<option value="">Select department</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
Now, I wish to give user capability to add or delete departments in the list. He/She may add branched D and E or may delete branch B.
I wrote a Javascript function to list all the branch names as checkboxes to choose the elements to delete-
function deletefield() {
var container = document.getElementById('drop_down');
container.innerHTML="";
for(i=0; i<passed_array.length; i++) {
var check = document.createElement("INPUT");
var br = document.createElement("BR");
check.setAttribute("type","checkbox");
check.setAttribute("value",passed_array[i]);
var label = document.createElement('label');
label.htmlFor = "id";
label.appendChild(document.createTextNode(passed_array[i]));
container.appendChild(check);
container.appendChild(label);
container.appendChild(br);
}
}
But I have no idea how to proceed it forward to delete the selected branches.
On surfing Internet I came across this code
function remove(id) {
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
I don't know if it can help with dropdown or not.
Could someone help me decide which is the better approach and how should I proceed with it?
Yoy may select the specific option you want to delete. Using jQuery would be as follows
var removeChild = function(branchToDelete) {
$("option[value='"+branchToDelete+"']").remove();
}
To add new options to the dropdown menu you must append the new options to the dropdown menu
var addChild = function(newBranch) {
$("#department").append("<option value='"+newBranch+"'>"+newBranch+"</option>");
}
See also Select2Js Plugin. It has plenty of good funcionalities related to dropdown menus that could be useful for you
HTML:
<a id="add">Add More</a>
JavaScript:
var i = 1;
$("#add").click(function(){
var appendFields = '<tr>';
appendFields += '<td><select id="dropdown_'+i+'" name="dropdown_name[]"><option value="1">One</option></select></td>';
appendFields += '<td><a style="color: red; cursor: pointer;" class="remCF">Remove</a></td>';
appendFields += '</tr>';
$("#table_id").append(appendFields);
i++;
});
$("#table_id").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
How can you get the selected value from drop down list using JavaScript? I have tried the following but it does not work.
var sel = document.getElementById('select1');
var sv = sel.options[sel.selectedIndex].value;
alert(sv);
It is working fine with me.
I have the following HTML:
<div>
<select id="select1">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
<br/>
<button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>
And the following JavaScript:
function GetSelectedItem(el)
{
var e = document.getElementById(el);
var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
alert(strSel);
}
See that you are using the right id. In case you are using it with ASP.NET, the id changes when rendered.
Direct value should work just fine:
var sv = sel.value;
alert(sv);
The only reason your code might fail is when there is no item selected, then the selectedIndex returns -1 and the code breaks.
Hope it's working for you
function GetSelectedItem()
{
var index = document.getElementById(select1).selectedIndex;
alert("value =" + document.getElementById(select1).value); // show selected value
alert("text =" + document.getElementById(select1).options[index].text); // show selected text
}
Here is a simple example to get the selected value of dropdown in javascript
First we design the UI for dropdown
<div class="col-xs-12">
<select class="form-control" id="language">
<option>---SELECT---</option>
<option>JAVA</option>
<option>C</option>
<option>C++</option>
<option>PERL</option>
</select>
Next we need to write script to get the selected item
<script type="text/javascript">
$(document).ready(function () {
$('#language').change(function () {
var doc = document.getElementById("language");
alert("You selected " + doc.options[doc.selectedIndex].value);
});
});
Now When change the dropdown the selected item will be alert.
I would say change var sv = sel.options[sel.selectedIndex].value;
to var sv = sel.options[sel.selectedIndex].text;
It worked for me. Directing you to where I found my solution
Getting the selected value dropdown jstl
According to Html5 specs you should use --
element.options[e.selectedIndex].text
e.g. if you have select box like below :
<select id="selectbox1">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
<option value="3">Third</option>
</select>
<br/>
<button onClick="GetItemValue('selectbox1');">Get Item</button>
you can get value using following script :
<script>
function GetItemValue(q) {
var e = document.getElementById(q);
var selValue = e.options[e.selectedIndex].text ;
alert("Selected Value: "+selValue);
}
</script>
Tried and tested.