Input variable from Javascript into Mysqli Database

Question

I am currently using a form in HTML to post to a PHP file which in turn inputs data into a MYSQLi Database (this is all done on a localhost). I wanted to use a map however allowing users to specify a event location more easily. I am currently using Google Maps API and the variable results[0] in the file geo.php (shown below) is the one I want to input into the MYSQLi Database.

I do not have any idea how I would go about doing this. I have heard of AJAX and when I attempted this it did not seem to work (possibly because I am completely unfamiliar with it). I am a complete stranger to Javascript although I am extensively familiar with PHP/HTML/CSS.

Thanks in Advance!

form.php

<html>

<div id="form">
    <form action="post.php" class="js-ajax-php-json" method="post" >
                Event Title<br />
                <input type="text" name="title" placeholder="Title" >
                <br><br>
                Details<br>
                <textarea name="details" id="textarea" placeholder="Details" maxlength="10" cols="40" rows="10"></textarea>
                <br><br>
                <input type="submit" value="Send">
                <input type="reset" value="Reset">
    </form>
        <?php include 'includes/overall/geo.php' ?>
</div>

</html>

At the end of this form notice the included Google Maps API Geocoder and Map

geo.php

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 70%;
        margin: 0;
        padding: 0;
      }

      #panel {
        position: absolute;
        top: 330px;
        left: 26%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

      #panel, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #panel select, #panel input, .panel select, .panel input {
        font-size: 15px;
      }

      #panel select, .panel select {
        width: 100%;
      }

      #panel i, .panel i {
        font-size: 12px;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
    var geocoder;
    var map;
    function initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var mapOptions = {
        zoom: 9,
        center: latlng
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location

          });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

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

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

post.php

<?php

  $title = $_POST["title"];
  $details = $_POST["details"];

  //I WISH TO GET THE LOCATION (address[0]) FROM geo.php 
  //AND INPUT IT INTO MYSQLi HERE

include 'core/con.php';//Connects to the database

$errors = array();

if(mysqli_query($conn,"INSERT INTO events (`title`, `details`, `location`) VALUES ('$title', '$details', '$location')")) {
    header("Location: url/form.php");
    die();

} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>

I have been stuck on how to do this for a while and greatly appreciate any help!

Just add a hidden input in your form, then fill it in your codeAdress function then submit your form to get the data. — Vincent Decaux
– Vincent Decaux, Commented Aug 4, 2015 at 9:10
@VincentDecaux how would I 'fill it in your codeAdress function'. I am unfamiliar how I can use a external Javascript function in my form — Sasha Sen
– Sasha Sen, Commented Aug 4, 2015 at 9:30

Drixson Oseña · Accepted Answer · 2015-08-04 10:02:47Z

1

A simple approach is like this, use javascript to change the value of a certain input

just add a hidden input inside of your form example :<input id="geocode" type="hidden" name="geocode" />

then you a line in your codeAddress() function you have to add a line where you can change the value of the hidden input

function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location

  });
   //SEE HEREEEEE
   document.getElementById('geocode').value = marker.results[0].geometry.location; //this is how you manipulate the value of the hidden input
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }

and in your php , just access the post value

$_POST['geocode']

answered Aug 4, 2015 at 10:02

Drixson Oseña

3,6313 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sasha Sen Over a year ago

Thanks! Appreciate it a lot.

Collectives™ on Stack Overflow

Input variable from Javascript into Mysqli Database

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related