Suraj Makhija
asked on
My html web form details are not getting stored in the mysql database table using python script
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
<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:</
<input type="email" name="emailid" placeholder="Eg. contact@domain.com" size="30" required />
<br />
<br />
<label class="field" for="mobile"><b>Mobile:</b
<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
<select name="gender" required>
<option value="male">Male</option>
<option value="female">Female</opt
<option value="other">Other</optio
</select>
<br />
<br />
<label class="field" for="areaofexpertise"><b>A
<input type="text" name="areaofexpertise" placeholder="Eg. Android/iOS Developer" size="30" required />
<br />
<br />
<label class="field" for="yearsofexperience"><b
<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.g
center: {lat: 20.5937, lng: 78.9629},
zoom: 5,
mapTypeId: 'roadmap'
});
//Declaring infowindow.
infowindow = new google.maps.InfoWindow({
content: document.getElementById('f
});
// Create the search box and link it to the UI element.
input = document.getElementById('p
searchBox = new google.maps.places.SearchB
map.controls[google.maps.C
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_ch
searchBox.setBounds(map.ge
});
//Creates a marker when the user clicks on a location on the map.
google.maps.event.addListe
addMarker(event.latLng, map);
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('pla
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(m
marker.setMap(null);
});
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds()
places.forEach(function(pl
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.geometr
} else {
bounds.extend(place.geomet
}
});
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.addListe
document.getElementById('f
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('areaofexper
yearsofexperience = form.getvalue('yearsofexpe
#print '<html>'
#print fullname
#print '</html>'
db = MySQLdb.connect(host="loca
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.
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
<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:</
<input type="email" name="emailid" placeholder="Eg. contact@domain.com" size="30" required />
<br />
<br />
<label class="field" for="mobile"><b>Mobile:</b
<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
<select name="gender" required>
<option value="male">Male</option>
<option value="female">Female</opt
<option value="other">Other</optio
</select>
<br />
<br />
<label class="field" for="areaofexpertise"><b>A
<input type="text" name="areaofexpertise" placeholder="Eg. Android/iOS Developer" size="30" required />
<br />
<br />
<label class="field" for="yearsofexperience"><b
<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.g
center: {lat: 20.5937, lng: 78.9629},
zoom: 5,
mapTypeId: 'roadmap'
});
//Declaring infowindow.
infowindow = new google.maps.InfoWindow({
content: document.getElementById('f
});
// Create the search box and link it to the UI element.
input = document.getElementById('p
searchBox = new google.maps.places.SearchB
map.controls[google.maps.C
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_ch
searchBox.setBounds(map.ge
});
//Creates a marker when the user clicks on a location on the map.
google.maps.event.addListe
addMarker(event.latLng, map);
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('pla
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(m
marker.setMap(null);
});
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds()
places.forEach(function(pl
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.geometr
} else {
bounds.extend(place.geomet
}
});
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.addListe
document.getElementById('f
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('areaofexper
yearsofexperience = form.getvalue('yearsofexpe
#print '<html>'
#print fullname
#print '</html>'
db = MySQLdb.connect(host="loca
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.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
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.