提交按钮,调用js函数,然后发布到mysql
Submit Button that calls js function and then posts to mysql
对
我正在制作的简短而甜蜜的描述是一个联系表单,该表单对用户地址进行地理编码(一旦他们单击提交),并将获取的纬度和液化天然气值放入隐藏字段中。
我有一切工作,但我有两个单独的按钮,我只想要一个。所以目前用户必须先点击一个按钮,然后才能点击提交按钮,这是愚蠢的。"查找地理点"按钮调用js函数并将纬度和lng值返回到表单上的隐藏字段中,然后按提交按钮,它将所有表单数据发布到MySQL数据库中。
同样,一切都在我的代码中工作,我只需要将表单中的两个按钮合二为一,它仍然可以工作。
这是Javascript:
<script type="text/javascript">
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map_canvas"));
}
function updateCoordinates(latlng)
{
if(latlng)
{
document.getElementById('lat').value = latlng.lat();
document.getElementById('lng').value = latlng.lng();
}
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
updateCoordinates(results[0].geometry.location);
} else {
alert("The address you entered could not be found: " + status);
}
});
}
</script>
这是形式:
<form align="center" method="post">
<label for="firstName">First Name:</label> <input type="text" name="firstName"/><br/>
<label for="lastName">Last Name:</label> <input type="text" name="lastName"/><br/>
<label for="address1">Address 1:</label> <input type="text" id="address" name="address1"/><br/>
<label for="address2">Address 2:</label> <input type="text" name="address2"/><br/>
<label for="city">City:</label> <input type="text" id="city" name="city"/><br/>
<label for="state">State:</label><select id="state" name="state">
<option value="CA"<?php echo(isset($_POST['state'])&&($_POST['state']=='CA')?' selected="selected"':'');?>>CA</option>
</select><br/>
<label for="zip">ZIP Code:</label><input type="text" id="zip" name="zip">
<br/>
<label for="location">Location:</label><select name="location">
<option value="Curb"<?php echo(isset($_POST['location'])&&($_POST['location']=='Curb')?' selected="selected"':'');?>>Curb</option>
<option value="Garage"<?php echo(isset($_POST['location'])&&($_POST['location']=='Garage')?' selected="selected"':'');?>>Garage</option>
<option value="Driveway"<?php echo(isset($_POST['location'])&&($_POST['location']=='Driveway')?' selected="selected"':'');?>>Driveway</option>
<option value="FrontDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='FrontDoor')?' selected="selected"':'');?>>Front Door</option>
<option value="SideDoor"<?php echo(isset($_POST['location'])&&($_POST['location']=='SideDoor')?' selected="selected"':'');?>>Side Door</option>
<option value="Inside"<?php echo(isset($_POST['location'])&&($_POST['location']=='Inside')?' selected="selected"':'');?>>Inside</option></select><br/>
<input type="hidden" id="lat" name="lat" value="" /><br>
<input type="hidden" id="lng" name="lng" value="" /><br>
<input type="button" value="Find Geopoints" onclick="codeAddress()"/>
<input name="submit" type="submit" id="submit" value="Submit"/>
</form>
这是用于将数据发布到 MySQL 的 PHP
<?php
if(isset($_POST['submit']))
{
$con = mysql_connect("localhost","x","y");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("x", $con);
$sqlCmd = sprintf("INSERT INTO x (firstName, lastName, address1, address2, city, state, zip, location, lat, lng) VALUES ('%s','%s','%s','%s','%s','%s','%s','%s','%s','%s')",
mysql_real_escape_string($_POST["firstName"]),
mysql_real_escape_string($_POST["lastName"]),
mysql_real_escape_string($_POST["address1"]),
mysql_real_escape_string($_POST["address2"]),
mysql_real_escape_string($_POST["city"]),
mysql_real_escape_string($_POST["state"]),
mysql_real_escape_string($_POST["zip"]),
mysql_real_escape_string($_POST["location"]),
mysql_real_escape_string($_POST["lat"]),
mysql_real_escape_string($_POST["lng"]));
//echo $sqlCmd;
//die();
mysql_query($sqlCmd);
mysql_close($con);
}
?>
给表单一个 ID,
<form id="geoform" align="center" method="post">
摆脱提交按钮,只需,
<input type="button" value="Submit" onclick="codeAddress()"/>
然后用JS提交,
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
updateCoordinates(results[0].geometry.location);
// Trigger the form submission here
document.getElementById("geoform").submit();
} else {
alert("The address you entered could not be found: " + status);
}
});
}
最后在你的PHP代码中更改这一行,
if(isset($_POST['submit']))
相反,
if($_SERVER['REQUEST_METHOD'] === 'POST')
相关文章:
- 通过 AJAX 调用 PHP 文件,将 $_GET 变量传递到 MySQL 查询中,然后回显到响应中
- 从mysql数据库中删除项目,然后返回最后一页
- 使用下拉列表中的值查询 MySQL 数据库,然后使用结果填充文本字段而不刷新页面
- 提交按钮,调用js函数,然后发布到mysql
- 节点 - MySQL 查询,需要几分钟时间,在几分钟后重复自己,然后完成原始查询
- 使用node.js将表单数据插入到mysql数据库表中,然后按顺序执行
- 确认操作,然后从mysql表中删除行
- 将JS数组传递给PHP,然后更新MySQL
- 将Mysql查询结果传递给javascript,然后使用原始变量调用函数
- 我想保存到mysql数据库,发送一封电子邮件,然后做一个帖子,所有这些都使用一个按钮
- 我如何提交一个没有提交按钮的“文件”输入,然后在同一脚本中做mysql更新
- 在jQuery中通过AJAX发送表单,然后保存在MySQL中,但不工作
- 从输入文本域中获取数据,然后在同一页面上的MySQL语句中使用它
- Mysql OR语句使用AJAX返回数组中的所有行名值,然后在Google Maps API V3中加载多个标记
- 我不能添加信息到我的表在mysql.我使用javascript来显示信息消息,然后它不做任何事情
- 如何将Javascript数组值传递给PHP,然后用这个值发送MySQL查询
- 如何将页面内容传递到另一个页面,然后将其保存到Mysql中
- 从mysql获取数据,然后用angularjs在动态表中显示每一个数据
- 自动检测新的内容从mysql,然后更新页面不刷新
- 如何将 JavaScript 输出作为 POST 请求传递给 PHP?[使用 js 获取 TZ,然后发送到 mySQL]