How to add text and input with button multiple times

Question

I am creating a website that will allow for a user-specified number of inputs. I want the user to be able to click a button and a new text and input box will appear that they can type in.

Here is my current code:

<!-- adds new company input field everytime button is clicked -->
        <input type="button" onclick="addInput()">
        <span id="companyX"></span><span id="companyBoxX"></span>
        <script>
            var countBox = 2;
            var boxName = 0;

            function addInput()
            {
                var boxName = "Company " + countBox;

                var company = document.getElementById("companyX");
                company.innerHTML += boxName;
                var newBreak = document.createElement('br');
                company.appendChild(newBreak);

                document.getElementById('companyBoxX').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" " /><br/>';
                countBox += 1;
            }
        </script>

Currently the problem is that everytime I try to add a new text or input field it just appends to the current text or input. I would like them to appear side by side each on a new line. Ex:

Company 1: (Input Box 1)
Company 2: (Input Box 2)
...

I am very new to Javascript and HTML and any help would be appreciated. Thanks!

Leo Rossetti · Accepted Answer · 2020-04-11 21:51:49Z

1

I believe you were in the right path. See if this is closer to what you need.

    var countBox = 2;
var boxName = 0;

function addInput()
{
    var boxLabel = "<label>Company " + countBox + "</label>";
    var element = document.getElementById('my-content');
    var html = '<div class="row">'+boxLabel+': <input type="text" id="'+boxName+'" value="'+boxName+'" " /></div>';
    appendHtml(element, html);
    countBox += 1;
    boxName += 1;
}

function appendHtml(el, str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    while (div.children.length > 0) {
        el.appendChild(div.children[0]);
    }
}

<input type="button" onclick="addInput()" value="Add new">
<div id="my-content" class="content">

</div>

I believe this is closer to what you need?

edited Apr 11, 2020 at 21:51

answered Apr 11, 2020 at 8:01

Leo Rossetti

1811 gold badge3 silver badges13 bronze badges

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

4 Comments

brunerm99 Over a year ago

Thank you very much, this was very straight-forward and easy-to-understand.

brunerm99 Over a year ago

When I check the HTML this javascript creates it says all input fields have an id = 0. Is it possible for them to all have different id's so I can use the input information?

Leo Rossetti Over a year ago

Yes, I just added a new row in the sample. Take a look.

brunerm99 Over a year ago

I did that exact same thing and came back to resolve it but you already answered! Thanks for the help!

caramba · Accepted Answer · 2020-04-11 08:00:02Z

0

You were using the right things and kind of closed... read trough the code and add a comment if something is unclear. Hope it helps

let myButton = document.querySelector('#add-those-inputs');
myButton.addEventListener('click', event => { addInput(); });

let myPlaceholder = document.querySelector('.my-placeholder');
let addInput = function() {
    let companyInputCounter = document.querySelectorAll('.my-company-input');
    let inputWrapper = document.createElement('div');
    let input = document.createElement('input');
    input.classList.add('my-company-input');
    input.type = 'text';
    input.value = 'Company_' + companyInputCounter.length;
    input.id = 'Company_' + companyInputCounter.length;
    inputWrapper.appendChild(input);
    myPlaceholder.appendChild(inputWrapper);
};

<input id="add-those-inputs" type="button" value="Click me to add more">
<div class="my-placeholder"></div>

answered Apr 11, 2020 at 8:00

caramba

22.5k20 gold badges94 silver badges134 bronze badges

1 Comment

brunerm99 Over a year ago

If I wanted to take the input and send it back to my django form, for example, is the 'id' I would use the 'Company_' + companyInputCounter.length? Also, what is the point of using the 'let' keyword rather than simply creating the function and the parameters? Thank you very much for the help!

Collectives™ on Stack Overflow

How to add text and input with button multiple times

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related