Getting text from a forms input. Javascript

Question

I have a lot more code, so this might not look very clean. I am trying to grab some text out of the email input and put in where the p tag is. It doesn't seem to be working. Can someone assist?

 <form class="modal-content" action="#" style="margin-top:10%;">
   <div class="container">
     <label><b>Email</b></label>
     <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required>
     <br/><br/> 
   <div class="clearfix">
     <button type="submit" onclick="myFunction()" class="signupbtn">Sign Up</button>
    </div>
   </div>
 </form>

 <p id="demo"></p>

 <script>
 function myFunction() {
   document.getElementById("emailIn").value
   document.getElementById("demo").innerHTML = text;
 }
 </script>

Wow! I hate those slips. Thanks everyone! The "var text" was the culprit. — I'm just a coder for fun, Jun 27 '17 at 17:15

Mohideen bin Mohammed · Answer 1 · 2017-06-27T17:19:38.140

2

Do small Changes in your code ,

<script>
    function myFunction() {
        document.getElementById("demo").value = document.getElementById("emailIn").value;
    }

edited Jun 27 '17 at 17:19

answered Jun 27 '17 at 17:12

Mohideen bin Mohammed

18,813
10
112
118

Your code causes `text` to become a global variable! Ouch! – Scott Marcus Jun 27 '17 at 17:17
Its defined inside function then how it will become global? – Mohideen bin Mohammed Jun 27 '17 at 17:18
It's not defined in the function. `var` or `let` declare variables. You are just referencing `text`, and since it wasn't formally declared anywhere else, it becomes global. – Scott Marcus Jun 27 '17 at 17:19
Even though i made change. I think you wrongly comment – Mohideen bin Mohammed Jun 27 '17 at 17:20
No, I didn't LOL. – Scott Marcus Jun 27 '17 at 17:20
You put same comment for another post – Mohideen bin Mohammed Jun 27 '17 at 17:21
Anyway answer altered. Will you take out your downvote – Mohideen bin Mohammed Jun 27 '17 at 17:22
Because other answer did the same thing. – Scott Marcus Jun 27 '17 at 17:23

Scott Marcus · Answer 2 · 2017-06-27T17:11:52.363

The problem is that you are just trying to get the data with text (which isn't declared anywhere) instead of the value of the input.

You could have had the line be:

var text = document.getElementById("emailIn").value;

And then your code would have worked, but since you are only going to use that information just one time, making a variable for storage of the data doesn't make good sense. Instead, you can just get the value and assign it all in one line.

Also, don't use inline HTML event attributes (onclick). Keep all your JavaScript completely separate from your HTML and use modern standards for setting up event handlers. Here's why.

Lastly, .innerHTML causes the string of data you provide to be parsed by the HTML parser. Since the value you are working with won't contain any HTML, it's better to use .textContent, which doesn't process the string as HTML. It's a bit better on performance to use the appropriate one.

// Get reference to the submit button
var btn = document.querySelector(".signupbtn");

// Modern DOM standard for setting up event listeners
btn.addEventListener("click", myFunction);

function myFunction() {  
   // Use textContent instead of innerHTML when there won't be any HTML
   document.getElementById("demo").textContent = document.getElementById("emailIn").value;
 }

<form class="modal-content" action="#" style="margin-top:10%;">
   <div class="container">
     <label><b>Email</b></label>
     <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required>
     <br/><br/> 
   <div class="clearfix">
     <button type="submit" class="signupbtn">Sign Up</button>
    </div>
   </div>
 </form>

 <p id="demo"></p>

score 1 · Accepted Answer · answered Jun 27 '17 at 17:07

1

You didn't declare text or set it to the value of the input

 function myFunction() {
   var text = document.getElementById("emailIn").value
   document.getElementById("demo").innerHTML = text;
 }

answered Jun 27 '17 at 17:07

Musa

96,336
17
118
137

DCR · Answer 4 · 2017-06-27T17:17:34.860

0

you almost had it! just define text in your function

function myFunction() {
    text=document.getElementById("emailIn").value
   document.getElementById("demo").innerHTML = text;
 }

<form class="modal-content" action="#" style="margin-top:10%;">
   <div class="container">
     <label><b>Email</b></label>
     <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required>
     <br/><br/> 
   <div class="clearfix">
     <button type="submit" onclick="myFunction()" class="signupbtn">Sign Up</button>
    </div>
   </div>
 </form>

 <p id="demo">xxxx</p>

edited Jun 27 '17 at 17:17

answered Jun 27 '17 at 17:08

DCR

14,737
12
52
115

Your code causes `text` to become a global variable! Ouch! – Scott Marcus Jun 27 '17 at 17:17

score 0 · Answer 5 · answered Jun 27 '17 at 17:23

I do things like this thusly:

<form class="modal-content" action="#" style="margin-top:10%;">
 <div class="container">
  <label><b>Email</b></label>
   <input id="emailIn" type="email" placeholder=" example@gmail.com" name="email" required>
  <br/><br/>
  <div class="clearfix">
    <button type="submit" class="signupbtn" id="button">Sign Up</button>
  </div>
  </div>
 </form>

<p id="demo"></p>

<script>
   var button = document.getElementById('button');
   var input = document.getElementById('emailIn');

   button.addEventListener('click', function(){
    var addToP = input.value;
    document.getElementById('demo').innerHTML = demo.innerHTML + '<p>' + addToP + '</p>';
    input.value = '';
  })
</script>

That's great that you do things thusly, but you didn't explain what the problem was or why your code solves the problem. That's what a good answer should do. — Scott Marcus, Jun 27 '17 at 17:44

Getting text from a forms input. Javascript

5 Answers5