Please I want to extract the value of the input form with id input-a but the program keeps writing c instead of the value entered by the user. Please help. This is the JavaScript code.
< body>
<script>
function tableCreate() {
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '2px solid black';
var n = 5
for (var i = 0; i < n; i++) {
var tr = tbl.insertRow();
var td =tr.insertCell(0);
var tf = tr.insertCell(0);
var input = document.createElement('input');
input.name = "input-a" + i;
input.id = "input-a" + i;
input.value = "";
var clone = input.cloneNode();
clone.name = "input-b" + i;
clone.id = "input-b" + i;
td.appendChild(clone);
tf.appendChild(input);
td.style.border = '2px solid black';
tf.style.border = '2px solid black';
}
var form = document.createElement("form");
form.appendChild(tbl);
body.appendChild(form);
var submit = document.createElement("input");
submit.type = "submit";
form.appendChild(submit)
Var c= document.getElementById("input-a1)
document.write('c'). }
tableCreate();
</script>
</body >
This should work.
<script>
window.onload = function () {
function tableCreate() {
var body = document.body;
var tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '2px solid black';
var n = 5;
for (var i = 0; i < n; i++) {
var tr = tbl.insertRow();
var td = tr.insertCell(0);
var tf = tr.insertCell(0);
var input = document.createElement('input');
input.name = "input-a" + i;
input.id = "input-a" + i;
input.value = "test";
var clone = input.cloneNode();
clone.name = "input-b" + i;
clone.id = "input-b" + i;
td.appendChild(clone);
tf.appendChild(input);
td.style.border = '2px solid black';
tf.style.border = '2px solid black';
}
var form = document.createElement("form");
form.appendChild(tbl);
body.appendChild(form);
var submit = document.createElement("input");
submit.type = "submit";
form.appendChild(submit)
var c = document.getElementById("input-a1").value;
document.write(c);
};
tableCreate();
};
</script>
I saw you did document.write('c') with quotes,
this will write the string c and not the variable c.
Also you have to take the value of the input and not the input itself.
var c = document.getElementById("input-a1").value;
code is writing 'c' because you type
document.write('c')
if you want to have value of c you should type
document.write(c.value);
but to have it working you should set this value in function which handles forms submit not after generating form...because now value is empty string
here you have working example
https://jsfiddle.net/g8rschsu/
Related
I have to generate a sequence with a difference of 9. starting from 7. sequence should have 20 terms. I have tested my for loop and its working fine. Question is, how do I embedd this for loop in a table in javascript? Just want the table to have one column (sequence in for loop)
<script type="text/javascript">
var i;
var p;
for (i = 0; i < 20; i++) {
p = i * 9 + 7;
document.writeln(p + "<br>");
}
</script>
Use a loop to create the relevant HTML element objects and set their values within your Javascript:
var table = document.createElement("table");
var i;
var p;
for (i = 0; i < 20; i++) {
var row = document.createElement("tr");
var row_data = document.createElement("td");
p = i * 9 + 7;
row_data.innerHTML = p;
row_data.style = "border: 1px solid black";
row.appendChild(row_data);
table.appendChild(row);
}
document.body.appendChild(table);
Declare a table in html and give it an id
<table id="table"></table>
Then, get that table in your javascript and add one row, column in each iteration
<script type="text/javascript">
var i;
var p;
var table = document.getElementById("table");
for (i = 0; i < 20; i++) {
p = i * 9 + 7;
table.innerHTML = `${table.innerHTML}<tr><td>${p}</td></tr>`;
}
</script>
let table = '<table><tbody>';
for (let i = 0; i < 20; i++) {
table += (`<tr><td>${i}</td><td>${i * 9 + 7}</td></tr>`);
}
table += '</tbody></table>';
document.body.innerHTML = table;
Array.from(document.getElementsByTagName('td'))
.forEach((td) => {
td.style.border = '1px solid green';
td.style.width = '40px';
td.style.textAlign = 'right';
td.style.paddingRight = '20px';
});
Array.from(document.getElementsByTagName('table'))
.forEach((table) => {
table.style.border = '2px solid';
});
i have a add button in my jsp. while clicking on the add button, it will add a complete row which will include the checkbox, serial no, textbox and a drop down list with options.
i can able to add checkbox and text box but i am not able to add the serial no column(which is increasing the serial no by 1) and the drop down list options to the select through javaScript.
As the eleements are adding the ids dynamically i am not able to get the element by its id to check.
var i=1;
function addRow(tableID)
{
var tbl = document.getElementById(tableID);
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
//adding the checkbox
var el1 = document.createElement('input');
el1.type = 'checkbox';
el1.name = 'chkbox_' + i;
el1.id = 'chkbox_' + i;
el1.align = 'center';
//el1.size = 15;
el1.maxlength = 20;
firstCell.appendChild(el1);
var secondCell = row.insertCell(1);
//adding the serial no
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
//el1.size = 15;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
//adding the textbox
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtbox_' + i;
el3.id = 'txtbox_' + i;
el3.size = 15;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var forthCell = row.insertCell(3);
//adding the option
var el4 = document.createElement('select');
el4.type = 'select-one';
el4.name = 'select_' + i;
el4.id = 'select_' + i;
el4.value = "1";
//el4.size = 15;
el4.maxlength = 20;
var select = document.getElementById("select_2");
select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
forthCell.appendChild(el4);
el4.appendChild(option);
// alert(i);
i++;
frm.h.value=i;
// alert(i);
}
</script>
please help me to get the solution. i tried with possibilities but never get a solution what i need.Thanks in advance.
You've missed setting the value of Serial Number.
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
el2.value = i;
Also, You have to set options to select something like below
var el4 = document.createElement('select');
var opt = document.createElement('option');
opt.value = "Value1";
opt.innerHTML = "Value1";
el4.appendChild(opt);
window.onload = function()
{
addRow("test");
}
var i=1;
function addRow(tableID)
{
var tbl = document.getElementById(tableID);
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
//adding the checkbox
var el1 = document.createElement('input');
el1.type = 'checkbox';
el1.name = 'chkbox_' + i;
el1.id = 'chkbox_' + i;
el1.align = 'center';
//el1.size = 15;
el1.maxlength = 20;
firstCell.appendChild(el1);
var secondCell = row.insertCell(1);
//adding the serial no
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
//el1.size = 15;
el2.value = i;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
//adding the textbox
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtbox_' + i;
el3.id = 'txtbox_' + i;
el3.size = 15;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var forthCell = row.insertCell(3);
//adding the option
var el4 = document.createElement('select');
el4.type = 'select-one';
el4.name = 'select_' + i;
el4.id = 'select_' + i;
el4.value = "1";
//el4.size = 15;
el4.maxlength = 20;
var opt = document.createElement('option');
opt.value = "Value1";
opt.innerHTML = "Value1";
el4.appendChild(opt);
//var select = document.getElementById("select_2");
//select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
forthCell.appendChild(el4);
//el4.appendChild(option);
// alert(i);
i++;
//frm.h.value=i;
// alert(i);
}
</script>
<input type="button" value="Add Row" onclick='addRow("test")' />
<table id="test"></table>
I Have created a modal inside the listview having input fields and select element. This list is shown up in webview of android. When I am clicking the input field, I am able to change the value inside it but when I am clicking the select field nothing happens even though I have the data inside that select list and even it is focussed by click listener. Can anyone please help me with it?
I am sharing the sample code:-
var modalInList = function(){
var originalList = document.getElementsByClassName("tt-menu");
var divElement = document.createElement("div")
divElement.id = "divToAdd";
var listElement = document.createElement("li");
listElement.id = "listToAdd";
var inputFieldForDose = document.createElement("input");
var inputFieldForFrequency = document.createElement("select");
var inputFieldForDays = document.createElement("input");
var take = document.createElement("span");
var tablet = document.createElement("span");
var forData = document.createElement("span");
var days = document.createElement("span");
take.innerHTML = "Take"
tablet.innerHTML = "Tablet"
forData.innerHTML = "for"
days.innerHTML = "Days"
divElement.appendChild(take);
inputFieldForDose.id = "doseList";
inputFieldForFrequency.id = "frequencyList";
inputFieldForDays.id = "daysList";
inputFieldForDose.contentEditable = 'true'
inputFieldForFrequency.contentEditable = 'true'
inputFieldForDays.contentEditable = 'true'
inputFieldForDose.style.color = "black";
inputFieldForDose.style.width = "45px";
inputFieldForDose.style.marginLeft = "1px";
inputFieldForDose.style.marginRight = "1px";
inputFieldForDose.style.textAlign = "center";
inputFieldForDose.style.padding = "1px";
inputFieldForDose.style.border = "solid 1px #c9c9c9";
inputFieldForFrequency.style.color = "black";
inputFieldForFrequency.style.width = "auto";
inputFieldForFrequency.style.marginLeft = "1px";
inputFieldForFrequency.style.marginRight = "1px";
inputFieldForFrequency.style.padding = "1px";
inputFieldForFrequency.style.border = "solid 1px #c9c9c9";
inputFieldForDays.style.color = "black";
inputFieldForDays.style.width = "45px";
inputFieldForDays.style.marginLeft = "1px";
inputFieldForDays.style.marginRight = "1px";
inputFieldForDays.style.marginTop = "2px";
inputFieldForDays.style.textAlign = "center";
inputFieldForDays.style.padding = "1px";
inputFieldForDays.style.border = "solid 1px #c9c9c9";
inputFieldForDose.setAttribute('type', 'number');
inputFieldForDays.setAttribute('type', 'number');
if (inputFieldForFrequency.selectedIndex == -1) {
var start = '';
var len = prescriptionFrequenciesData.length;
for (var i = 0; i < len; i++) {
start += '<option value="' + prescriptionFrequenciesData[i].value + '">' + prescriptionFrequenciesData[i].title;
}
inputFieldForFrequency.innerHTML = start;
}
inputFieldForFrequency.required = true;
divElement.appendChild(inputFieldForDose);
divElement.appendChild(tablet);
divElement.appendChild(inputFieldForFrequency);
divElement.appendChild(forData);
divElement.appendChild(inputFieldForDays);
divElement.appendChild(days);
listElement.appendChild(divElement);
originalList[0].prepend(listElement);
inputFieldForDose.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDose.focus();
$(".tt-menu").show();
inputFieldForDose.focus();
})
inputFieldForFrequency.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForFrequency.focus();
$(".tt-menu").show();
inputFieldForFrequency.focus();
})
inputFieldForDays.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDays.focus();
$(".tt-menu").show();
inputFieldForDays.focus();
})
}
Here inputFieldForDays is the element for element. and $(".tt-menu") is used for bloodhound.js list
I am creating something with JS and I cannot seem to add the style tag to a div that I created via javascript (I am not making a class for css for a reason do not suggest it) here is my code
function createForm()
{
var container = document.getElementsByClassName("container-fluid");
var formElement = document.createElement("form");
var inputName = document.createElement("input");
var inputEvent = document.createElement("input");
var inputTime = document.createElement("input");
var sendWithTimer = document.createElement("input");
var sendWithoutTimer = document.createElement("input");
var divContainer = document.createElement("div");
formElement.className = "form";
divContainer.className = "enforce-styles";
inputName.className = "name";
inputEvent.className = "event";
inputTime.className = "time";
sendWithTimer.className = "sendWithTimer";
sendWithoutTimer.className = "sendWithoutTimer";
inputName.setAttribute('type', "text");
inputEvent.setAttribute('type', "text");
inputTime.setAttribute('type', "text");
inputName.setAttribute('placeholder', "Name");
inputEvent.setAttribute('placeholder', "Event");
inputTime.setAttribute('placeholder', "Time");
sendWithTimer.setAttribute('type', "button");
sendWithoutTimer.setAttribute('type', "button");
sendWithTimer.setAttribute('value', "Timer");
sendWithoutTimer.setAttribute('value', "No timer");
formElement.appendChild(inputName);
formElement.appendChild(inputEvent);
formElement.appendChild(inputTime);
divContainer.appendChild(sendWithTimer);
divContainer.appendChild(sendWithoutTimer);
for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++)
{
formElement[formElementStyles].style.display = "-webkit-flex";
formElement[formElementStyles].style.display = "flex";
formElement[formElementStyles].style.webkitFlexDirection = "column";
formElement[formElementStyles].style.flexDirection = "column";
formElement[formElementStyles].style.position = "relative";
formElement[formElementStyles].style.top = 0;
formElement[formElementStyles].style.left = 40 + "%";
formElement[formElementStyles].style.padding = 0.6 + "em";
formElement[formElementStyles].style.margin = 1 + "em";
}
for (var divContainerStyles = 0; divContainerStyles < divContainer.length; divContainerStyles++)
{
divContainer[divContainerStyles].style.display = "-webkit-flex";
divContainer[divContainerStyles].style.display = "flex";
divContainer[divContainerStyles].style.webkitFlexDirection = "column";
divContainer[divContainerStyles].style.flexDirection = "column";
divContainer[divContainerStyles].style.position = "relative";
divContainer[divContainerStyles].style.top = 0;
divContainer[divContainerStyles].style.left = 40 + "%";
divContainer[divContainerStyles].style.padding = 0.6 + "em";
divContainer[divContainerStyles].style.margin = 1 + "em";
divContainer[divContainerStyles].style.height = 10 + "em";
}
container[0].appendChild(formElement);
container[0].appendChild(divContainer);
}
I cannot seem to get the second for loop to place the style tags. The div just appears with nothing but a class name which was set above. But I cannot get the styles on there. The styles are for two buttons inside a form I am inserting into a clients website. How can I get this to work? What am I doing wrong?
Your code does not apply the style to the input fields, because divContainer.length does not exist, neither does divContainer[divContainerStyles]. divContainer is an div Object and has no length attribute (as opposed to the form element, which does have a length attribute) so that's why it never gets into the second loop.
Your code produces the following error: https://jsfiddle.net/tdbju0ud/
Instead, you should check for the length of divContainer.childNodes and apply the styles to those.
for (var divContainerStyles = 0; divContainerStyles < divContainer.childNodes.length; divContainerStyles++)
{
divContainer.childNodes[divContainerStyles].style.display = "-webkit-flex";
...
}
A working test in: https://jsfiddle.net/Lvq6hvxd/
This will work- divContainer[divContainerStyles].setAttribute('style', <your styles>)
Use childNodes to get the child elements of the div container.
like
var nodes = divContainer.childNodes
Find out the length of this nodes array object to find out the child elements count of the div.
Here is the corrected code :
var container = document.getElementsByClassName("container-fluid");
var formElement = document.createElement("form");
var inputName = document.createElement("input");
var inputEvent = document.createElement("input");
var inputTime = document.createElement("input");
var sendWithTimer = document.createElement("input");
var sendWithoutTimer = document.createElement("input");
var divContainer = document.createElement("div");
formElement.className = "form";
divContainer.className = "enforce-styles";
inputName.className = "name";
inputEvent.className = "event";
inputTime.className = "time";
sendWithTimer.className = "sendWithTimer";
sendWithoutTimer.className = "sendWithoutTimer";
inputName.setAttribute('type', "text");
inputEvent.setAttribute('type', "text");
inputTime.setAttribute('type', "text");
inputName.setAttribute('placeholder', "Name");
inputEvent.setAttribute('placeholder', "Event");
inputTime.setAttribute('placeholder', "Time");
sendWithTimer.setAttribute('type', "button");
sendWithoutTimer.setAttribute('type', "button");
sendWithTimer.setAttribute('value', "Timer");
sendWithoutTimer.setAttribute('value', "No timer");
formElement.appendChild(inputName);
formElement.appendChild(inputEvent);
formElement.appendChild(inputTime);
divContainer.appendChild(sendWithTimer);
divContainer.appendChild(sendWithoutTimer);
for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++) {
formElement[formElementStyles].style.display = "-webkit-flex";
formElement[formElementStyles].style.display = "flex";
formElement[formElementStyles].style.webkitFlexDirection = "column";
formElement[formElementStyles].style.flexDirection = "column";
formElement[formElementStyles].style.position = "relative";
formElement[formElementStyles].style.top = 0;
formElement[formElementStyles].style.left = 40 + "%";
formElement[formElementStyles].style.padding = 0.6 + "em";
formElement[formElementStyles].style.margin = 1 + "em";
}
var divChildNodes = divContainer.childNodes;
for (var divContainerStyles = 0; divContainerStyles < divChildNodes.length; divContainerStyles++) {
divChildNodes[divContainerStyles].style.display = "-webkit-flex";
divChildNodes[divContainerStyles].style.display = "flex";
divChildNodes[divContainerStyles].style.webkitFlexDirection = "column";
divChildNodes[divContainerStyles].style.flexDirection = "column";
divChildNodes[divContainerStyles].style.position = "relative";
divChildNodes[divContainerStyles].style.top = 0;
divChildNodes[divContainerStyles].style.left = 40 + "%";
divChildNodes[divContainerStyles].style.padding = 0.6 + "em";
divChildNodes[divContainerStyles].style.margin = 1 + "em";
divChildNodes[divContainerStyles].style.height = 10 + "em";
}
container[0].appendChild(formElement);
container[0].appendChild(divContainer);
I have a function that addRow to a table
function addRow(tableId,rowEle)
{
var tab = document.getElementById(tableId);
var hrow = tab.insertRow();
var func = null;
for (var j = 0; j < rowEle.length; j++) {
var newTD = document.createElement("TD");
var elem = document.createElement(rowEle[j].desc);
elem.type = rowEle[j].type;
elem.type == "button" ? elem.value = rowEle[j].label : false;
rowEle[j].action != undefined ? elem.setAttribute(rowEle[j].action[0],rowEle[j].action[1]): false;
elem.style = rowEle[j].cssStyle;
newTD.appendChild(elem);
hrow.appendChild(newTD);
}
}
and my declaration looks like this
var eobject = new Object();
eobject.desc = "input";
eobject.type = "button";
eobject.label = "+";
eobject.action = new Array("onclick","addRow('tbl1',eleme)");
eobject.cssStyle = "width : 100%; border: 0px none; background-color:lightgreen;";
eleme.push(eobject);
** My Working Solution **
Thanks everyone for your help.