Need help getting and using user input with HTML form in JavaScript

Question

I need help in asking the user for input and saving the input into a variable to do things with it. I'm trying to find a method that's similar to how Java uses Scanner to ask for user input.

I want to use an input box for the user to enter in their input. Simply capturing the value of the input is not working for me since the entire page refreshes as soon as the form gets submitted. I'm also not sure how I can use the variable containing the user input outside of the function scope as it becomes undefined when trying to use it outside of the function.

//html file------------------------------------------
<form id="form1">
    <label for="cardNum">MasterCard Number:</label>
    <input id="cardNum" name="num" type="text" placeholder="Enter a 16-digit number">
    <button onclick="outputnum()" id="submit">Submit</button>
</form>
<h1>Welcome</h1>

//JS FILE--------------------------------------------

function outputnum(){
    var number = document.getElementById("cardNum").value;
    document.querySelector("h1").innerHTML = number;
}

I am not trying to use a prompt/alert function to get the user input. I need to get it from an input box.

You can prevent the form from submitting (this is what is causing the page to refresh) with event.preventDefault() See developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault Otherwise, if you are wanting something close to the java scanners, probably you can use a prompt developer.mozilla.org/en-US/docs/Web/API/Window/prompt — Spangle
– Spangle, Commented Oct 27, 2019 at 22:59

Chava Geldzahler · Accepted Answer · 2019-10-28 00:03:57Z

2

If you don't need the form to submit, change the button to button type by adding type="button" after id="submit".

This will prevent the page from reloading.

To prevent the page from reloading on hitting Enter, you can add this line to your form:

<Input type="submit" hidden disabled>

edited Oct 28, 2019 at 0:03

Chava Geldzahler

3,7501 gold badge20 silver badges32 bronze badges

answered Oct 27, 2019 at 23:31

Moshe Gross

1,3931 gold badge10 silver badges17 bronze badges

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

2 Comments

albert_anthony6 Over a year ago

Thanks for that advice.

albert_anthony6 Over a year ago

What about when the user simply enters the "Enter" key on their keyboard? The page still refreshes. Is there a way around that as well?

Spangle · Accepted Answer · 2019-10-28 01:15:00Z

Below is a basic example that will prevent the default action of the submit. Let me know if you have any questions :)

var submitEl = document.getElementById('submitting');
var inputValueEl = document.getElementById('cardNum');

// Add a event listener to the submit button and prevent the form submit
submitEl.addEventListener('click', function(event) {
    // preventDefault() will prevent the submit, which will cause the page to refresh
    event.preventDefault();
    // validate credit card number
    validateCard(inputValueEl.value);
});


function validateCard(num) {
    // Do stuff with the num value here.
    alert(num);
}

<form id="form1">
    <label for="cardNum">MasterCard Number:</label>
    <input id="cardNum" name="num" type="text" placeholder="Enter a 16-digit number">
    <button id="submitting" type="submit">Submit</button>
</form>
<h1>Welcome</h1>

Collectives™ on Stack Overflow

Need help getting and using user input with HTML form in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related