Pass Javascript и PHP переменные через PHP Формы

Question

искали весь день, нашел предметы похожие, но совершенно застряли ...

Я хочу передать результат Google Maps автозаполнения (LatLng) в PHP форме вместе с PHP переменных через один представить (не две кнопки, то есть поставить переменную JS в скрытом поле затем отправить форму с помощью кнопки отправки)

Код в настоящее время:

<?php  

if (isset($_POST['submit'])) {  
    // echo vars if they are working... 
    echo "passed data <br>"; 
    echo $_POST['first_name'] . "<br>"; 
    echo $_POST['geocode'] . "<br>";  

    // Get variables, check data and store into DB...  
}  

?> 

тогда:

<script type="text/javascript"> 

    var geocoder; 

    function initialize() { 

    // Search options 
    var searchOptions = { 
     componentRestrictions : {country: 'nz'}, 
     types: ['geocode'] 
    }; 

    var input = document.getElementById('pac-input'); 

    var autocomplete = new google.maps.places.Autocomplete(input, searchOptions); 

    geocoder = new google.maps.Geocoder(); 

    } 

    function codeAddress() { 

    var address = document.getElementById('pac-input').value; 

    geocoder.geocode({ 'address': address}, function(results, status) {  
     if (status == google.maps.GeocoderStatus.OK) {   
     document.getElementById('geocode').value = (results[0].geometry.location);    
     } else { 
     //alert('Geocode was not successful for the following reason: ' + status); 
     } 

    }); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    function submitthis() { 

    codeAddress(); 

    } 

    </script> 

    <script> 

    $(function(){ // Document Ready 

    }); 

    </script> 

Наконец:

<form id="myForm" name="myForm" action="google-text-input.php" method="post" > 

    First Name<input name="first_name" type="text"><br> 

    Address<input id="pac-input" class="controls" type="text" placeholder="Search Box"><br> 



    <input id="geocode" name="geocode" type="text" value="null"><br> <!-- to be hidden --> 

    <input name="submit" type="submit" value="Submit" onclick="submitthis()"><br> 


    </form> 

Я бы лучше хотел, когда я нажал на кнопку Submit, он сохраняет Google Maps привести к скрытым, представляет форму на одной странице, то я могу потянуть все PHP ВАР и магазин. Я открыт для подхода, который после отправки помещает часть javascript в url, где я могу вытащить PHP vars через POST и просто получить результат Google в URL-адресе.

Единственное, что я могу видеть, которое не работает в приведенном выше, - это форма, которая будет отправлена ​​до завершения моего кодаAddress(). Как будто я помещаю return false, чтобы предотвратить отправку формы, обновляет мое скрытое поле.

Заранее благодарен!

Answer 1

Честно говоря, я не очень хорошо знаком с геокодированием Google api, но есть несколько способов, которыми вы можете это сделать.

Первый метод

Append скрытые входные элементы внутри формы. Вероятно, это самое близкое к тому, что вы описываете в своем вопросе.

Вот упрощенная форма:

<form name="testForm" action="test.php" 
    method="post" onSubmit="return doSubmit();"> 
    <input type="submit" name="submit" /> 
</form> 

Добавление return doSubmit(); означает, что вы можете вызвать эту функцию, и отменить отправку формы, если вам нужно.

Вот сопровождая JavaScript:

function doSubmit() { 
    var latval = 42; // Use the geolocation values you want here. 
    var lat = document.createElement("input"); 
    lat.setAttribute("type", "hidden"); 
    lat.setAttribute("value", latval); 
    lat.setAttribute("name", "geo[lat]"); 
    document.forms["testForm"].appendChild(lat); 
    return true; 
    //Note: to stop the form from submitting, you can just return false. 
} 

При использовании JQuery, это становится проще. Вам не нужно добавлять поле onSubmit к форме. Просто назначьте уникальное имя или идентификатор кнопки отправки.

$(document.ready(function() { 
    $("input[name=submit]").click(function(e) { 
     var latVal = 42; // Get geo vals here. 
     $("form[name=testForm]").appendChild(
      "<input type='hidden' name='geo[lat]' value='" + latVal + "' />" 
     ); 
    }); 

});

Вот простой тест PHP файл:

//test.php 
<?php 

if (isset($_POST["geo"])) { 
    echo "LAT IS: ".$_POST["geo"]["lat"]; 
} 
?> 

При нажатии на кнопку, она будет добавлять скрытый вход в форму, и отправить его вместе с остальными данными POST. Вы можете назначить значения типа массива для формирования имен, и он преобразует его как массив в массив PHP $_POST.

Этот пример напечатает «LAT IS: 42» при нажатии кнопки.

Второй метод

Это лучший один. Использование Ajax и JSON с JQuery Ajax (может быть сделано в сыром JavaScript, но isn't fun

Для этого я буду использовать более простую форму, и добавить DIV:

<form name="testForm"> 
    <input type="submit" name="submit" /> 
</form> 
<div id="output"></div> 

РНР просто отголоски $_POST["geo"]["lat"] .

Вот JavaScript:

$(document).ready(function() { 
    $("form[name=testForm]").submit(function (e) { 
     // Prevent form from submitting. 
     e.preventDefault(); 
     // Create a js object. 
     var jso = {}; 
     // Add a geo object. 
     jso['geo'] = {}; 
     // Define its lat value. 
     jso['geo']['lat'] = 42; 
     // Add all other values you want to POST in the method. 
     // You can also just do jso.lat = 42, then change the php accordingly. 
     // Send the ajax query. 
     $.ajax({ 
      url: 'test.php', 
      type: 'POST', 
      data: jso, 
      success: function(data, status) { 
       $("#output").html("<p>" + data + "</p>"); 
      } 
     }); 
    }); 
}); 

в двух словах, это то, как легко Аякс при нажатии на кнопку отправки в этом примере будет установлен й. e html div до 42.