Using a value from html with the name="example"

0
votes

I created a page with a form, where you can enter a name. When you submit the name, the name is stored under the name "bezeichnung". Now i want to use the the input "bezeichnung" as a button label. And append it to the body of the page.

This is the form: 

<head>
    <link rel="stylesheet" href="\User\stl.css"/>
</head>

    <body>
        <h1> Neue Station hinzufügen</h1>
        <form id="stationenformular" name="stationenformular" action="indexAktualisierung.html"  method="get">
            <div>
                <label for="bezeichnung">Bezeichung der neuen Station:</label>
                <input type="text" id="bezeichnung" name="bezeichung" />
            </div>
            <br><br>
            <div>
                <label for="ipadresse"> IP Adresse des  Raspberry Pi:</label>
                <input type="text" id="ipadresse" name="ipadresse"/text> 
            </div>
            <div>
            <br>
            <input type="submit" value="Abschicken"/>
            </div>
        </form>
    </body>
</head>

and this the function in another html script:

var x = document.getElementsByName("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x);            // Create a text node
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);
4
javascriptjqueryhtml
there's a typo in your HTML <input type="text" id="bezeichnung" name="bezeichung" /> should be <input type="text" id="bezeichnung" name="bezeichnung" /> – Yvonne Aburrow
Is your javascript embedded in the same html file like your html form? – Julian Schmuckli
no it is in another html file – babschili

4 Answers

1
votes

For first your name is bezeichung, not bezeichnung. Also getElementsByName returns an array-like object. You need to get the first item from your elements;

var x = document.getElementsByName("bezeichnung")[0]; // Get the first 
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x.value);            // Create a text node with x's value
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);

See example. I added text by default.

var x = document.getElementsByName("bezeichnung")[0];
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x.value);            // Create a text node
btn.appendChild(t);                            // Append the text to <button>
document.body.appendChild(btn);
<body>
    <h1> Neue Station hinzufügen</h1>
    <form id="stationenformular" name="stationenformular" action="indexAktualisierung.html"  method="get">
       <div>
           <label for="bezeichnung">Bezeichung der neuen Station:</label>
           <input type="text" id="bezeichnung" name="bezeichnung" value="Test"/>
       </div>
       <br><br>
       <div>
           <label for="ipadresse"> IP Adresse des  Raspberry Pi:</label>
           <input type="text" id="ipadresse" name="ipadresse"/text> 
       </div>
       <div>
          <br>
          <input type="submit" value="Abschicken"/>
       </div>
    </form>
</body>
0
votes

To get a unique instance of the bezeichnung input field, you could use var x = document.getElementsByName("bezeichnung")[0]; or var x = document.getElementById("bezeichnung");

As Suren Srapyan said, getElementsByName returns an array of all elements with that name, so you need to specify which one you mean by putting the position in the array of the object you want.

However, as you presumably only want one instance of bezeichnung, it's easier to use getElementById.

0
votes
var x = document.getElementsByName("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
var t = document.createTextNode(x);            // Create a text node                         
btn.parentNode.insertBefore(t, btn);        // Append the text to <button>
document.body.appendChild(btn);
0
votes

Try to change getElementsByName with getElementById

var x = document.getElementById("bezeichnung");
var btn = document.createElement("BUTTON");    // Create a <button> element
btn.innerText = x.value;                            // Append the text to <button>
document.body.appendChild(btn);

Demo