how do I enter a string into a field with a button?

Question

I am new here pls correct me if I do something wrong. I couldn't find a solution for this simple issue, yet. So I am trying to programm a field where I can enter any text and a button to submit it. When I click on the button the text should be displayed in an other div.

That's what I've programmed so far: Field + Button:

                            <form>
                                <div>
                                  <input name="snfield" type="text" id="snfield" value="any text" maxlength="20" minlength="1" required> 
                                  <button onclick="addnewSN('snfield')"><label id="labelsn" for="snfield">Enter Serialnumber</label></button>
                                </div>
                            </form>

Script:

        function addnewSN(text) {
            document.getElementById('sn').innerHTML += text;
            
        }

Div for displaying the text:

<div id="sn"></div>

When I click on the button the site reloads and the div is empty.

check out this page, it should answer your question: https://stackoverflow.com/questions/13941055/add-a-string-of-text-into-an-input-field-when-user-clicks-a-button — Mohammad Mahdi Zarei, May 17 '23 at 08:34
The problem is in fact, that form is submitted when you click on the button — Maxick, May 17 '23 at 08:39

score 1 · Accepted Answer · answered May 17 '23 at 09:17

1

simplest is to return false from the button onclick code, i.e. onclick="addnewSN('snfield'); return false;" adding onsubmit="return false;" to the form would also work in this snippet as it stands, but may not always be desirable

answered May 17 '23 at 09:17

timchessish

136
5

Thank you very much timchessish, that worked well with the solution of Blerton Rexha! – hanlok May 17 '23 at 10:03

score 0 · Answer 2 · answered May 17 '23 at 08:43

0

Or, in other way

Remove onclick handler
Add handler like this

document.getElementById('target-button').addEventListener('click', function (event) {
    event.preventDefault();
    // find input
    // get value from it
    document.getElementById('sn').innerHTML += 'value';
});

answered May 17 '23 at 08:43

Maxick

68
6

1

Hello Maxick, sorry but I was not able to implement your solution, but the both other solutions worked. Thank you very much for your help! – hanlok May 17 '23 at 10:06

score 0 · Answer 3 · answered May 17 '23 at 08:44

0

You are passing input id to the function, not the input text.
First get the value from input id and add it to 'sn'

function addnewSN(id) {
  const inputText = document.getElementById(id).value
  document.getElementById('sn').innerHTML += inputText;
}

answered May 17 '23 at 08:44

Blerton Rexha

11
3

Thank you very much Blerton! This worked perfect, but I had to add the solution of timchessish aswell so that the text stays and does not disapear after milliseconds again. – hanlok May 17 '23 at 10:01

how do I enter a string into a field with a button?

3 Answers3