CODEWITHSUNDEEP
javascripthtmlforms
user1837293
user1837293

Reputation: 1666

Writing back to HTML after reading form input doesn't work (Javascript)?

I try to follow the simple example on W3Schools to read a value from a form and write back to the HTML page using pure Javascript.

Please refer to JSFiddle for the code:

<body>
    <form action="index.javascript.html" onsubmit="omzetten()">
        <fieldset>
            <legend>Omzetten naar decimaal stelsel:</legend>
            <p class="loginlabel">Getal</p>
            <input type="text" id="getal" class="loginfield" />
        </fieldset>
        <br/>
        <input type="button" id="omzetten" value="Omzetten" />
    </form>
    <p id="antwoord">[empty]</p>
</body>

And in file app_javascripts.js in subdirectory /js (referred to in the header):

function omzetten() {

     var getal = document.getElementById("getal");
    var bronstelsel = 2;
    var antwoord = 0;
    var j = 0;
    for (var i = getal.length - 1; i >= 0; i--) {
        antwoord += getal.substr(i, 1) * Math.pow(bronstelsel, j);
        j++;
    }
    var antwoordText = document.getElementById("antwoord");
    antwoordText.innerHTML = antwoord;
}

Why does the result ("antwoord") not show in paragraph-element with id "antwoord"?

Upvotes: 1

Views: 494

Answers (3)

Jake
Jake

Reputation: 66

var getal = document.getElementById("getal");

returns an Element. However you are treating the Element like a string.

Use

var getal = document.getElementById("getal").value;

to retrieve the value from the 'getal' Element.

Additionally your function never executes because your form never submits. You would need an input of type 'submit'.

Updating the page after submitting a form may not be what you want. You might want to use onclick on your button rather than submitting the form.

Here is an updated Fiddle. I changed from onsubmit to onclick (on the button), fixed the .value issue described above, and changed the function name because it conflicted with the button ID.

Upvotes: 1

Barmar
Barmar

Reputation: 780869

You have several problems.

First, you need to change the input to type="submit" so that it will invoke the onsubmit handler for the form. Another option would be to put the function call in the button's onclick attribute. If you're not submitting the form to a server, you don't really need the inputs to be inside a <form>.

Second, you need to add return false; to the onsubmit, so that it won't actually submit the form.

Third, you gave the function the same name as the id of the submit button. The problem with this is that IDs are automatically turned into global variables, which replaces the global variable containing the function. In my code below I simply removed the ID, since it's not used for anything.

Fourth, to get the input from the text field, you need to get its .value property:

var getal = document.getElementById("getal").value;

And specifically for the fiddle, you need to select one of the "No wrap" options from the menu at the top left. Otherwise, all the Javascript is inside the window.onload function, and functions are not in the global scope used by inline Javascript in tags.

function omzetten() {

  // inputRead:
  var getal = document.getElementById("getal").value;
  var bronstelsel = 2;
  var antwoord = 0;
  var j = 0;
  for (var i = getal.length - 1; i >= 0; i--) {
    antwoord += getal.substr(i, 1) * Math.pow(bronstelsel, j);
    j++;
  }
  var antwoordText = document.getElementById("antwoord");
  antwoordText.innerHTML = antwoord;
}
<form action="index.javascript.html" onsubmit="omzetten(); return false;">
  <fieldset>
    <legend>Omzetten naar decimaal stelsel:</legend>
    <p class="loginlabel">Getal</p>
    <input type="text" id="getal" class="loginfield" />
  </fieldset>
  <br/>
  <input type="submit" value="Omzetten" />
</form>
<p id="antwoord">[empty]</p>

Upvotes: 2

M Falanga
M Falanga

Reputation: 2077

Try changing your button to a submit:

<input type="submit" id="omzetten" value="Omzetten" />

Upvotes: 1

Related Questions