I am trying to run my html form and used javascript and PHP in my code. I am working on a simple form which will show Pincode-state-city validation. I am having error in my javascript code as it is not allowing me to show desired output. Please help me with my code.
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>
I tried to indent my javascript code but due to some syntax error, I am unable to run my code.
My Answer:
I see a couple of issues in your code:
1. You are calling the `get_details()` function on button click, but you haven't added an event listener to the button to trigger the function. You can add an `onclick` attribute to the button element to call the function like this:
html
2. In your JavaScript code, you are using `jQuery` to select elements and make AJAX requests, but you are mixing it with the shorthand `$` notation. You should consistently use either `jQuery` or `$` throughout your code. So, update this line:
javascript
var getData=$.parseJSON(data);
to:
javascript
var getData=jQuery.parseJSON(data);
After making these changes, your code should work as expected.
Rate this post
3 of 5 based on 4269 votesComments