My html web form details are not getting stored in the mysql database table using python script

Suraj Makhija
Suraj Makhija used Ask the Experts™
on
I have created a google map. A user clicks on his location and pins the marker at that location, now when he clicks on the marker a info-window pops up with a form asking his details.
I have created a table in mysql with all the columns asked in the form.
I have also created the python script in PyCharm CE that is required to process the form details and store in the mysql table I created. However this does not happen.
When I click on the submit button in the html web form, instead of storing the data in the mysql database table I created, It displays the entire python code that I had created, and it is not storing anything in the mysql database table.
Please help me at the earliest.....I have been stuck on this for many days
Help would really be appreciated.
I am pasting all the codes below for reference, if possible please do correct them and let me know about the mistakes as well or anything else that I'm missing.
Thanks in advance.

HTML/JavaScript Code:
<!DOCTYPE html>
<html>
         <head>
               <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
          <meta charset="utf-8" />
            <title>MAPS</title>

            <style>
                  #map {
                        width: 100%;
                        height: 100%;
                  }

                  html, body {
                      height: 100%;
                      margin: 0;
                      padding: 0;
                  }

                  #description {
                      font-family: Calibri;
                      font-size: 15px;
                      font-weight: 300;
                  }

                  #infowindow-content .title {
                      display: none;
                  }

                  
                  #map #infowindow-content {
                      display: none;
                  }

                  .pac-card {
                      margin: 10px 10px 0 0;
                      border-radius: 2px 0 0 2px;
                      box-sizing: border-box;
                      -moz-box-sizing: border-box;
                      outline: none;
                      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                      background-color: #fff;
                      font-family: Calibri;
                  }

                  #pac-container {
                      padding-bottom: 12px;
                      margin-right: 12px;
                  }

                  .pac-controls {
                      display: inline-block;
                      padding: 5px 11px;
                  }

                  .pac-controls label {
                      font-family: Calibri;
                      font-size: 16px;
                      font-weight: 400;
                  }

                #pac-input {
                    background-color: #fff;
                    font-family: Calibri;
                    font-size: 15px;
                    font-weight: 400;
                    margin-left: 12px;
                    padding: 8px 12px;
                    text-overflow: ellipsis;
                    width: 400px;
                    border: 1px solid #ccc;
                }

                #pac-input:focus {
                    border-color: #4d90fe;
                }

                #title {
                    color: #fff;
                    background-color: #4d90fe;
                    font-size: 25px;
                    font-weight: 400;
                    padding: 6px 12px;
                }

                #target {
                      width: 345px;
                }

                #form
                  {
                        display: none;
                  }
                  
                #heading {
                      text-align: center;
                      color: #003366;
                      font-size: 30px;
                      font-family: Calibri;
                      padding: 8px 12px;
                  }

                label.field {
                      text-align: left;
                      font-weight: bolder;
                      font-size: 16px;
                      font-family: Calibri;
                  }

                  input[type=text], input[type=email], input[type=number], select {
                           font-family: Calibri;
                           font-size: 16px;
                           font-weight: bolder;
                           padding: 8px 12px;
                           width: 100%;
                      margin: 8px 0;
                      display: inline-block;
                      border: 1px solid black;
                      border-radius: 4px;
                      box-sizing: border-box;
                  }

                  input[type=submit] {
                        font-family: Calibri;
                        font-size: 16px;
                        font-weight: bolder;
                      background-color: white;
                      color: #00b300;
                      padding: 8px 12px;
                      margin: 8px 0;
                      border: 2px solid #00b300;
                      border-radius: 4px;
                      cursor: pointer;
                      box-sizing: border-box;
                  }

                  input[type=submit]:hover {
                      background-color: #00b300;
                      color: white;
                }

                input[type=reset] {
                      font-family: Calibri;
                      font-size: 16px;
                      font-weight: bolder;
                      background-color: white;
                      color: #cc0000;
                      padding: 8px 12px;
                      margin: 8px 0;
                      border: 2px solid #cc0000;
                      border-radius: 4px;
                      cursor: pointer;
                      box-sizing: border-box;
                  }

                  input[type=reset]:hover {
                      background-color: #cc0000;
                      color: white;
                }

                input[type=text]:focus {
                      background-color: #f2f2f2;
                      border-color: #4d90fe;
                }

                input[type=email]:focus {
                      background-color: #f2f2f2;
                      border-color: #4d90fe;
                }

                input[type=number]:focus {
                      background-color: #f2f2f2;
                      border-color: #4d90fe;
                }

                select:focus {
                      background-color: #f2f2f2;
                      border-color: #4d90fe;
                }
            </style>

            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8EAfEQrYVs4c_kMBUQw3tVY8uhEViDCU&libraries=places&callback=initAutocomplete"
                async defer>
        </script>       
                  
      </head>

      <body>
            <div id="map"></div>
            <input id="pac-input" class="controls" type="text" placeholder="Search your location..." />
            <div id="form">
                  <form action="processing.py" method="post">
                <p id="heading">PERSONAL INFORMATION</p>
                    <label class="field" for="fullname"><b>Full Name:</b></label>
                    <input type="text" name="fullname" placeholder="Eg. Suraj Makhija" size="30" autofocus required />
                    <br />
                    <br />
                    <label class="field" for="emailid"><b>E-mail:</b></label>
                    <input type="email" name="emailid" placeholder="Eg. contact@domain.com" size="30" required />
                    <br />
                    <br />
                    <label class="field" for="mobile"><b>Mobile:</b></label>
                    <input type="text" name="mobile" placeholder="Eg. 9999999999" maxlength="10" minlength="10" size="30" required />
                    <br />
                    <br />
                    <label class="field" for="gender"><b>Gender:</b></label>
                    <select name="gender" required>
                      <option value="male">Male</option>
                      <option value="female">Female</option>
                      <option value="other">Other</option>
                    </select>
                    <br />
                    <br />
                    <label class="field" for="areaofexpertise"><b>Area of Expertise:</b></label>
                    <input type="text" name="areaofexpertise" placeholder="Eg. Android/iOS Developer" size="30" required />
                    <br />
                    <br />
                    <label class="field" for="yearsofexperience"><b>Years of Experience:</b></label>
                    <input type="number" name="yearsofexperience" placeholder="Eg. 10" min="0" max="100" required />
                    <br />
                    <br />
                    <p style="text-align: center;">
                    <input type="submit" value="Submit" />
                    <input type="reset" value="Clear All" />
                    </p>
              </form>
        </div>

            <script>
                  var map;
                  var iconBase;
                  var input;
                  var searchBox;       
                  var markers=[];             
                  var markerArray =[];
                  var infowindow;
                  
                function initAutocomplete() {
                    map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat: 20.5937, lng: 78.9629},
                            zoom: 5,
                           mapTypeId: 'roadmap'
                    });

              //Declaring infowindow.
              infowindow = new google.maps.InfoWindow({
                      content: document.getElementById('form')
              });

            // Create the search box and link it to the UI element.
              input = document.getElementById('pac-input');
              searchBox = new google.maps.places.SearchBox(input);
              map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
              map.addListener('bounds_changed', function() {
                      searchBox.setBounds(map.getBounds());
              });

              //Creates a marker when the user clicks on a location on the map.
              google.maps.event.addListener(map, 'click', function(event) {
                    addMarker(event.latLng, map);
                });

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
              searchBox.addListener('places_changed', function() {
                      var places = searchBox.getPlaces();
                      if (places.length == 0) {
                        return;
                     }

            // Clear out the old markers.
                markers.forEach(function(marker) {
                  marker.setMap(null);
                });
                            
            // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                  if (!place.geometry) {
                          console.log("Returned place contains no geometry");
                          return;
                  }
            var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
            };
                  // Create a marker for each place.
                markers.push(new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                }));
                if (place.geometry.viewport) {
                // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                    } else {
                    bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
                });
            }

                  //Marker function declaration.
                  function addMarker(location, map) {
                // Add the marker at the clicked location.
                    marker = new google.maps.Marker({
                    draggable: true,
                      animation: google.maps.Animation.DROP,
                    position: location,
                    map: map
                });
                //Infowindow pops up on clicking the marker.
                google.maps.event.addListener(marker, 'click', function() {
                      document.getElementById('form').style.display='inline-block';
                  infowindow.open(map, marker);
                });
            }
            </script>

      </body>
