web-dev-qa-db-fra.com

Soumettre un bouton qui appelle la fonction js puis publie sur mysql

Une brève et douce description de ce que je fais est un formulaire de contact qui géocode l'adresse d'un utilisateur (une fois qu'il a cliqué sur soumettre) et place les valeurs lat & lng récupérées dans un champ caché.

J'ai tout fonctionne mais j'ai deux boutons séparés et je n'en veux qu'un. Donc, pour le moment, l'utilisateur doit d'abord cliquer sur un bouton avant de pouvoir cliquer sur le bouton Soumettre, qui est stupide. Le bouton "Rechercher des géopoints" appelle une fonction js et renvoie les valeurs lat et lng dans les champs cachés du formulaire et après cela, vous appuyez sur le bouton Soumettre et il publie toutes les données des formulaires dans la base de données MySQL.

Encore une fois, tout fonctionne dans mon code, j'ai juste besoin de faire les deux boutons du formulaire en un et cela fonctionne toujours.

C'est le Javascript:

<script type="text/javascript">

    var geocoder;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById("map_canvas"));
    }
    function updateCoordinates(latlng)
    {
        if(latlng) 
        {
            document.getElementById('lat').value = latlng.lat();
            document.getElementById('lng').value = latlng.lng();
        }
    }

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                updateCoordinates(results[0].geometry.location);
            } else {
                alert("The address you entered could not be found: " + status);
            }
        });
    }
</script>

C'est la forme:

<form align="center" method="post">
    <label for="firstName">First Name:</label> <input type="text" name="firstName"/><br/>
    <label for="lastName">Last Name:</label> <input type="text" name="lastName"/><br/>
    <label for="address1">Address 1:</label> <input type="text" id="address" name="address1"/><br/>
    <label for="address2">Address 2:</label> <input type="text" name="address2"/><br/>
    <label for="city">City:</label> <input type="text" id="city" name="city"/><br/>
    <label for="state">State:</label><select id="state" name="state">
    <option value="CA"<?php echo(isset($_POST['state'])&&($_POST['state']=='CA')?' selected="selected"':'');?>>CA</option>
</select><br/>
    <label for="Zip">Zip Code:</label><input type="text" id="Zip" name="Zip">
    <br/>
    <label for="location">Location:</label><select name="location">
    <option value="Curb"<?php echo(isset($_POST['location'])&&($_POST['location']=='Curb')?' selected="selected"':'');?>>Curb</option>
    <option value="Garage"<?php echo(isset($_POST['location'])&&($_POST['location']=='Garage')?' selected="selected"':'');?>>Garage</option>
    <option value="Driveway"<?php echo(isset($_POST['location'])&&($_POST['location']=='Driveway')?' selected="selected"':'');?>>Driveway</option>
    <option value="FrontDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='FrontDoor')?' selected="selected"':'');?>>Front Door</option>
    <option value="SideDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='SideDoor')?' selected="selected"':'');?>>Side Door</option>
    <option value="Inside"<?php echo(isset($_POST['location'])&&($_POST['location']=='Inside')?' selected="selected"':'');?>>Inside</option></select><br/>
    <input type="hidden" id="lat" name="lat" value="" /><br>
    <input type="hidden" id="lng" name="lng" value="" /><br>
    <input type="button" value="Find Geopoints" onclick="codeAddress()"/>
    <input name="submit" type="submit" id="submit" value="Submit"/>
</form>

Ceci est le PHP pour publier les données sur MySQL

<?php
if(isset($_POST['submit']))
{

    $con = mysql_connect("localhost","x","y");

    if (!$con){
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("x", $con);

    $sqlCmd = sprintf("INSERT INTO x (firstName, lastName, address1, address2, city, state, Zip, location, lat, lng) VALUES ('%s','%s','%s','%s','%s','%s','%s','%s','%s','%s')", 
        mysql_real_escape_string($_POST["firstName"]),
        mysql_real_escape_string($_POST["lastName"]),
        mysql_real_escape_string($_POST["address1"]),
        mysql_real_escape_string($_POST["address2"]),
        mysql_real_escape_string($_POST["city"]),
        mysql_real_escape_string($_POST["state"]),
        mysql_real_escape_string($_POST["Zip"]),
        mysql_real_escape_string($_POST["location"]),
        mysql_real_escape_string($_POST["lat"]),
        mysql_real_escape_string($_POST["lng"]));
    //echo $sqlCmd;
    //die();    

    mysql_query($sqlCmd);

    mysql_close($con);
}

?>
javascriptphphtmlmysqlgeocoding
10
RugerSR9

Donnez un identifiant au formulaire,

<form id="geoform" align="center" method="post">

Débarrassez-vous du bouton soumettre et ayez juste

<input type="button" value="Submit" onclick="codeAddress()"/>

Et puis soumettre avec JS,

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            updateCoordinates(results[0].geometry.location);
            // Trigger the form submission here
            document.getElementById("geoform").submit();
        } else {
            alert("The address you entered could not be found: " + status);
        }
    });
}

Et enfin dans votre PHP code changez cette ligne,

if(isset($_POST['submit']))

à la place,

if($_SERVER['REQUEST_METHOD'] === 'POST')
15
PherricOxide