DOM javascript Form elements accessing

Question

I have started javascript DOM manipulation, I come across an error maybe. Whenever I input in name field like jaykumar and press click me button .In demo, jaykumar comes and with in few microseconds go.

function myfunction() {
  var x = document.getElementById("myform").elements["fname"].value;
  document.getElementById("demo").innerHTML = x;
}

<form id="myform">
  name<input type="textbox" name="fname"> email
  <input type="textbox" name="email">
  <button onclick="myfunction()"> Click me</button>

</form>
<div id="demo"></div>

That’s because button creates a submit button by default, so the form submits, and that makes your page reload. Use type="button" to make it a click button instead. — C3roe
– C3roe, Commented Feb 18, 2021 at 10:22
it worked. But giving "[object HTMLInputElement]" instead of name "jaykumar" — Jaykumar
– Jaykumar, Commented Feb 18, 2021 at 10:27
@Jaykumar note in my edit of your question I added .value (I thought this was a typo but fixes the problem you stated). Also see my answer. — Jamiec
– Jamiec, Commented Feb 18, 2021 at 10:28
hi , if I want to access name and email with only var x =document.getElementById("myform").elements. — Jaykumar
– Jaykumar, Commented Feb 18, 2021 at 10:36

Jamiec · Accepted Answer · 2021-02-18 10:27:20Z

1

A button inside a form's default behaviour is to submit the form. To change this make the button of type="button"

function myfunction() {
  var x = document.getElementById("myform").elements["fname"].value;
  document.getElementById("demo").innerHTML = x;
}

<form id="myform">
  name<input type="textbox" name="fname"> email
  <input type="textbox" name="email">
  <button type="button" onclick="myfunction()"> Click me</button>

</form>
<div id="demo"></div>

answered Feb 18, 2021 at 10:27

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

DOM javascript Form elements accessing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related