Page load twice when form submit

Question

I have this code which retrieve data from the visitor and then sending the data to php code through a hidden inputs. I send all this data on page load so the page load twice(the normal loading then the form submit reload). here is the code:

jQuery(function(){
    if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(sendPosition);
        } else { 
            alert("Geolocation is not supported by this browser.");
        }

jQuery(function(){
    function sendPosition(position) {
        var lat =  position.coords.latitude;
        var lng =  position.coords.longitude;



        var form = document.createElement("form");
        form.setAttribute("method", "POST");
        form.setAttribute("action", "");
        form.setAttribute("id", "loc");

        var hiddenField1 = document.createElement("input");
        hiddenField1.setAttribute("type", "hidden");
        hiddenField1.setAttribute("name", "lat");
        hiddenField1.setAttribute("value", lat);

        var hiddenField2 = document.createElement("input");
        hiddenField2.setAttribute("type", "hidden");
        hiddenField2.setAttribute("name", "lng");
        hiddenField2.setAttribute("value", lng);

        form.appendChild(hiddenField1);
        form.appendChild(hiddenField2);
        document.body.appendChild(form);
        form.submit();
        }
});

I am sure about the script register and enqueue, i it's right. Is there a way to fix the reload ?

Answer 1

What do you mean with "loads twice"? The code you posted will run after the page is loaded completely and then do a form submit. The submit event will cause the page to reload again. Is this what you mean?

If you want to post the location data without refreshing the page you have 2 options:

(A) Simple: Add an invisible iframe and set a form "target" attribute to that iframe. This will cause the iframe to reload and the rest of the page will not reload.

(B) Better: Submit the data via ajax. This requires you to add an ajax handler that receives and processes the data.

In both cases the page will submit the location data but not refresh. Btw. you could also create that form in a nicer way via jQuery.

Example:

jQuery(function() {
  if (navigator.geolocation) {
    // Add this to find out if the code is called twice:
    alert("Get the user location...");  

    navigator.geolocation.getCurrentPosition(sendPosition);
  } else { 
    alert("Geolocation is not supported by this browser.");
  }

  function sendPosition(position) {
    // Add this to find out if the code is called twice:
    alert("sending the position");

    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    // Solution (A)
    var iframe = jQuery('<iframe name="dummy"></iframe>')
    var form = jQuery('<form method="POST" target="dummy" action="">'); // Note: target=""
    jQuery('<input type="hidden" name="lat" />').val(lat).appendTo(form);
    jQuery('<input type="hidden" name="lng" />').val(lng).appendTo(form);
    iframe.appendTo('body').hide();
    form.appendTo('body').submit();

    // Solution (B)
    var args = {
      "lat": lat,
      "lng": lng,
      "action": "save-coords"
    };
    jQuery.post(ajaxurl, args, function(resp) { 
      alert( "Server response: " + resp ); 
    });
    // Note: In WordPress you have to add these two ajax handlers:
    // add_action( 'wp_ajax_save-coords', 'my_save_coords' );
    // add_action( 'wp_ajax_nopriv_save-coords', 'my_save_coords' );
  }
});