我正在尝试运行我的html表单，并在我的代码中使用javascript和PHP。我正在工作的一个简单的形式，将显示Pincode-state-city验证。我有错误在我的javascript代码，因为它不允许我显示所需的输出。请帮我修改一下代码。
index . php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
form{
width:30%;
margin:0 auto;
}
#pincode{width:calc(100% - 120px);}
.textbox{width: 100%;}
.textbox, #pincode{
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin:0;
}
.btn{
text-align: center;
cursor: pointer;
border: 2px solid #5cb85c;
padding: 13px;
width:110px;
display:inline-block;
font-size: 14px;
margin-top:-6px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
color: #fff;
background-color: #5cb85c;
}
h2{font-family:Arial; font-size:30px; text-align:center;}
</style>
</head>
<body>
<div class="container">
<div><h2>Get city from Pincode</h2></div>
<div> </div>
<form autocomplete="off" method="post" id="frmPinCode">
<div>
<input type="text" name="pincode" id="pincode" placeholder="Enter Pincode" autocomplete="new-password">
<input type="button" class="btn" value="Get Details">
</div>
<div> </div>
<div>
<input type="text" class="textbox" id="city" disabled placeholder="City"><br/><br/>
<input type="text" class="textbox" id="state" disabled placeholder="State">
</div>
</form>
</div>
<script>
function get_details(){
var pincode=jQuery('#pincode').val();
if(pincode==''){
jQuery('#city').val('');
jQuery('#state').val('');
}else{
jQuery.ajax({
url:'get.php',
type:'post',
data:'pincode='+pincode,
success:function(data){
if(data=='no'){
alert('Wrong Pincode');
jQuery('#city').val('');
jQuery('#state').val('');
}else{
var getData=$.parseJSON(data);
jQuery('#city').val(getData.city);
jQuery('#state').val(getData.state);
}
}
});
}
}
</script>
</body>
</html>
我试图缩进我的javascript代码，但由于一些语法错误，我无法运行我的代码。
将您的输入类型按钮行替换为以下行
<input type="button" class="btn" value="Get Details" onclick="get_details()">
将下面一行替换为您的输入类型按钮行。我只是添加id作为提交btn。
<input id="submitBtn" type="button" class="btn" value="Get Details">
下一步用script标签内的jquery脚本替换下面的脚本
$(document).ready(function(){
$("#submitBtn").click(function(){
get_details();
});
});
function get_details(){
var pincode=$('#pincode').val();
if(pincode==''){
$('#city').val('');
$('#state').val('');
}else{
var myJSON = {pincode: pincode};
$.ajax({
url: "get.php",
method: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(myJSON),
dataType: "json",
success:function(data){
if(data =='no'){
alert('Wrong Pincode');
$('#city').val('');
$('#state').val('');
}else{
var getData = JSON.parse(data);
$('#city').val(getData.city);
$('#state').val(getData.state);
}
}
});
}
}
既然它是一个表单，你也可以做一些类似的事情，
<form id="my-form" onsubmit="get_details">
<!-- your code -->
</form>
然后在JS中，
$('#my-form').submit(function (event)) {
event.preventDefault();
// your code
}
单击按钮时不调用函数。为提交按钮添加以下代码:
<input type="button" class="btn" value="Get Details" onclick="get_details()">