Develop Reference

How can I generate different names for input fields?

the output
I am working on a HTML form where I am forced to use jQuery so that the user can add rows to the table as much as he wants. The problem is with the name of the inputs fields.
This is my function. The value of the k in the first text field shows just k not a number!
var k = 0;
function myfunction(x) { //x refers to onclick($(this))
alert(k);
k++;
var row = x.closest("tr");
$("<tr><td></td> <td><input name=k value=k style='display:block; ;box-sizing:border-box;width:100%; border:none;');/> </td> </tr>").insertAfter(row);
$("#myform").on("click", "TheSelectorForTheIcon", function() {
var row = x.closest("tr");
$("<tr>…</tr>").insertAfter(row);
})
}

You need to concatenate the value of the k variable in to the HTML string. Also note that some parts of the HTML string are not necessary, such as the closing parenthesis and extra apostrophe. Try this:
function myfunction($x) {
k++;
var $row = $x.closest("tr");
$('<tr><td></td><td><input name="' + k + '" value="' + k + '" style="display: block; box-sizing: border-box; width: 100%; border: none;" /></td> </tr>').insertAfter($row);
$("#myform").on("click", "TheSelectorForTheIcon", function() {
var $row = $x.closest("tr");
$("<tr>…</tr>").insertAfter($row);
})
}
However the simple answer to your question about generating dynamic field names is: don't. Give the inputs the same name and deal with their values as an array on the server side.

Append text inputs based on value provided by the user w/ jQuery

HTML:
<input type="text" id="inputsNum" />
<div id="content"></div>
jQuery:
$("#inputsNum").bind('change paste keyup', function () {
var count = $(this).val(),
content = "";
for (var i = 0; i < count; i++)
{
content += $(this).append($('<input>').prop('type', 'text'));
}
$(this).next().html(content);
});
Hi,
want to let the user to add multiple text inputs based on value he provided
i wrote the above code but i'm getting [object Object] error repeated actually based on the value i provided , means its working but why its doesn't append the text inputs !
need your help
thank you

Here is the working JS Fiddle
$(document).ready(function() {
$("#inputsNum").bind('change paste keyup', function () {
var count = $(this).val(),
content = "";
for (var i = 0; i < count; i++)
{
content += '<input type="text" />';
}
$('#content').html(content);
});
});

You can try replacing content += $(this).append($('<input>').prop('type', 'text')) with content += "<input type='text' />";
The append function that you are using returns an object and not the HTML as string like you expect it to. Thus when you add it as a string, the toString() method of the object converts it to [object Object] and that gets appended to your HTML

Displaying multiple html text box values in an ascending order [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am using a HTML page where I have multiple textbox inputs, lets say five for example. I have a submit button. Once I enter all values in the text boxes and hit submit, i want all the values to be displayed in the area below submit button on the document in an ascending order. I want to sort all the values to display as result. I just used an array to test if my concept is right, but no luck. Anyone could help is highly appreciated.
This is the code:
function myFunction() {
var txt = new array[];
var txt[0] = $('input:text[name=text1]').val();
var txt[1] = $('input:text[name=text2]').val();
var txt[2] = $('input:text[name=text3]').val();
var txt[3] = $('input:text[name=text4]').val();
var txt[4] = $('input:text[name=text5]').val();
txt.sort();
for (var i = 0; i < txt.length; i++) {
document.getElementById('txt[i]').value + ' ';
}
}

The .text-1, .text-2, etc are the classes of your input fields. The .val() will get the user input of those once they click on your submit button. The last line creates a new div and appends the user input to the results div.
$('.submit-button').on('click', function() {
aaa = $('.text-1').val();
bbb = $('.text-2').val();
ccc = $('.text-3').val();
ddd = $('.text-4').val();
eee = $('.text-5').val();
$('<div>' + aaa + '<br />' + bbb + '<br />' + ccc + '<br />' + ccc + '<br />' + ddd + '<br />' + eee + '</div>').appendTo('.results-div');
});

Here is a fiddle that does what I think you want done:
http://jsfiddle.net/KjHB3/3/
Here is the HTML code:
<input type="text" name="text1" id="text1" /><br/>
<input type="text" name="text2" id="text2" /><br/>
<input type="text" name="text3" id="text3" /><br/>
<input type="text" name="text4" id="text4" /><br/>
<input type="text" name="text5" id="text5" /><br/>
<input type="button" value="submit" id="submit" />
<div id="result">replace</div>
Here is the javascript code:
$("#submit").click(function() {
// Extract all the values into an array
var valArray = [];
$("input[type=text]").each(function(index, el) {
valArray[index] = jQuery(el).val();
});
// Output list of values (in order they appear in form)
$("#result").html("In order of text box: <ol id='list1'></ol>");
$.each(valArray, function(index, value) {
$("#list1").append("<li>" + value + "</li>");
});
// Output list of values (in sorted order)
$("#result").append("In sorted order: <ol id='list2'></ol>");
valArray = valArray.sort();
$.each(valArray, function(index, value) {
if (value != null && value != "") {
$("#list2").append("<li>" + value + "</li>");
}
});
});

Your code appears to be correct, except for the line document.getElementById('txt[i]').value + ' ';. There's nothing writing the values back to the document.
First, starting with the selector, you need to change 'txt[i]' to 'text'+i, because the browser is looking for an element with id txt[i] and finding nothing, thus doing nothing. Also, you should use jQuery, since it makes everything more concise.
Then, to write back to the document, you need to set the value. What your current code (.value + ' ';) does is it gets a value, then adds it to the string ' ', then the statement ends. What you need to do is to set the value of the string, with jQuery (.val(txt[i]);) or stock Javascript (.value = txt[i];).
So, to conclude, just swap the code inside the for loop in your code with this line:
$("input:text[name=text"+i+"]").val(txt[i]);

Let me break down your code in two part to show why it is not working yet.
function GetInputValues() {
var txt = new array[];
var txt[0] = $('input:text[name=text1]').val();
var txt[1] = $('input:text[name=text2]').val();
var txt[2] = $('input:text[name=text3]').val();
var txt[3] = $('input:text[name=text4]').val();
var txt[4] = $('input:text[name=text5]').val();
txt.sort();
return txt; // added by me to encapsulate getting the values
}
The first part of your function myFunction() is correct. You are using jQuery to get the values of the input boxes and writing the values into an array.
The second part has some mistakes:
for (var i = 0; i < txt.length; i++) {
document.getElementById('txt[i]').value + ' ';
}
The function document.getElementById("lastname") returns the html-element whose id is lastname. So in your for-loop you are trying to get the value but you already have the values in your array txt. On top this 'txt[i]' is only a string. So javascript tries to find an element that matches <... id="txt[i]" ...>. But you do not want to get the values you want to write the values back into the document. Assuming you have a div like this <div id='txt[i]'> ...</div> you could wrhite your code like this:
for (var i = 0; i < txt.length; i++) {
document.getElementById('txt[i]').innerHTML += txt[i];
}
Another way would be to join the array:
var myInputValues = GetInputValues(); // this returns your array txt
document.getElementById('myResult').InnerHTML = myInputValues.join(", ");
This assumes that you have a element with id=myResult for example <div id='myResult'>..</div>
Update to adress issues in your code
Your fiddle has this part:
myFunction(txt) { // <-- function declaration: there is something missing here
var myInputValues = GetInputValues(); // this returns your array txt
document.getElementById('myResult').InnerHTML = myInputValues.join(", ");
} //<--- this is the end of myfunction
}); // <-- these do not belong here
// you never execute myFunction
You have to define the function and later call it. Since your mistakes are so basic i really recommend to start with a tutorial to learn javascript. I can recommend Eloquent JavaScript:
to learn the basics of functions
to understand the basics about the Document-Object Model

