Goal: I am attempting to make a simple search bar that searches for a zip code in the input field and matches it to a zip code in the array. The goal is to create a function that identifies if the zip code exists in the array. If it does it will return a statement if not it will return a different a statement.
Expected Result:
If a zip code entered in the search bar matches a zip code in the array it will say the area is serviced.
If a zip code entered in the search bar does not exist in the array it will say the area is not serviced.
If the user tries to submit a blank input field it will say to enter a zip code.
Actual Result:
If a zip code entered in the search bar matches a zip code in the array it will say the area is not serviced.
If a zip code entered in the search bar does not exist in the array it will say the area is not serviced.
If a blank input field is submitted it will say to enter a zip code.
My Code:
var zip = ["19505", "19506", "19507", "19508", "19510", "19511", "19512", "19518","19519", "19522", "19523", "19526", "18056", "19529", "19530", "19533", "19534", "19535", "19536", "19538", "19539", "19540", "19541", "19542", "19543", "19544", "19545", "19547", "19611", "19601", "19602", "19604", "19605", "19606", "19607", "19608", "19550", "19551", "19554", "19555","19559","19560","19562", "19564", "19565","19609", "19567", "19610"];
function validateSearchbox(){
var input = document.getElementById("search-box")
if(input.value.length > 0){
searchResult();
} else {
document.getElementById("search-result").innerHTML = "Please enter a zip code";
}
};
function searchResult(){
var search = document.getElementById("search-box").value;
var index = zip.indexOf("search");
if(index !== -1){
document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
} else {
document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
}
};
<div id="search">
<input type ="search" id="search-box" placeholder="Zip Code" maxlength="5"/>
<button onClick="validateSearchbox();" id="search-btn"> Search </button>
</div>
<p id="search-result" style="font-size: 30px; font-weight: 500px;"> </p>
Your code is trying to find the index of the string "search" instead of the variable search. The following works:
function searchResult(){
var search = document.getElementById("search-box").value;
var index = zip.indexOf(search); // <--- variable instead of string
if (index !== -1){
document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
} else {
document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
}
};
Your unexpected output is caused by using indexOf with the string "search" instead of the variable search declared on the previous line.
You passed "search" as string in var index = zip.indexOf("search"); You have to pass search as variable like this.
var search = document.getElementById("search-box").value;
var index = zip.indexOf(search);
if(index !== -1){
document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
} else {
document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
}
};```
Your code requires change at this line:
With this, the code will search for the required zip and not the hardcoded zip "search".
var index = zip.indexOf(search);
With the below code, its trying to search for string "search" and giving the index= -1 as string "search" is not present in the Zip array.
var index = zip.indexOf("search");
Good evening all!
I am currently working with google maps api.
The google maps asks for a json format to set directions.
Everything works fine if i make my own json object, but i would like to retrieve data from input fields and store it in the json object.
Right now i can retrieve 1 value from the input field and store it. But i woud like to retrieve multiple values. This is needed to set an direction on the maps. I need to find a way to store the multiple values in an json object as array. Correct my if i wrote some things wrong, i am not a expert :)
"key" : "Array"
See below for the example + Code
This is what i need to try to get:
A user comes to the page and sees 2 input fields, he fills in Amsterdam and Rome but he always needs Paris. So the user press the + icon. Another input field appears and he fills in Paris. when the user submits this below must be the json result from the input fields
"locatie" : ["Berlin", "Amsterdam", "Paris", "Rome"]
This is is my form:
<form onsubmit="return make_json(this);">
Locatie: <input type="text" name="locatie">
<input type="submit" name="" value="Make Trip">
</form>
My js function:
function make_json(form) {
var json = {
"locatie" : form.locatie.value
// this is what works and what i would like to retrieve from multiple input fields
//"locatie" : ["Paris", "Amsterdam"]
};
return json;
}
In the google maps api i call the function and use the json:
var jsonArray = make_json();
You can declare an array and push the values to it when the button is clicked.
// Declare location array
var locations = [];
// Button bindings
var locationButton = document.getElementById("addNewLocation");
locationButton.onclick = addNewLocation;
var displayJsonButton = document.getElementById("displayJsonObject");
displayJsonButton.onclick = displayJsonObject;
// Button functions
function addNewLocation() {
var location = document.getElementById("locationText").value;
locations.push(location);
document.getElementById("locationText").value = "";
}
function makeJsonObject() {
var json = {
location : locations
}
return json;
}
function displayJsonObject() {
var obj = makeJsonObject();
console.log(obj.location);
}
<input id="locationText" type="text" />
<button id="addNewLocation">Add</button>
<button id="displayJsonObject">Display JSON</button>
The results will be populated in the console. I have also returned the JSON object for you in the displayJsonObject() function, which you could use to pass to the API.
You can also try this, if you want to keep showing the locations entered before adding new location.
function addInput() {
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("name", "locatie[]");
inputs.appendChild(input);
}
function make_json() {
var form = document.querySelector("form");
var values = [];
var locations = form['locatie[]'];
if (locations.length) {
locations.forEach(function(input) {
values.push(input.value);
});
} else {
values.push(locations.value);
}
var json = {
"locatie": values
};
console.log(json);
return json;
}
<form>
Locatie:
<div id="inputs">
<input type="text" name="locatie[]">
</div>
<button onClick="addInput()">+</button>
<input type="submit" value="Make Trip" onClick="make_json(this)">
</form>
Note: Take care of UI. If user enters more number of inputs, UI may deform.
I have very little experience with JavaScript and can't figure out how to get this to work, it may be a very small fix or it may be something major I have absolutely no clue...
I am trying to just create a really simple login for my assignment, security is not an issue as it is not required in the brief. The event of the user clicking the submit button should either grant or deny the user entry into the site. I have commented throughout the code so hopefully this will be a quick job to spot whatever is going wrong.
It possibly may be the "&" i included in the IF statement, I wasn't entirely sure if it would work in JavaScript or not. Or it may possibly be the calling of the users input, as I am not sure if I did that right either; i.e pass = password (from the form)
JavaScript:
<script>
function loadpage() {
var user = username; //assigns user input to variable
var pass = password; //^^
var storedus = ["Jordan", "Marzia", "Ryan"]; //array of acceptable usernames
var storedps = ["123", "cat", "seven"]; //array of acceptable passwords
if (user = storedus & pass = storedps) //condition must include both an acceptable username and password to >>
{
window.location.href = "home.html"; // >> proceed to next the portal page(home.html)
}
else
{
window.alert("An invalid username or password was entered."); //if the users input was not acceptable then display a popup informing them so.
}
}
</script>
HTML table and form:
<table style="position: absolute; left: 35%; top: 20%;"> <!- table to layout the form to take the users username and password to allow them to
gain entry into the site-!>
<form>
<tr><td><h2>Sign in</h2></td></tr>
<tr><td>Username*: </td><td><input type="username*" name="username" required></td></tr>
<tr><td>Password*: </td><td><input type="password*" name="password" required></td></tr>
<tr><td><input type="submit" name="signin" onclick="loadpage()"</td></tr>
</form>
</table>
Thank you in advance for your help!
You are trying to compare an array with what I'd guess to be a string. Instead, you should loop through the array and compare the values with the username and password.
var usernames = [
'Script47',
'SomeUsernname'
];
var passwords = [
'somePassword',
'password'
];
var username = 'Script47';
var password = 'somePassword'
for (var i = 0; i < usernames.length; i++) {
if (username == usernames[i] && password == passwords[i]) {
alert('Successful!');
break;
} else {
alert('Failed!')
}
}
Notice how I am using &&.
Example
JSFiddle
I have 3 website pages
1) Where My form Saved
2) Results.html
3) an onther page like results.html
When i enter zip code and press enter its show some data which is fetched from Website, i have one more page like results.html and the code is exactly but data is different, But problem is that when i try to show that an other data it again asking about zip code but user already put it on home page, i need that user can put zip code on home page and the zipcode set on all the pages that i need using javascript.
Any thing like this possible.
See the live example
http://innovativeartz.com/Query
Enter Zip : 95110 its shows the data and than you see on right side HOME button just click here its asking the zip code again i need it will put automaticly since user input it on homepage.
Thanks
**HTML**
<form action="results.html" method="get" >
Zip Code: <input type="text" name="zipcode" size="10" maxlength="5" /><br />
<input type="submit" name="search" value="Get Quotes" />
</form>
**Java Script**
<script type="text/javascript">
function getQueryStringVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];}}}
ni_ad_client = "579660";
ni_res_id = 2;
ni_alt_url = "https://www.shmktpl.com/search.asp";
ni_zc = getQueryStringVariable('zipcode');
ni_str_state_code = getQueryStringVariable('statecode');
ni_var1 = "";
ni_display_width = 650;
ni_display_height = 1000;
ni_color_border = "";
ni_color_bg = "";
ni_color_link = "";
ni_color_url = "";
ni_color_text = "";
</script>
<script type="text/javascript" src="https://www.shmktpl.com/retrieve_listings.asp"></script>
<noscript><img src="https://www.shmktpl.com/images/nojs/image.asp?src=579660&res=2" border="0"></noscript>
The Home button on the right is just a simple a-link. I presume that you should append the zipcode to the end of this link's href, using JavaScript.
I am new to JavaScript and I have been doing some work creating a form in HTML and JavaScript. In this work I have been trying to limit the string of a field depending on the text entered into a previous field.
What i have been trying is if the country 'Australia' is entered into the 'Country' text box than the 'Postcode' text box is limited to only 4 numbers (the Australian postcode standard)
i have done this much of a function so far:
document.getElementById('txtcountry').onblur = function postcode()
{
var country = document.getElementById('txtcountry').value;
if (country == "Australia" || category == "australia")
{
document.getElementById('txtpostcode').maxLength = 4;
}
else
{
document.getElementById('txtpostcode').maxLength = 9;
}
}
Here is the segment of the initial HTML that i have to use the function with:
<b>Postcode:</b> <input type="text" id="txtpostcode" name="postcode">
<br>
<b>Country:</b> <input type="text" id="txtcountry" name="country">
I am calling the function using :
<form name="rego" action="submit.htm" onsubmit="return !!(validateText() & validateCheckBoxes(this) & validateRadioButton() & validateEmail() & populateInstitution() & postcode());" method="POST">
Any help would really be appreciated!
UPDATE: i have updated my function to the finished function after some help as it doesn't seem to work and i need some further help with it
Are you trying to set the maxLength property:
var pc = document.getElementById('txtpostcode');
pc.maxLength = 4;
pc.value = pc.value.substr(0,4); // remove any extra characters already entered
...and then add an else condition to set the maxLength to whatever your default is for other countries.
You would then call your postcode() function from the blur event of your txtcountry field.
EDIT: Note that the function you've shown has an undefined variable category in the second part of the if test - should be country. And as I mentioned already you do need to call the function from somewhere.
I would use the
var country = document.getElementById('txtcountry');
if (country.value == "Australia" || category == "australia")
{
country.setAttribute("maxlength","4");
country.value = country.value.substr(0,4);
}