How to append checkbox,textnode,in List item - javascript

I want to create a list with check box dynamically. For that i created list item, check box,text node dynamically.
My problem is, I want to append checkbox and textnode inside List item. How to do this?
In Script:
var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var list = document.createElement( "li" );
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
var text = document.createTextNode( name );
In Body:
<ul id="list" >
</ul>
I want to do like,
<li><input type="checkbox">Tamil</li>
dynamically from javascript.
For that i tried like,
document.getElementById( 'list' ).appendChild(list);
document.getElementById( 'list' ).appendChild(cb);
document.getElementById( 'list' ).appendChild(text);
But it is not appended in li.
How to append these correctly?

You have to create a checkbox dynamically, create a list item (<li>) dynamically, append the checkbox to the <li> and the <li> to the UL
Something Like:
var name = "Test"; //or whatever you want, from another textbox for instance
//Create a new <li> dynamically
var newLi = document.createElement('li');
//Create checkbox dynamically
var checkBox = cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
//Append the checkbox to the li
newLi.appendChild(cb);
//Create the text node after the the checkbox
var text = document.createTextNode(name);
//Append the text node to the <li>
newLi.appendChild(text);
//Append the <li> to the <ul>
var ul = document.getElementById("test");
ul.appendChild(newLi);
You started correct, then forgot to create a new <li>

var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var list = document.createElement( "li" );
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
// then
list.appendChild(cb);
list.innerHTML+=name;//or if you want,create the textnode 'text' and appendChild again
var lists=document.getElementById('list');
lists.appendChild(list);

I would recommend using jQuery or another similar library. This will help to ensure cross browser compatibilty, and simplify your coding. With jQuery you can do it like this...
// create something, and appendTo something else
$('<li />').appendTo('body')
// select something, and append something else to it
$('li').append( $('<input />').attr({type:'checkbox'}) )

Related

Insert html code after element

