Save HTML user input to Javascript variables

Question

I'm testing the waters with HTML/CSS/Javascript. I have a (moderately) firm grasp of the three languages separately, it's just trying to get them to cooperate with each other that is giving me issues.

My CSS and Javascript files are linked externally to my HTML file.

I'm trying to get Javascript to save user input in a variable and show the text in an alert window.

function saveUn() {
  var username = document.getElementById('un').value;
  alert(username);
}

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="saveUn();" />
</form>

Any help is greatly appreciated!

UPDATE: It turns out my problem was, in fact, that I didn't insert my external Javascript file correctly. I fixed it, and now my code works just fine. Typos ruin lives, kids.

Try putting saveUn(); function on onSubmit event of the form(instead of onClick of button) with "return false" (in the function body) if you want just want to display an alert. — Abhishek
– Abhishek, Commented Nov 7, 2017 at 4:53
I don't see the problem, this works fine in Chrome: jsfiddle.net/2ovdsgac — Radio
– Radio, Commented Nov 7, 2017 at 5:06

Bhargav Chudasama · Accepted Answer · 2017-11-07 05:00:12Z

2

try with event.preventDefault();

function saveUn(event) {
  var username = document.getElementById('un').value;
  alert(username);
  event.preventDefault();
}

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="saveUn(event);" />
</form>

answered Nov 7, 2017 at 5:00

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

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

Comments

S M · Accepted Answer · 2017-11-07 04:53:24Z

0

Let your callback return false and pass that on to the onclick handler:

<form>
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" onclick="return saveUn();" />
</form>

function saveUn() {
    var username = document.getElementById('un').value;
    alert(username);
    return false;
}

answered Nov 7, 2017 at 4:53

S M

3,2536 gold badges35 silver badges61 bronze badges

1 Comment

S M Over a year ago

Check more here stackoverflow.com/questions/7056669/…

Harsh Patel · Accepted Answer · 2017-11-07 04:57:23Z

0

Here is the Code that might help you.

    
    document.getElementById("clickHere").addEventListener("click", function(event){
    event.preventDefault()
    var username = document.getElementById('un').value;
    alert(username);
});

<form >
        Username:
        <input type="text" size="12" id="un" /><br />
        <input type="submit" id="clickHere" />
    </form>

answered Nov 7, 2017 at 4:57

Harsh Patel

6,87810 gold badges44 silver badges77 bronze badges

Comments

Abhishek · Accepted Answer · 2017-11-07 04:57:29Z

0

Try this one if you do not want to submit the form and just want display an alert:

<form onSubmit = "return saveUn();">
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" />
</form>
<script>
function saveUn() {
    var username = document.getElementById('un').value;
    alert(username);
    return false;
}
</script>

answered Nov 7, 2017 at 4:57

Abhishek

5397 silver badges26 bronze badges

Comments

Thuc Nguyen · Accepted Answer · 2017-11-07 05:16:38Z

0

You can return boolean value for saveUn(), return false if you do not want to submit

function saveUn() {
  var username = document.getElementById('un').value;
  alert(username);
  return false;
}

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="return saveUn();" />
</form>

answered Nov 7, 2017 at 5:16

Thuc Nguyen

2332 silver badges9 bronze badges

Comments

Aosu Terver · Accepted Answer · 2019-08-10 12:25:54Z

0

Using ES6 this should be better:

<form >
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" id="clickHere" />
</form>   

 const smBtn = document.querySelector("clickHere");
 smBtn.addEventListener("click", (event) => {
    event.preventDefault()
    let username = document.querySelector('un').value;
    alert(username);
});

answered Aug 10, 2019 at 12:25

Aosu Terver

1372 silver badges6 bronze badges

Collectives™ on Stack Overflow

Save HTML user input to Javascript variables

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related