</html>



Python Script created in PyCharm CE:
import MySQLdb
import cgi

form = cgi.FieldStorage()
fullname = form.getvalue('fullname', '')
emailid = form.getvalue('emailid', '')
mobile = form.getvalue('mobile', '')
gender = form.getvalue('gender', '')
areaofexpertise = form.getvalue('areaofexpertise', '')
yearsofexperience = form.getvalue('yearsofexperience', '')

#print '<html>'
#print fullname
#print '</html>'

db = MySQLdb.connect(host="localhost", user="root", passwd="XXXX", db="client_database")

cursor = db.cursor()
sql = """INSERT INTO client_info (FULL_NAME, EMAIL_ID, MOBILE, GENDER, AREA_OF_EXPERTISE, YEARS_OF_EXPERIENCE)
    VALUES (%s, %s, %s, %s, %s, %s)"""
cursor.execute(sql, (fullname, emailid, mobile, gender, areaofexpertise, yearsofexperience))
result = cursor.fetchall()

cursor.close()
db.commit()
db.close()


MySQL table has been created with all the columns asked in the form, all columns are set to varchar(30) and NOT NULL.
The password and user name is correct that is used in the python script.

Awaiting a response ASAP.

Thanks again.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
NerdsOfTechTechnology Scientist

Commented:
Is your server setup to parse phyton? It sounds like it isn't installed or pointed to. Thus, you are seeing the code in plaintext.

I also see none of the info is validated before inserting into SQL; this creates an SQL-injection vulnerability.

Must servers are setup to parse PHP without additional setup. I recommend using PHP instead, as the methodology is pretty much the same.

Also, you will want to clean your inputs so that users don't inject malicious values, for example, values that can erase your entire database.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial