Save variable number of answers to single textbox with Java Script

Question

I am learning JS and I am not yet familiar with internal workings. Can someone point out the error in my thinking?

The basic idea is to ask a complex question, construct the answer with JS (to a CSV syntax) and feed it to a textbox. (From here it will be processed to a db.) Example included below: How many children do you have? What is their names and age?

Perhaps, the new element generated by the first button is not added to the document? How to do this, or how to address the value in it?

How can I make the values submitted to previous lines stick in the event of adding a new line. For example 'Jack' and '10' is written to the first line, the user pressed the add new line, than this information should stay in the first line.

Incorrectly working example: The save button stops working if the code in the loop is added.

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

        <p>How many children do you have? What is their names and age?</p>
        <input type="text" id="qchildren" />
        <div id="qchildren-answer-wrapper"></div>

        <button type="button" onclick="addNew()">Add new entry</button>
        <button type="button" onclick="save()">Save</button>
        <script>
        var lines = 0;

        function addNew() {
            lines++;
            document.getElementById("qchildren-answer-wrapper").innerHTML += 'Gyermek neve:<input type="text" id="qchildrenname' + window.lines + '" /> Gyermek eletkora:<input type="text" id="qchildrenage' + window.lines + '" /><br/>';
        }

        function save() {
            var answer = '';
            for (var ii = 0; ii < window.lines; ii++) {
                answer += document.getElementById('qchildrenname' + ii.toString()).value.toString() + ',' + document.getElementById('qchildrenage' + ii.toString()).value.toString() + ';';
            }
            document.getElementById("qchildren").value = answer;
        }
        < /script>
    </body>
</html>

Instead of using multiple input elements to add extra lines, use a textarea element. — user1726343
– user1726343, Commented Dec 27, 2012 at 14:37
My task is more complex. It might be necessary to use dropdown boxes, date choosers, etc. The user can not be prompted to construct correct syntax. — Sziro
– Sziro, Commented Dec 27, 2012 at 14:41

malkassem · Accepted Answer · 2012-12-27 14:59:04Z

1

=Below code should work (AddNew function changed):

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>

<p>How many children do you have? What is their names and age?</p>
 <input type="text" id="qchildren" />
 <div id="qchildren-answer-wrapper"></div>



<button type="button" onclick="addNew()">Add new entry</button>
<button type="button" onclick="save()">Save</button>

<script>
var lines=0;
function addNew()
{
lines++;
var newElement = document.createElement("span");
  newElement.innerHTML =  'Gyermek neve:<input type="text" id="qchildrenname'+window.lines+'" /> Gyermek eletkora:<input type="text" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(newElement);
}

function save()
{
var answer='';
for (var ii=1;ii<=window.lines;ii++)
{ 
answer+=document.getElementById('qchildrenname'+ii.toString()).value.toString()+','+document.getElementById('qchildrenage'+ii.toString()).value.toString()+';';
}
document.getElementById("qchildren").value=answer;
}
</script>


</body>
</html>

edited Dec 27, 2012 at 14:59

answered Dec 27, 2012 at 14:42

malkassem

1,9571 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sziro Over a year ago

Thanks, that solves the data sticking at adding a new line. Save still doesn't work.

malkassem Over a year ago

Adjusted the code for save as well. Need to start at 1 instead of 0.

Viktor S. · Accepted Answer · 2012-12-27 15:00:36Z

1

Try code like this:

function addNew()
{
    var div = document.createElement('div');
    div.innerHTML = 'Gyermek neve:<input type="text" id="qchildrenname'+window.lines+'" /> Gyermek eletkora:<input type="text" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(div );
lines++;
}

Demo: http://jsfiddle.net/JByVg/8/

What happens in your case is that all previously created elements are recreated again because element.innerHTML += "some_html" is equal to element.innerHTML = element.innerHTML + "some_html" or, more clear, I suppose, var oldHtml = element.innerHTML;element.innerHTML = ""; element.innerHTML = oldHtml + "some_html"

Browser does not populate value="..." entered by user when you do var oldHtml = element.innerHTML and after += you have old elements recreated without values entered by user. At the same time, appendChild does not recreate old elements.

This example demonstrates how .innerHTML returns only initial HTML (I've added value="test" to your qchildrenname element code)

edited Dec 27, 2012 at 15:00

answered Dec 27, 2012 at 14:42

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

3 Comments

Sziro Over a year ago

Thanks, that solves the data sticking at adding a new line. Save still doesn't work.

Viktor S. Over a year ago

See updated answer. I've moved lines++ at the end of addNew

Viktor S. Over a year ago

When you add new items, you start with 1 (because lines is incremented before you use it), but when you try to collect values - you start with 0

Collectives™ on Stack Overflow

Save variable number of answers to single textbox with Java Script

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related