create html field based on js variable value - javascript

I have a property called results.row in JS. Using the value of that, I have to create textboxes in html. Suppose the value of results.row is 5,then I want to create 5 textboxes in html.
Also, the data to be shown on the textboxes is inside results.rows.item(i) . Is it possible to display?
HTML
<textbox name="Medicine Name" id="medicine"/>
JS
var rows = 5;
for (var i = 0; i < rows; i++)
{
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.value = 'value here ' + i;
document.getElementsByName('medicine')[0].appendChild(textbox);
}

Related

How to get the CheckBoxlist value using JavaScript

Using below javascript function can able to get the all the text of checkbox list. But can't able to get the value (It passing as "on").
var CHK = document.getElementById("<%=chkFun.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var label = CHK.getElementsByTagName("label");
var listOfSpans = chkBox.getElementsByTagName('span');
for (var i = 0; i < checkbox.length; i++) {
var value = checkbox[i].value;
alert("Selected = " + label[i].innerHTML); //Get the text
}
The default value of a checkbox is "on" which is what you are getting. You are not setting the value of the checkbox properly.
If the value attribute was omitted, the default value for the checkbox is on , so the submitted data in that case would be [name]=on.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

dynamic text box dropdown clone

i am trying to create dynamic text boxes, but i'm having trouble basing them of a clone
essentially what i am trying to do is create a certain amount of text boxes based on the amount of options in a combo box. 5 values in a
var optionValues = [];
$('#fieldnameclone option').each(function() {
optionValues.push($(this).val());
});
optionValues.shift();
var optionspacing="";
jQuery.each(optionValues, function(i, val) {
optionspacing += val + ":<br />";
});
var insfldnms = $("<div id =insertfieldname></section>").html(optionspacing);
var n = $("#fieldname option").length;// get amount of options in dropdownt box
var $frm2 = $("<form id=insertform class=form2></form>");// creates a form
$frm2.append(tblNmClnSrch,fldnmCln,insfldnms);// adds the field and name clones to the form
for(var i = 0; i < n-1; i++)
{
$('<input /></br>', {id: "valueid" + i,name: "name" + i}).appendTo($frm2);
}
var btninsert = $("<input id=inserthbtn type=button value=Submit></input>");
$(btninsert).appendTo($frm2);
$( "#reports3" ).empty();
$("#reports3").append($frm2);
not sure where i am going wrong, any help would be awesome
html for fieldname
var txt3 = $("<section id =fieldname></section>").text("Text.");
fieldname combo box is generated using getjson, that part works fine, so there are elements in the dropdown box

PHP text boxes dynamic ID generating

i would be very thankful if anyone could help me with this
i am trying to use php uploader plugin and upload multiple files.
i want to assign unique ids to the generating text box fields.
but whenever I am using a for loop to assign id , the text boxes won't show up
here is my code
var input = document.createElement('input');
input.value = task.FileName;
input.id = "textBox_";
for(var i = 0; i<0; i++){
input.id = "textBox_'.i.'";
}
document.body.appendChild(input);
}
the help will be appreciated ..
You are not appending the value of i properly. In js concatenation is done using + operator not using .
input.id = "textBox_"+i;
Place
document.body.appendChild(input);
inside the for loop like shown below as it has to generate input each time until loop ends.
for(var i = 0; i<0; i++)
{
input.id = "textBox_"+i;
document.body.appendChild(input);
}
Change input.id = "textBox_'.i.'"; to input.id = "textBox_"+i;
Concatenation in js is cone using + operator
So your code will be:
var input = document.createElement('input');
input.value = task.FileName;
input.id = "textBox_";
for(var i = 0; i<0; i++){//Condition of this loop is wrong in the sence it wont execute even once so fix it as your needs
input.id = "textBox_"+i;
document.body.appendChild(input);
}
}

Removing a text field using Javascript

