How to retrieve input value before submit

Question

I have to retrieve three input values before submitting so I can use ajax to fill in the form depending on the information inside these boxes.

I first check that the three boxes have text using this script:

<script>
jQuery(document).ready(function () {
    var flag = false;
    jQuery(".validation").change(function () {
        flag = true;
        jQuery(".validation").each(function () {
            if (jQuery(this).val().trim() == "") {
                flag = false;
            }
        });
        if (flag==true) {
            var calle = jQuery("#calle").val();
            var municipio = jQuery("#municipio").val();
            var provincia = jQuery("#provincia").val();             

            var direccion = calle +","+ municipio +","+ provincia;
            direccion = direccion.replace(/\s/g,'+');
        }
    });
});
</script>

What I need is that when these three fields have a value to retrieve that value so I can pass it through a URL in PHP before submitting (ajax maybe?)

$url =  'http://maps.googleapis.com/maps/api/geocode/json?address='.$value .'&sensor=false';

$value would be the variable (direccion) which is in the script.

If you need more information please let me know.

Answer 1

You need to set the variable as global to access it outside.due to declaring it in change, the scope of variable remains within change function only. so declare the variable outside change event.like this:

  <script>
jQuery(document).ready(function () {
var flag = false;
var direccion="";//declare variable
jQuery(".validation").change(function () {
    flag = true;
    jQuery(".validation").each(function () {
        if (jQuery(this).val().trim() == "") {
            flag = false;
        }
    });
    if (flag==true) {
        var calle = jQuery("#calle").val();
        var municipio = jQuery("#municipio").val();
        var provincia = jQuery("#provincia").val();             

        direccion = calle +","+ municipio +","+ provincia;
        direccion = direccion.replace(/\s/g,'+');//define variable on every on change
     }
   });
});
</script>

Answer 2

On your form you can add an onsubmit attribute which will define an action to take when the form is submitted. eg :

<form method='GET' action='' onsubmit='doAjax();return false;'>
<input type='text' id='inp_name' value='hello'/>
</form>

<script>
function doAjax(){
    alert("this form won't be posted!");
    return false;
}
</script>

Answer 3

you need to make a ajax call to the url which is constructed

 jQuery(document).ready(function () {
   var flag = false;
jQuery(".validation").change(function () {
    flag = true;
    var direccio="";
    jQuery(".validation").each(function () {
        if (jQuery(this).val().trim() == "") {
            flag = false;
        }
    });
    if (flag==true) {
        var calle = jQuery("#calle").val();
        var municipio = jQuery("#municipio").val();
        var provincia = jQuery("#provincia").val();             

        direccion = calle +","+ municipio +","+ provincia;
        direccion = direccion.replace(/\s/g,'+');
    }

    $.ajax({
       url: "target.php",
       data:{'value':direccion},
       success: function(response) {
          //process the data received from server script
       });
    });

});

PHP CODE(target.php):

   $value=$_POST['value'];
   $url =  'http://maps.googleapis.com/maps/api/geocode/json?address='.$value .'&sensor=false';
   //further processing of data at server end and finally echo the data to client

Answer 4

You need to do it with your last desired input tag. Suppose you want data up to the 3rd input tag then you need to Call your custom function in the 3rd input tag with onkeyup="myFunction()"

In myFunction() you can check if the fields are populated or not and can also do the ajax to transfer the data to server