Use .value to get the value of the input element.
Also, the function should do something with the return value, such as display it in an alert. And to prevent the form from submitting and reloading the page, it should return false.
You shouldn’t add the handler with both onsubmit in the HTML and assigning to onsubmit in JavaScript.
document.getElementById("myForm").onsubmit = function() {
document.getElementById("message").innerText = zipCode(document.getElementById("zip").value);
return false;
};
// Zip Code locator
const zipCode = (input) => {
// Makes sure zip code is 5 numbers long
if (input.length !== 5) {
return 'Please enter a valid 5 digit zipcode';
}
if (input.slice(0, 2) === '06') {
return 'Your closest location is in CT.';
} else if (input.slice(0, 2) === '01') {
return 'Your closest location is in MA';
} else {
return 'No location found';
}
}
<p>Please enter your zip code:</p>
<form id="myForm">
<input id="zip" type="text">
<input type="submit">
</form>
<div id="message"></div>
First you should add an id to your input.
then you can use document.getElementById
let input = document.getElementById('zipcode');
// Zip Code locator
const zipCode = () => {
// Makes sure zip code is 5 numbers long
if (input.length !== 5) {
return 'Please enter a valid 5 digit zipcode';
}
if (input.slice(0, 2) === '06') {
return 'Your closest location is in CT.';
} else if (input.slice(0, 2) === '01') {
return 'Your closest location is in MA';
} else {
return 'No location found';
}
}
<p>Please enter your zip code:</p>
<form id="myForm" onsubmit="zipCode()">
<input type="text" id="zipcode">
<input type="submit">
</form>
Right now, I am trying to create an application that takes a zip code as an input and returns the closest location to that person. The problem I am having is being able to take the input in as the argument in my Javascript function. Here’s a piece of the application:
document.getElementById("myForm").onsubmit = function() {
zipCode()
};
// Zip Code locator
const zipCode = (input) => {
// Makes sure zip code is 5 numbers long
if (input.length !== 5) {
return 'Please enter a valid 5 digit zipcode';
}
if (input.slice(0, 2) === '06') {
return 'Your closest location is in CT.';
} else if (input.slice(0, 2) === '01') {
return 'Your closest location is in MA';
} else {
return 'No location found';
}
}
<p>Please enter your zip code:</p>
<form id="myForm" onsubmit="zipCode()">
<input type="text">
<input type="submit">
</form>
Thank you! Is there anyway I can do this without an alert? I was hoping that after the form was submitted, the answer would populate there instead of as an alert.
That was just example code. You can do anything you want with the return value.
I’ve updated the example to put the value in a DIV.
