Javascript to pull new website alert onclick

Question

This might be an easy fix I am just not seeing, but I am trying to setup a basic delivery zone function. If you are in delivery zone, after you submit your zipcode an alert says you are in our zone and when you click ok, it takes you to the booking page. Else, say they are outside of the zone. I can't seem to get an onclick demand for the alert to take to the booking page. (P.S. All javacript brought into Squarespace)

<script type="text/javascript">

function IsValidZipCode() {

    var zip = document.getElementById('txtZip').value;
    var ZipArray = ["60543", "60188"];
    var isValid = ZipArray.indexOf(zip); ;
    (isValid );
    if (isValid >= 0){
      alert ('Nice! go ahead and book!')
      // NEED TO LINK TO NEW WEBPAGE
        return true;

    }
    else {
        alert('Sorry, we do not offer delivery here at this time');
        return false;
    }
}
</script>
<form>
Please Enter Zip Code: <input id="txtZip" name="zip" type="number" />
<input onclick="IsValidZipCode()" id="Button" type="submit" value="Submit"/>
</form>

Have you tried putting `window.location.href = 'yoururl.com'` where the comment is? — Kolby, Nov 08 '16 at 23:53
Yes, it simply reloads the current web page rather than taking you the the booking page — KNages, Nov 09 '16 at 00:00
That's a submit button, so it submits. You can `return false` at the bottom of your Event handling function to prevent this. You're submitting to the same page in this case, since you left out the HTML `action` attribute. But really, you should get in the practice of AJAX. — StackSlave, Nov 09 '16 at 00:00
Ah ya @PHPglue got the right idea. You need a preventDefault on your submit button click. — Kolby, Nov 09 '16 at 00:01
You're going to want to test your data, Server Side, since the client can alter those ZIP Codes. There are lot's of AJAX tutorials online. — StackSlave, Nov 09 '16 at 00:06

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

From the comments, it sounds like your problem is the submit button refreshing the page on click. You need to use e.preventDefault to prevent this.

<input onclick="IsValidZipCode(event)" id="Button" type="submit" value="Submit"/>

function IsValidZipCode(event) {
    if (isValid >= 0){
       event.preventDefault;
       alert ('Nice! go ahead and book!')
       window.location.href = 'yoururl.com'
    }
}

Here's a good reference: preventDefault inside onclick attribute of a tag

https://jsfiddle.net/yLyvt30y/

edited May 23 '17 at 10:32

Community

1
1

answered Nov 09 '16 at 00:04

Kolby

2,775
3
25
44

Still doesnt seem to be working, Should i Change the submit button to a regular button? – KNages Nov 09 '16 at 00:06
I just realized that going about it this way isn't going to allow the form to be submitted. This needs to be done on the backend after validating the form, or you can use AJAX to submit the form. – Kolby Nov 09 '16 at 00:09
The function runs currently, if a valid zipcode is entered and submit is clicked, an alert pops up saying its valid, the problem is from there I want it to take them to a new page when the click ok in the alert. Make sense? I dont think we need Ajax to complete – KNages Nov 09 '16 at 00:13
Is that all the form does? If so then disregard my last comment. – Kolby Nov 09 '16 at 00:14
I added a fiddle with an example of the code. Make sure you added `event` to the onclick in the button, and you can add event.preventDefault to the top of the `IsValidZipCode` function since it doesn't need to submit the form. – Kolby Nov 09 '16 at 00:18
Nice! I used Location.replace instead but it works, Your rock Kolby! – KNages Nov 09 '16 at 00:59

Javascript to pull new website alert onclick

1 Answers1