9.2 Adding user data to a database: infowindow input forms

Now that we can add markers to the map, we want to generate a form that allows users to describe that location.  Our user interface decision is to generate the form inside an info-window for each marker.  This will allow each marker to assume it’s own independent content.

Step 1: Create a form template

First, create a template for the form.  Add the following HTML form code to a section within the body tags:

Step 2: Cloning the template and putting it in an infowindow

Since this is just a “template”, we set the style display to “none”, making it invisible on page load. What we want to do is add this form to each marker’s infowindow content. For this, there is a nice jQuery feature we can use: .clone!

In the initialize function, we have added the code to create our drawing manager.  Now we need to add an event listener that will do something once each marker has been generated.  Add the highlighted lines of code in the initialize function:

The event listener first “clones” the form template, then sets its visibility on (.show()).  The form is then added as the infowindow content.  Finally, we set the infowindow to show up by default.

Step 3: Submit the form data to a PHP script that adds it to a database

The final step (before we start some PHP code), is to set the “submit” button to send the data to our database.  Once again, jQuery provides a nice function that allows us to grab form elements, package it, and send it to our database.  We will use the .submit function to package the input values into a data object, and then use the .post function to send the data to our PHP script that will then dump the data into our database (next tutorial).

Add the highlighted lines of code to the initialize function:

Step 4: Adding a callback function

In the .post call above, we have added a callback function (up206b.saveStopResponse).  This allows us to know whether or not the server actually did something with our request.  In other words, it is a direct response from the server, confirming that the data has been added (or not).

Before we author the PHP script, add the callback function below:

 

(sample code)

3 thoughts on “9.2 Adding user data to a database: infowindow input forms

  1. Pingback: PHP/MySQL: Saving user input to Database | 我爱源码网

  2. Pingback: PHP/MySQL: Saving user input to Database | Solutions for enthusiast and professional programmers

  3. Pingback: PHP/MySQL: Saving user input to Database - Technology

Leave a Reply