I have an empty drop down list in HTML. I am trying to add new attribute into the list using .createElement('option') method. However, the item i want to add has name, address, and phone number so how can i add,as an object, into drop down list? Thank you for reading it.
Im not sure if this is what you wanted, I got it from https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add
var sel = document.getElementById("existingList");
var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";
sel.add(opt, sel.options[1]);
[Edit]
Im pretty tierd and the code is not the best. Maybe you can play around with it and see if it fits your code.
var sel = document.createElement("droplist");
var opt1 = document.createElement("OPTION");
var opt2 = document.createElement("OPTION");
var opt3 = document.createElement("OPTION");
var information = {
names: ["nameOne", "nameTwo"],
addresses: ["adressOne", "adressTwo"],
names: ["phoneOne", "phoneTwo"],
informationFunction: function additem(){
opt1.value = "1";
opt1.text = this.addresses[0];
opt2.value = "2";
opt2.text = this.addresses[1];
opt3.value = "3";
opt3.text = this.addresses[3];
sel.appendChild(opt1);
sel.appendChild(opt2);
sel.appendChild(opt3);
}
};
information.informationFunction();
Related
I have a button which allows an ingredient to be added to a database. When the button is clicked, the user can add the name, measurement and unit for the ingredient which is done using Javascript:
function addIngredient() {
var area = document.getElementById("addedIngredient");
var num = document.createElement("p");
numText = document.createTextNode(countIngredient + ". ");
num.appendChild(numText);
area.appendChild(num);
//Ingredient Name
var ingredientNameLabel = document.createElement("p");
ingredientNameLabelText = document.createTextNode("Name");
ingredientNameLabel.appendChild(ingredientNameLabelText);
area.appendChild(ingredientNameLabel);
countIngredient++;
var ingredientNameInput = document.createElement("INPUT");
ingredientNameInput.setAttribute("name", "ingredient_name[]");
ingredientNameInput.setAttribute("type", "text");
ingredientNameInput.setAttribute("class", "form-control");
ingredientNameInput.setAttribute("class", "ingName");
area.appendChild(ingredientNameInput);
//Ingredient Measure
var ingredientMeasureLabel = document.createElement("p");
ingredientMeasureLabelText = document.createTextNode("Measure");
ingredientMeasureLabel.appendChild(ingredientMeasureLabelText);
area.appendChild(ingredientMeasureLabel);
var ingredientMeasureInput = document.createElement("INPUT");
ingredientMeasureInput.setAttribute("name", "ingredient_measure[]");
ingredientMeasureInput.setAttribute("type", "text");
ingredientMeasureInput.setAttribute("class", "form-control");
ingredientMeasureInput.setAttribute("class", "ingMeasure");
area.appendChild(ingredientMeasureInput);
//Ingredient Unit
var ingredientUnitLabel = document.createElement("p");
ingredientUnitLabelText = document.createTextNode("Unit");
ingredientUnitLabel.appendChild(ingredientUnitLabelText);
area.appendChild(ingredientUnitLabel);
var select = document.createElement("SELECT");
select.setAttribute("name", "ingredient_unit[]");
area.appendChild(select);
var option = document.createElement("option");
option.setAttribute("value", "grams");
var value = document.createTextNode("g");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "milimeters");
var value = document.createTextNode("ml");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "kilograms");
var value = document.createTextNode("kg");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "litres");
var value = document.createTextNode("litre(s)");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "slice");
var value = document.createTextNode("slice");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "whole");
var value = document.createTextNode("whole");
option.appendChild(value);
select.appendChild(option);
var option = document.createElement("option");
option.setAttribute("value", "pinch");
var value = document.createTextNode("pinch");
option.appendChild(value);
select.appendChild(option);
}
I am looking to get the unit selected for every ingredient added.
Can anyone tell me how I could do this using PHP?
I am trying the following way:
$units = [];
foreach ($_POST["ingredient_unit[]"] as $key => $unit) {
array_push($units, $unit);
}
This does not work nor does it give an error.
Thanks.
Change the following code:
foreach ($_POST["ingredient_unit[]"] as $key => $unit) {
array_push($units, $unit);
}
And use this instead:
foreach ($_POST["ingredient_unit"] as $key => $unit) {
array_push($units, $unit);
}
And you should be getting a notice when you try to access $_POST["ingredient_unit[]"] since its not defined. If you are not seeing a notice, maybe the error_reporting level is too low. You could use something like the following to active all errors except the deprecated ones:
error_reporting(E_ALL &~ E_DEPRECATED);
Here's a couple of small questions that I need help with...
I am trying to add multiple values to the select/option form but when I do that the javascript function ends up only adding the last one - here are the details for you to check out -
function addFields1(){
var container = document.getElementById("container1");
container.appendChild(document.createTextNode("Institution Name: "));
var name = document.createElement("input");
name.type = "text";
name.id = "name";
name.name = "certificate";
name.size = 25;
name.maxlength = 25;
container.appendChild(name);
var select = document.createElement("select"); //? how do I fix this up
var option = document.createElement("option");
option.value = "College";
option.innerHTML = "College";
option.value = "Community College";
option.innerHTML = "Community College";
option.value = "High School";
option.innerHTML = "High School";
option.value = "Private";
option.innerHTML = "Private";
option.value = "University";
option.innerHTML = "University";
select.appendChild(option);
container.appendChild(select);
}
When I call the function the only value that shows up is the very last one ("University") - the remaining values are not even on the menu when it drops down.
Another (similar) problem I am having is appending <td> and <input> elements and not being able to print any data when the eventhandler is called -
Here's the code for that below -
function aFields1(){
var container1 = document.getElementById("container");
container1.appendChild(document.createTextNode("Company: "));
var td = document.createElement("td");
var company = document.createElement("input");
company.type = "text";
company.id = "company";
company.name = "company";
company.size = 15;
company.maxlength = 15;
td.appendChild(company);
container1.appendChild(td);
container1.appendChild(company);
}
When i remove the td variable and td element, the information prints properly but if I don't do that it doesn't show up at all! Is there something wrong with what I did in this second function?
With the option elements you actually need to re-run the document.createElement('option') otherwise javascript retains a reference to the originally added option element and only updates it (rather than appending a new element). This allows us to re-use the option variable.
The issue with the <td> element is similar... this line container1.appendChild(company); moves the company input element outside of the td element and into the container1 element.
I have cleaned up and fixed both of your functions:
function addFields1() {
var container = document.getElementById("container1");
container.appendChild(document.createTextNode("Institution Name: "));
var name = document.createElement("input");
name.type = "text";
name.id = "name";
name.name = "certificate";
name.size = 25;
name.maxlenth = 25;
container.appendChild(name);
//create select element and the option variable
var select = document.createElement("select");
var option;
//before each option element we reassign the option variable to a new option element and append it to the select before moving to the next option item
option = document.createElement("option");
option.value = "College";
option.innerHTML = "College";
select.appendChild(option);
option = document.createElement("option");
option.value = "Community College";
option.innerHTML = "Community College";
select.appendChild(option);
option = document.createElement("option");
option.value = "High School";
option.innerHTML = "High School";
select.appendChild(option);
option = document.createElement("option");
option.value = "Private";
option.innerHTML = "Private";
select.appendChild(option);
option = document.createElement("option");
option.value = "University";
option.innerHTML = "University";
select.appendChild(option);
//finally, we append the completed select element
container.appendChild(select);
}
function aFields1() {
var container1 = document.getElementById("container");
container1.appendChild(document.createTextNode("Company: "));
var td = document.createElement("td");
var company = document.createElement("input");
company.type = "text";
company.id = "company";
company.name = "company";
company.size = 15;
company.maxlenth = 15;
//append the company input element to the td element
td.appendChild(company);
//append the td element to the container1 element
container1.appendChild(td);
}
JSFIDDLE DEMO
I'm trying to populate number in select - option tag .But my script fills number at only one select tag
HTML :
<div class="form_row">
<label>Week Num</label>
<select class="form_select1" id="weeknum"></select>
<b class="bold1">  TO  </b>
<select class="form_select1" id="weeknum1"></select>
</div>
Javascript :
<script>
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
select1.add(option, 0);
}
</script>
How do i achieve that ?
You can add an element only once to a parent node, so you need to create another option element:
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
option.text = option.value = i;
var option1 = document.createElement('option');
option1.text = option1.value = i;
select.add(option, 0);
select1.add(option1, 0);
}
Here's the JSFIddle.
Try this ...
var option1 = document.createElement('option');
option1.text = option1.value = i;
select.add(option1, 0);
var option2 = document.createElement('option');
option2.text = option2.value = i;
select1.add(option2, 0);
... creating a distinct "option" for each select list. The created elements cannot be reused.
You need to create a distinct option element for each list. A given DOM element can only be in one place in the DOM.
edit: I see it's already answered... well, my first answer :)
try this:
var select = document.getElementById("weeknum");
var select1 = document.getElementById("weeknum1");
for (var i = 52; i >= 1; i--) {
var option = document.createElement('option');
var option1 = document.createElement('option');
option.text = option.value = option1.text = option1.value = i;
select.add(option, 0);
select1.add(option1, 0);
}
element1 = document.createElement("select");
var option1 = document.createElement("option");
option1.value="warm";
option1.innerHTML="warm";
element1.appendChild(option1);
var option2 = document.createElement("option");
option2.value="hot";
option2.innerHTML="hot";
element1.appendChild(option2);
You can set the options selected property
var element1 = document.createElement("select");
var option1 = document.createElement("option");
option1.value = "warm";
option1.innerHTML = "warm";
element1.appendChild(option1);
var option2 = document.createElement("option");
option2.value = "hot";
option2.innerHTML = "hot";
option2.selected = true; // LIKE THIS
element1.appendChild(option2);
FIDDLE
I am working on a dynamic form for my church and I don't have any problems until I try to get the values for the selected index of a dynamic select. The select is generated by the JavaScript DOM. Below is the code block that generates the select as well as a test function to try to access, retrieve the value. I would really appreciate any help you can give. I have look through my library of code books, searched the web for days and can't find anything that will solve the problem. I can retrieve the users input from dynamic text-boxes but can't get anything from the select.
Thank you for your time and help.
If you would like to see the complete source code Full JavaScript Code
/************************/
var t_shirt = 0;
for(var i = 0; i < 1; i++){
var cell = document.createElement('td');
var t_shirt_size = document.createElement('select');
t_shirt_size.setAttribute('name','t_shirt_size');
t_shirt_size.setAttribute('id','t_shirt'+t_shirt);
t_shirt_size.setAttribute('class','dynamic_select_shirt');
var topt0 = document.createElement('option');
topt0.setAttribute('id','option0');
topt0.setAttribute('value','T-Shirt Size');
topt0.innerHTML = 'T-Shirt Size';
var topt1 = document.createElement('option');
topt1.setAttribute('id','option1');
topt1.setAttribute('value','Youth Small');
topt1.innerHTML = 'Youth Small';
var topt2 = document.createElement('option');
topt2.setAttribute('id','option2');
topt2.setAttribute('value','Youth Medium');
topt2.innerHTML = 'Youth Medium';
var topt3 = document.createElement('option');
topt3.setAttribute('id','option3');
topt3.setAttribute('value','Youth Large');
topt3.innerHTML = 'Youth Large';
var topt4 = document.createElement('option');
topt4.setAttribute('id','option4');
topt4.setAttribute('value','Youth X-Large');
topt4.innerHTML = 'Youth X-Large';
var topt5 = document.createElement('option');
topt5.setAttribute('id','option5');
topt5.setAttribute('value','Adult Small');
topt5.innerHTML = 'Adult Small';
var topt6 = document.createElement('option');
topt6.setAttribute('id','option6');
topt6.setAttribute('value','Adult Medium');
topt6.innerHTML = 'Adult Medium';
var topt7 = document.createElement('option');
topt7.setAttribute('id','option7');
topt7.setAttribute('value','Adult Large');
topt7.innerHTML = 'Adult Large';
var topt8 = document.createElement('option');
topt8.setAttribute('id','option8');
topt8.setAttribute('value','Adult X-Large');
topt8.innerHTML = 'Adult X-Large';
t_shirt++;
//alert('made it past ++ topt ');
t_shirt_size.appendChild(topt0);
t_shirt_size.appendChild(topt1);
t_shirt_size.appendChild(topt2);
t_shirt_size.appendChild(topt3);
t_shirt_size.appendChild(topt4);
t_shirt_size.appendChild(topt5);
t_shirt_size.appendChild(topt6);
t_shirt_size.appendChild(topt7);
t_shirt_size.appendChild(topt8);
cell.appendChild(t_shirt_size);
row.appendChild(cell);
}
table_body.appendChild(row);
}
table_nop.appendChild(table_body);
mul.appendChild(table_nop);
table_nop.setAttribute('id','dynamic_table_main');
document.getElementById('form_div').style.display='block';
/*************************************/
code i have tried to retrieve the value with.
/*************************************/
function a(){
var cname = document.getElementById('tbNAME'+0).value;
var cbd = document.getElementById('tbBD'+0).value;
var cAORD = document.getElementById('tbAORD'+0).value;
var cgender = document.getElementById('gender_select'+0).selectedIndex;
var cshirt = document.getElementById('t_shirt'+0);
alert(cshirt.length);
}
function check_dynamic_table(){
var errorc = 0;
var nop = check_id_global;
for(var i =0; i < nop;i++){
var cname = document.getElementById('tbNAME'+i).value;
var cbd = document.getElementById('tbBD'+i).value;
var cAORD = document.getElementById('tbAORD'+i).value;
var cgender = document.getElementById('gender_select'+i).value;
var cshirt = document.getElementById('t_shirt'+i).value;
if(cname == "" || cname == null){
alert('Please Fill Out All Fields:' +cname );
}
if(cbd == "" || cbd == null){
alert('Please Fill Out All Fields:'+cbd);
}
if(cAORD == "" || cAORD == null){
alert('Please Fill Out All Fields:'+cAORD);
}
if(cgender == 'gender'){
alert('Please make a Gender Selection:'+cgender);
}
if(cshirt == 'T-Shirt Size'){
alert('Please make a T-Shirt Selection:'+cshirt);
}
}
}
Have you looked into jQuery before? You should :) http://jquery.com
In the meantime, you have two method to get the selected index.
1) Get the value after the user has made a selection:
$('#mySelect').change(function() {
alert('You selected: '+ $(this).val());
});
2) Get the value on demand:
alert('You selected: '+ $('#mySelect').val());
Here's a JSFiddle example, hope it helps: http://jsfiddle.net/BTWFm/
I figured it out. Plato your post triggered a thought that otherwise may have never come. The var cshirt points to the select element's id, so what i needed to do was to take that variable and access the options element and enter the array of option elements requesting the selectedIndex, then request the value. Now i can get the value of the dynamic select and pass this to my php. I appreciate the other posts but i wanted to do this in pur JavaScript. Below is the solution:
var cshirt = document.getElementById('t_shirt'+0);
var cshirt_value = cshirt.options[cshirt.selectedIndex].value;
alert(cshirt_value);}