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, Nov 07 '17 at 04:53
I don't see the problem, this works fine in Chrome: https://jsfiddle.net/2ovdsgac/ — Radio, Nov 07 '17 at 05:06

score 2 · Answer 1 · answered Nov 07 '17 at 05:00

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>

score 0 · Answer 2 · answered Nov 07 '17 at 04:53

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 07 '17 at 04:53

S M

3,133
5
30
59

Check more here https://stackoverflow.com/questions/7056669/how-to-prevent-default-event-handling-in-an-onclick-method – S M Nov 07 '17 at 04:54

score 0 · Answer 3 · answered Nov 07 '17 at 04:57

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>

score 0 · Answer 4 · answered Nov 07 '17 at 04:57

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>

score 0 · Answer 5 · answered Nov 07 '17 at 05:16

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>

score 0 · Answer 6 · answered Aug 10 '19 at 12:25

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);
});

Save HTML user input to Javascript variables

6 Answers6