I have the following code to add text fields when the function is called:
<span id="response"></span>
<script>
var qcountBox = 2;
var acountBox = 2;
var qboxName = 0;
var aboxName = 0;
function addInput()
{
var qboxName="question"+qcountBox;
var aboxName="answer"+acountBox;
if(qcountBox <=10 && acountBox <= 10)
{
document.getElementById('response').innerHTML+='<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>';
document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>';
qcountBox ++;
acountBox ++;
}else
alert("No more than 10 questions allowed at this time.");
}
I also would like to be able to add a function to remove any new fields I have added. Any suggestions? Thanks
<script>
var qcountBox = 1;
var acountBox = 1;
var qboxName = 0;
var aboxName = 0;
function addInput()
{
var qboxName="question"+qcountBox;
var aboxName="answer"+acountBox;
if(qcountBox <=10 && acountBox <= 10)
{
document.getElementById('response').innerHTML+='<div id="'+qcountBox+'"><br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>';
document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></div>';
qcountBox ++;
acountBox ++;
}else
alert("No more than 10 questions allowed at this time.");
}
function removeInput(id)
{
document.getElementById(id).innerHTML = '';
}
You can remove any question that you added using the id of the question div (same as qboxName)
Surround each new piece of HTML in a span with a common class name. Then, find all the objects with that class name and remove them.
Add the span and class name to these:
document.getElementById('response').innerHTML+='<span class="added"> <br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/></span>';
document.getElementById('response').innerHTML+='<span class="added"><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></span>';
Then, you can remove all the added spans like this:
var items = document.getElementsByClassName("added");
for (var i = 0; i < items.length; i++) {
items[i].parentNode.removeChild(items[i]);
}
Note: This is a generally better way to add your new HTML as it doesn't rewrite all previous HTML - it just adds new DOM objects:
var span = document.createElement("span");
span.className = "added";
span.innerHTML = '<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>';
document.getElementById('response').appendChild(span);
You should actually create an input element in javascript and append it to your container through appendChild instead of using innerHTML +=.
You should also set an ID for those fields, not just a name. But it can be the same as theirs names.
Like this
var input = document.createElement("input");
input.type = "text";
input.name = input.id = qboxName;
document.getElementById("response").appendChild(input);
And then, you know, do the same for the other input field you need.
I know you need a text label for the boxes, or whatever, just do the same process to insert a span tag before them.
Also, I don't see a reason for those two counting variables. Instead of qcountBox and acountBox it's totally possible to have only one single counting variable. Maybe I'm wrong but shouldn't you increase this counting before setting the boxes names?
As for removing it, you can use the removeChild method, then, decrease your counting variable. like this:
function removeInput()
{
var qboxName = "question" + count;
var aboxName = "answer" + count;
document.getElementById("response").removeChild(document.getElementById(aboxName));
document.getElementById("response").removeChild(document.getElementById(aboxName));
count--;
}
Maybe if you're going to insert other elements together with these fields, like span tags for labels etc, it would be better to wrap them all up in a div or something, then simply do a removeChild to this container div only.

the best practice for assigning an ID automatically

I have a page that contains a link like this:
new user
When the user clicks the link, I add a new input field to the page. I would like to assign an ID to that input field. I can do this using Javascript:
var num=0;
function add(){
num++;
var input = document.createElement('input');
input.setAttribute('ID',"input"+num);
}
This works; but my question is, is this the standard way, or is there a better way to do this, something that doesn't use num, JS or jQuery?
You don't need an ID on an input element. However you might be needing a name. If so, just use name = "input[]" - then on the server side you will get an array of values.
Since you're using jQuery:
$('<input id="input'+ num +'"/>').appendTo('#yourElement')
Just assign the id to the element:
var num=0;
function add(){
num++;
var input = document.createElement('input');
input.id = "input" + num;
}
Since you tagged your question with jQuery, you can also do this:
function add(){
var input = $('<input id="input' + num++ +'" />')
// do something with the input.
}
Or:
function add(){
var input = $('<input>', {id = "input" + num++});
// do something with the input.
}
Update:
You can't create DOM elements without javascript (jQuery is javascript).
var num=0;
function add(){
num++;
var input = document.createElement('input');
input.id = "input"+num;
}
random ID without num :
function add(){
var input = document.createElement('input');
input.id = 'input'+parseInt(Math.random()*1354243242);
}

Categories