Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery: add geoip info to form message

    Hi.

    I have a contact form and when people submit it I would like to add their location to the form message (textarea, #message). I can do this by using a service like ipinfo.io + jquery. Here's an example of how to show the results on a page.

    With the generous help of others I have come quite close but now I'm stuck. Here is the javascript script that's called when the #sendbutton is clicked:

    Code:
    $(document).ready(function() {
      $("button[id$='sendbutton']").click(function() {
      
    // OTHER STUFF THE SCRIPT DOES
    
                    $.get("http://ipinfo.io", function (response) { 
    
                    $("#message").val( $("#message").val() + "\n\n" + "IP: "+ response.ip  + "\n" + "Location: " + response.city + ", " + response.region);
                    }, "jsonp");
    
    
     // SOME MORE STUFF IT DOES BEFORE SUBMITTING THE FORM
    
                     document.form_contact.submit();
                    });
    });
    I left out parts of the scripts that are not relevant and commented out anyway to make troubleshooting easier.
    I've tried so many variations of that code between the comments that I've lost count but I never get anywhere. Before I give up on this, I thought I'd ask you if you know a solution to this. Thank you.

    C.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    bind to the submit action of the form, not a button click.

    Code:
    $(document).ready(function() {
      $("#idofyourform").submit(function(e) {
      e.preventDefault(); 
    // OTHER STUFF THE SCRIPT DOES
    
                    $.get("http://ipinfo.io", function (response) { 
    
                    $("#message").val( $("#message").val() + "\n\n" + "IP: "+ response.ip  + "\n" + "Location: " + response.city + ", " + response.region);
                    }, "jsonp");
    
    
     // SOME MORE STUFF IT DOES BEFORE SUBMITTING THE FORM
    
                     $(this).submit();
                    });
    });
    Last edited by DanInMa; 08-26-2013 at 11:55 PM. Reason: happy now?

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    There is a timing issue here because when the form is submitted, an asynchronous ajax is called to fetch the ip info. The script will not wait for the ajax call to be finished so it will proceed to submitting the form.

    Why not fetch the ip ifo on the server side where the contact form is submitted and processed?

    http://ipinfo.io/developers

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by glenngv View Post
    There is a timing issue here because when the form is submitted, an asynchronous ajax is called to fetch the ip info. The script will not wait for the ajax call to be finished so it will proceed to submitting the form.

    Why not fetch the ip ifo on the server side where the contact form is submitted and processed?

    http://ipinfo.io/developers
    there shouldn't be a timing issue. The submit is in the success callback so shouldn't fire until after the response is completed.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I didn't see the submit() is inside the success callback. But in your code, the form will be submitted twice because you are not returning false or doing preventDefault() to cancel the form submission.

    But even then, that is not an ideal solution. If the ajax call takes time for some reason, the form submission will also be delayed or not executed at all. You now have a dependency to an external site, ipinfo.io, to always become available. If it is not, then the functionality of the page suffers. The IP address can be determined on the server side anyway. Why not get it from there and get rid of the delay in the form submission?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •