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>

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.

• javascript
• html
• input
• alert

Share Improve this question Follow edited Nov 7, 2017 at 5:33 Paige B. asked Nov 7, 2017 at 4:47 Paige B.Paige B. 1911 silver badge55 bronze badges 3

• 2 Try preventDefault to prevent submitting your form. – Harsh Patel Commented Nov 7, 2017 at 4:50
• 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 Commented Nov 7, 2017 at 4:53
• I don't see the problem, this works fine in Chrome: jsfiddle/2ovdsgac – Radio Commented Nov 7, 2017 at 5:06

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>

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

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>

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>

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>

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