CODEWITHSUNDEEP
javascripthtml
user1563221
user1563221

Reputation: 391

Show data in a single page Javascript and HTML forms

I'm new to Javascript. Can I show direct data from an HTML form on the same page. My code is here:

<html>
  <head>
    <title></title>
  </head>
  <script>
    document.getElementById("btn").onclick = avc;
    function avc(){
      var a = document.getElementsByName("firstname").value;
      document.getElementsByName("abc").innerHTML = a;
    }
  </script>
  <body>
    <form method="post">
      First name: <input id="fname" type="text" name="firstname"><br>
      <input id="btn" type="submit">
    </form>
    <div name="abc"></div>
  </body>
</html>

Upvotes: 1

Views: 1337

Answers (3)

adc
adc

Reputation: 781

Yes you can with 

<script>       
  document.getElementById('abc').innerHTML=document.getElementById('fname').value;
</script>

at the end

if you want that every time you write something in text box changes the value in div abc try this:

<html>
  <head></head>
  <body>    
    <form method="post">
      First name: <input id="fname" type="text" name="firstname" onKeyUp="f()"><br>
      <input id="btn" type="submit">
    </form>
    <div id="abc"></div>

    <script>
      function f() {
        document.getElementById('abc').innerHTML=document.getElementById('fname').value;
      }

      f(document.getElementById('fname').value);
    </script>

  </body>
</html>

Upvotes: 1

bashleigh
bashleigh

Reputation: 9324

Using the ID for the element would also work when getting the value.

var a = document.getElementById('fname').value;

Upvotes: 1

alex
alex

Reputation: 490481

Yes, but you need to subscript the correct element like so...

var a = document.getElementsByName("firstname")[0].value;

Upvotes: 0

Related Questions