Script doesn't work correct

I use this script to show buttons on my page
<script type="text/javascript">
function buttonize(cellvalue, options, rowobject) {
var buttons;
if (rowobject[5] == "False") {
buttons += '<input type="button" value="Edit" onclick="editQuestionnaire(' + options.rowId + ')">';
}
buttons += '<input type="button" value="Delete" onclick="deleteQuestionnaire(' + options.rowId + ')">';
return buttons;
}
</script>
I get buttons that I need, but also I get undefined before buttons.
How to make it does not appear?

You have not initialized your variable with any value here:
var buttons;
so its value is undefined.
Then you are appending string data to it
buttons += '<input type="...
so its current value has to be converted to a string before - and that gets you "undefined".
So just initialize your variable with an empty string at the beginning:
var buttons = "";

Declare buttons with empty string:
var buttons = '';

try to initialize the variable buttons.
var buttons = ''; // since it will contain string..use ''

How to call on text from a textbox to set a variable in javascript

I have a bit of a predicament. I am trying to run a variable on a loop so that it can change the loop. Here is the code that I have at the present time.
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="text" NAME="inputbox" id="Variable"><P>
</FORM>
<script type="text/javascript">
document.getElementById("Variable").value = i;
var i=5;
for (i=0;i<=5;i++)
{
document.write(" " + i);
document.write("<br />");
}
</script>
I am trying to call upon the text in the textbox from the form in order to define var i. I would also like to point out that I am no master of HTML, and if you see that I have done this all wrong, feel free to tell me that it cannot be done.

I think you mean something like this:
var count = parseInt(document.getElementById("Variable").value, 10);
var i;
for (i = 0; i < count; ++i) {
// ...do something...
}
What that does:
Looks up the element by its ID (you already had that): document.getElementById("Variable').
Retrieves the value of its value property, which is a string.
Converts the string into an number via parseInt, using decimal (as opposed to octal or hexadecimal).
Loops from zero (inclusive) to that number (exclusive).
Note that you can't use document.write after the main parse (initial load) of the page, and you probably don't want to use the value from a form field before the main parse of the page is complete, so you probably won't be doing document.write here. You might set the innerHTML of an element, something like that.
Re my "...you can't use document.write after the main parse...": Technically, you can, but you'll completely replace the page rather than just adding to it.
Re my "...and you probably don't want to use the value from a form field before the main parse...is complete...": You can, though, as long as the form field is above the script in the page markup. I did literally mean you probably don't want to, presumably you want the user to enter some value first.
Update: Here's a more complete example, with a live copy to play with:
var element, value, count, i;
element = document.getElementById("Variable");
if (!element) {
display("Element 'Variable' not found.");
}
else {
value = element.value;
count = parseInt(value, 10);
if (isNaN(count)) {
display("'" + value + "' is not numeric");
}
else {
for (i = 0; i < count; ++i) {
display("Loop " + i);
}
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
Live copy, the display function is obviously a bit of a placeholder for whatever it is you actually want to do.

I did not understand your exact question. but I guess this is your solution :
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="text" NAME="inputbox" id="Variable">
<input type="button" value="run" onclick="renderIt()" />
<P>
</FORM>
<script type="text/javascript">
function renderIt()
{
var max = parseInt(document.getElementById("Variable").value);
for (i=0;i<=max;i++)
{
document.write(" " + i);
document.write("<br />");
}
}
</script>