I have a html document which looks like this:
...html code...
<ul id="my_ul">
...html code...
Using javascript I want to insert the html code below inside the document, immediately after <ul id="my_ul"> :
<li><span>Some text</span><ul>
So far I have this, but not the expected results. Please, what am I doing wrong?
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var para3 = document.createElement("ul");
var element = document.getElementById("my_ul");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);
If you want shorter code without creating objects for each html elements just do this:
var element = document.getElementById("my_ul");
var html = '<li><span>Some text</span></li>';
element.innerHTML = html + element.innerHTML;
Like this:
var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var text = document.createTextNode("Some text");
span.appendChild(text);
li.appendChild(span);
ul.appendChild(li);
<ul id="my_ul">
</ul>
Is this what you want to do?
Demo: Fiddle
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
para1.appendChild(para2);
element = document.getElementById("my_ul");
element.appendChild(para1);
Your code does this:
element.appendChild(para1);
Make the list item a child of the original list
element.appendChild(para2);
Make the span a child of the original list
element.appendChild(para3);
Make the new list a child of the original list
You need to append each element to the element you want to be its parent instead of appending everything to the original list.
Replace element with the appropriate variable.
$(document).ready(function(){
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var element = document.getElementById("my_ul");
element.appendChild(para1);
para1.appendChild(para2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="my_ul">
</ul>
var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var textNode = document.createTextNode("Some text");
span.appendChild(textNode);
li.appendChild(span);
ul.appendChild(li);

How to get the name or id of a select dropdown in a dynamic form

I have a dynamic form with a select dropdown, and I want to know what select was changed, however any time that I add a new form and try to change any select the alert is the same: "origen1"
Here is my js code:
<SCRIPT language="javascript">
function addRow(divId) {
count = 0;
count++;
var etiquetas = new Array();
var origenes = new Array();
var parentDiv = document.getElementById(divId);
// create a div dynamically
var eleDiv = document.createElement("div");
eleDiv.setAttribute("name", "olddiv");
eleDiv.setAttribute("id", "olddiv");
// create a label dynamically
var etiqueta = document.createElement("input");
etiqueta.setAttribute("name", 'etiqueta' + count);
etiqueta.setAttribute("value", "etiqueta");
etiqueta.setAttribute('disabled', true);
etiquetas.push(etiqueta);
//create a select dynamically
var myarray=new Array(3)
myarray[0] = "Opt1"
myarray[1] = "Opt2"
myarray[2] = "Opt3"
var origen = document.createElement("select");
origen.setAttribute("name", 'origen' + count);
for (i=0; i<3; i++)
{
opt = document.createElement('option');
opt.value = i;
opt.innerHTML = myarray[i];
origen.appendChild(opt);
}
origen.onchange = function(){testselect(this);};
origenes.push(origen);
// create a delete button dynamically
var eleBtn = document.createElement("input");
eleBtn.setAttribute("type", "button");
eleBtn.setAttribute("value", "delete");
eleBtn.setAttribute("name", "button");
eleBtn.setAttribute("id", "button");
eleBtn.setAttribute("onclick", "deleteRow('button')");
// append new div to parent div
parentDiv.appendChild(eleDiv);
// append textbox & button to new div
eleDiv.appendChild(etiqueta);
eleDiv.appendChild(origen);
eleDiv.appendChild(eleBtn);
}
function testselect(seleccion)
{
alert(seleccion.name);
}
function deleteRow(tableID) {
var div = document.getElementById('olddiv');
if (div) {
div.parentNode.removeChild(div);
}
}
</SCRIPT>
And the html:
<form name="objForm" action="test1.php">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id="dataTable" width="350px">
</div>
<input type="submit" value="Submit"/>
</form>
Try inspecting the drop down using firebug. With that you might be able to get the name and ID of the selected drop down but remember the selected drop down has to be selected using firebug in order to see the ID or name used with it.
Since this is JS and the drop down is not selected properly you might not see the name or id used.
So make sure to it is properly selected

Add onClick to an input being built by JavaScript

I have a file type input button that I am needing to clear completely if the user chooses to and the only safe solution I have found is to completely destroy the input and rebuild it. What I have right now works but it is a "Harp Gun" solution in that it only works once.
Basically, the user has a file input like so:
<input type="file" name="filesToUpload" id="filesToUpload" onChange="makeFileList();" />
<ul id="fileList"><li>No Files Selected</li></ul>
And when they select a file, they may need to clear that completely.
So I have this being built up via appending it on to the filelist:
function makeFileList() {
var input = document.getElementById("filesToUpload");
var ul = document.getElementById("fileList");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
var li = document.createElement("li");
var fileSize = input.files[i].size;
li.innerHTML = input.files[i].name +" "+ "<span id=\"lblSize\"></span><input onclick=\"clearFileInput()\" type=\"button\" value=\"Clear\" \/>";
ul.appendChild(li);
}
if(!ul.hasChildNodes()) {
var li = document.createElement("li");
li.innerHTML = 'No Files Selected';
ul.appendChild(li);
}
};
And to completely destroy the file, the function rebuilds the input like so:
function clearFileInput(){
var oldInput = document.getElementById("filesToUpload");
var newInput = document.createElement("input");
newInput.type = "file";
newInput.id = oldInput.id;
newInput.name = oldInput.name;
newInput.className = oldInput.className;
newInput.style.cssText = oldInput.style.cssText;
// copy any other relevant attributes
oldInput.parentNode.replaceChild(newInput, oldInput);
};
So I can create the element, add the file type, and use the old input ID, class and name. But I need it to have the same onChange="makeFileList(); behavior as well.
Here is a FIDDLE. Any help is appreciated.
Simply add the attribute.
function clearFileInput(){
var oldInput = document.getElementById("filesToUpload");
var newInput = document.createElement("input");
newInput.type = "file";
newInput.id = oldInput.id;
newInput.name = oldInput.name;
newInput.className = oldInput.className;
newInput.style.cssText = oldInput.style.cssText;
newInput.setAttribute("onclick", "makeFileList()");
// copy any other relevant attributes
oldInput.parentNode.replaceChild(newInput, oldInput);
};
How about this:
function clearFileInput(){
var oldInput = document.getElementById("filesToUpload"),
newInput = document.createElement("input"),
eventHandler = oldInput.onchange;
newInput.type = "file";
newInput.id = oldInput.id;
newInput.name = oldInput.name;
newInput.className = oldInput.className;
newInput.style.cssText = oldInput.style.cssText;
// copy any other relevant attributes
oldInput.parentNode.replaceChild(newInput, oldInput);
newInput.onclick = eventHandler ;
};
Since you've tagged it jquery, you can use event-delegation.
$(document).on('change', '[name="filesToUpload"]', makeFileList);

How to insert dynamically added text boxes into MySQL database

I used Javascript to dynamically add textbox in order for the user to add more items in one process. Here's the code that add textboxes:
<script type="text/javascript">
var quantity = document.getElementById('quantity');
var item = document.getElementById('item');
var serial = document.getElementById('serial');
var property = document.getElementById('property');
document.getElementById('add').onclick = function () {
var input = document.createElement('input'),
div = document.createElement('div');
input.type = "text";
input.setAttribute("name", "quant");
div.appendChild(input);
quantity.appendChild(div);
var input2 = document.createElement('input'),
div2 = document.createElement('div');
input2.type = "text";
input2.setAttribute("name", "items");
div.appendChild(input2);
item.appendChild(div);
var input3 = document.createElement('input'),
div3 = document.createElement('div');
input3.type = "text";
input3.setAttribute("name", "serno");
div.appendChild(input3);
serial.appendChild(div);
var input4 = document.createElement('input'),
div4 = document.createElement('div');
input4.type = "text";
input4.setAttribute("name", "proper");
div.appendChild(input4);
property.appendChild(div);
};
</script>
When the user clicks the "Add Text" button, one set (four textboxes) will appear. My problem is even if the user clicks and inputs data into those textbox, it will only insert one set of data (which was the last set of input). Its because of the "name" of the textbox are the same. How can I insert those multiple data? Or how can I set a unique name for the added textbox in order to insert them into the database?
You'll want to change the names with a [] appended to it. This will pass an array to the PHP on form submit.
input.setAttribute("name", "quant[]");
To get the values in PHP,
$quant_values = $_GET['quant']; // array of values
$value_one = $quant_values[0];
You will need to implement a loop to iterate through the values.

createElement - select boxes interspersed in the midst of text

This is the HTML I'm trying to create:
<td>
Tiana is
<select name="U4">...</select>
keen to go to the
<select name="J4">...</select>
market.
</td>
As you can see, there is a <td> element which contains a prose sentence with select boxes in the midst of it.
It's easy to do with $('#id').html(...);. What I want to do is build it using createElement. How do you create the select boxes in the middle of the other text? The following code is a start :)
var doc = document,
fr = doc.createDocumentFragment(),
td = doc.createElement("td"),
sel1 = doc.createElement("select"),
sel2 = doc.createElement("select");
td.innerHTML = "Tiana is keen to go to the market";
sel1.name = "U4";
sel2.name = "J4";
fr.appendChild(td);
td.appendChild(sel1); // But these are not in the middle of the sentence
td.appendChild(sel2);
BTW: I recognise, too, that I'll have to create the select options.
Thanks.
There is also a function called createTextNode() (MDN docu) for creating simple text as content. So one solution would be to split your text accordingly, transform it to textnodes and then append it as well:
var doc = document,
fr = doc.createDocumentFragment(),
td = doc.createElement("td"),
sel1 = doc.createElement("select"),
sel2 = doc.createElement("select"),
text1 = doc.createTextNode( 'Tiana is ' ),
text2 = doc.createTextNode( ' keen to go to the ' ),
text3 = doc.createTextNode( 'market' );
sel1.name = "U4";
sel2.name = "J4";
fr.appendChild(td);
td.appendChild( text1 );
td.appendChild(sel1);
td.appendChild( text2 );
td.appendChild(sel2);
td.appendChild( text3 );
Here you can find an example fiddle: link.
I think you'll need to have this:
<td>
<span>Tiana is</span>
<select name="U4">...</select>
<span>keen to go to the</span>
<select name="J4">...</select>
<span>market.</span>
</td>
or do this:
td.innerHTML = 'Tiana is <select id="U4" name="U4" /> keen to go to the <select id="J4" name="J4" /> market';
var uOpt1 = document.createElement('option');
//Set option properties
td.getElementById('U4').appendChild(uOpt1); //etc
How about this? I adapted the example from mdn createElement. Fiddle.
<div id='org_div1'> The text above has been created dynamically.</div>​
var my_div = null;
var newDiv = null;
var newSelect = null;
var newDiv2 = null;
function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newContent = document.createTextNode("Hi there and greetings!");
newSelect = document.createElement("select");
newSelect.innerHTML='<option value="value1">Value 1</option><option value="value2" selected>Value 2</option><option value="value3">Value 3</option>';
newDiv.appendChild(newContent); //add the text node to the newly created div.
newDiv.appendChild(newSelect)
newDiv2 = document.createElement("span");
newDiv2.appendChild(document.createTextNode("Foo"));
newDiv.appendChild(newDiv2)
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
addElement()​

Categories

Resources