How do I save the value of a DIV ID to database PHP & MySQL?

Question

I have this div section:

<div id="address"></div>

and it shows the FORMATTED ADDRESS of the longitude and latitude of a location on Google maps. I have a draggable marker that will point to any location in the map and it allows to SHOW the address name, longitude, and latitude. I was able to successfuly save the longitude and latitude to my database in MySQL using PHP. But I failed to saved the address.

I used these following of lines of code to save the long and lat.

<input type="hidden" id="longitude" placeholder="longitude" name= "longitude">
<input type="hidden" id="latitude" placeholder="latitude" name= "latitude">

But when I do

<input type="hidden" id="address" placeholder="address" name= "address">

there's no value passed. but the

<div id="address"></div>

is able to show the address on the webpage. So that's why how will I send the value of the div id="address" to php and MySQL database? Is there any way? Like converting it or so?

AND also, in order to visualize I have this html right here, http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

as you can see, it is able to SHOW the address name also with the long and lat. I was able to save the long and lat on my database but how will I save the address name in database??? You can save the file with the link I shared and check the code.

Answer 1

You may want to create an asynchronous HTTP request or more popularly known as AJAX. If you're familiar with the jQuery framework: http://api.jquery.com/jquery.ajax/

say, your "submit" button is referenced with "btnSubmit" as its ID:

<input type="submit" value="submit" id="btnSubmit" />

you'll have to attach a "click" event handler so we'll know when it's been clicked or submitted:

$('#btnSubmit').on('click', function(){
    /*this is where you'll place your ajax call*/
});

and to make your ajax call, you'll do something like this:

/*get the inner html value of div with "address" as its ID*/
var long= "long=" + $('#longitude').val();
var lat = "lat=" + $('#latitude').val();   
var data = "address=" + $('#address').html()+'&'+long+'&'+lat;

$.ajax({
    type: 'GET',
    url: "my_php_script.php",
    data: data
})
.done(function(data) {
    /*handle successful call here*/
})
.fail(function(data) {
    /*oops, something went wrong*/
})
.always(function(data) {
    /*no matter what, let's do this*/
});

We can either use GET or POST as the ajax type. While we've used GET, you will have to make sure that on your my_php_script.php, you will have to use the following to get the "address" value passed as data parameter:

$address = $_GET['address'];
$long = $_GET['long'];
$lat = $_GET['lat']

The my_php_script.php is where you'll obviously utilize the address and do stuffs you'd want like saving to database and all.

Make sure to include the latest jQuery library though and wrap the js scripts on dom load:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function(){
    /*all jscript goes here*/
});

Answer 2

Below code will give you the address within the div

If you are using jquery

alert($("#address").html())

and if you are using plain javascript

console.log(document.getElementById("address").innerText);

Answer 3

You can do it like this:

HTML:

<div id="address">Berlin, street 99, Germany</div>
<input type="hidden" id="address-to-save" name="address-to-save" value="">

jQuery:

var address = $("#address").text();
$("#address-to-save").val(address);