jquery redirect on button click

Question

jquery redirect on button click

3.8k views Asked by Ndong Akwo At 24 November 2024 at 23:20

I'm trying to redirect on button click based on visitor location and I have modal with two windows. As well as using freegeoip.net: I'm using this with Wordpress: script correctly hooked to wordpress and running but redirect doesnt work.

I'd equally want this modal to appear only once per visit and across all navigations through the site not upon every page reload. Thanks in advance.

Below is the jQuery:

jQuery(document).ready(function(){
  jQuery("#myModal").modal('show');
  jQuery.ajax({
    url: 'https://freegeoip.net/json/',
    type: 'POST',
    dataType: 'jsonp',
    success: function(location) {
      // If the visitor is browsing from Canada.
      if (location.country_code === 'CA') {
        jQuery('#subscriber-ca').on('click', function(){
          window.location.replace('http://www.google.com');
        });
        jQuery('#subscriber-us').on('click', function(){

          // Redirect visitor to the USA.
          window.location.replace('http://www.facebook.com');
        });
      } else if(location.country_code === 'US') {
        jQuery('#subscriber-ca').on('click', function(){
          window.location.replace('http://www.google.com');
        });
        jQuery('#subscriber-us').on('click', function(){  
          // Redirect visitor to the USA.
          window.location.replace('http://www.facebook.com');
        });
      }
    }
  });
});

this is the modal:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
                <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                    </div>
                                        <button id="subscribe-us" type="submit" class="btn btn-primary pull-left">US Subscriber</button>
                                        <button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
                </form>
            </div>
        </div>
    </div>
</div>

Original Q&A

There are 4 answers

**Tanvi Surve** · Answer 1 · 2017-12-11 05:08:35

To check whether this is the first visit by the user, you can store value in session storage:

window.sessionStorage.setItem("first_visit", "Y");

While loading check for the session storage. If it is not present then open modal dialog.

Hope it helps.

**Vel** · Answer 2 · 2017-12-11 05:40:08

Try this code

        <!doctype html>
        <html lang="en">
         <head>
          <meta charset="UTF-8">
          <meta name="Generator" content="EditPlus®">
          <meta name="Author" content="">
          <meta name="Keywords" content="">
          <meta name="Description" content="">
          <title>Document</title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         </head>
         <body>

        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Subscribe our Newsletter</h4>
                    </div>
                    <div class="modal-body">
                        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                        <form>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email Address">
                            </div>
                                <button id="ussubscribe" type="button" class="btn btn-primary pull-left">US Subscriber</button>
                                <button id="casubscribe" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var locationstatus = false;
            var userlocation = '';

            jQuery(document).ready(function(){
              jQuery.ajax({
                url: 'https://freegeoip.net/json/',
                type: 'POST',
                dataType: 'jsonp',
                success: function(locationresponse) {
                  userlocation = locationresponse.country_code;
                    locationstatus = true;
                    console.log(userlocation);
                }
              });
            });

            $('#ussubscribe').on('click', function(){
                alert();
                console.log(userlocation);

                if (locationstatus) {     
                    if(locationstatus=='CA'){
                      window.location.replace('http://www.google.com');
                    }
                }

             });

            $('#casubscribe').on('click', function(){
                 console.log(userlocation);

                 if (locationstatus) {      
                     if(locationstatus=='US'){
                        window.location.replace('http://www.facebook.com');
                     }
                 }
            });

        </script>
        </body>
        </html>

**Siddhesh Nayak** · Answer 3 · 2017-12-11 05:43:20

US Subscriber

change type="submit" to type="button" //also make sure

jQuery('#subscriber-us').on('click', function(){ //check the spelling which is subscribe-us

and add onclick events outside the ajax call inside if else clause only hide/show modal and buttons

**MUT** · Answer 4 · 2017-12-11 05:44:50

Replace your code:

<button id="subscribe-us" type="submit" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>

With:

<button id="subscriber-us" type="button" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscriber-ca" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>

And Bind click events outside the ajax if buttons are not dynamically created upon ajax request.

TechQA.

jquery redirect on button click

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in WORDPRESS

Related Questions in FREEGEOIP

Popular Questions

Popular Tags

Trending Questions