Error in my javascript code while running a form validation

Question

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>&nbsp;</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>&nbsp;</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.

replace your button line with this <input type="button" class="btn" value="Get Details" onclick="get_details()"> — Veerender Mishra
– Veerender Mishra, Commented Sep 3, 2021 at 5:18
@ProfessorAbronsius I am having an unexpected output. If we put correct Pincode, it is not showing the matching state and city. — User
– User, Commented Sep 3, 2021 at 6:36

Veerender Mishra · Accepted Answer · 2021-09-03 05:19:46Z

1

replace your input type button line with this line

 <input type="button" class="btn" value="Get Details" onclick="get_details()">

answered Sep 3, 2021 at 5:19

Veerender Mishra

881 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

User Over a year ago

I will make changes.

Sathees karan · Accepted Answer · 2021-09-03 05:46:30Z

replace following line with your input type button line. i just add id as submitBtn.

<input id="submitBtn" type="button" class="btn" value="Get Details">

next step replace following script with your jquery script within script tag.

$(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);
        }
      }
    });
  }
}

Swapnil Bhikule · Accepted Answer · 2021-09-03 05:48:59Z

0

Since it's a form, you can also do something like,

<form id="my-form" onsubmit="get_details">
  <!-- your code -->
</form>

And then in JS,

$('#my-form').submit(function (event)) {
  event.preventDefault();
  // your code
}

answered Sep 3, 2021 at 5:48

Swapnil Bhikule

6062 gold badges8 silver badges25 bronze badges

1 Comment

M. Eriksson Over a year ago

If you're binding the submit event in JS and prevent default, you don't need the onsubmit="get_details".

Aditya Krishnan Mohan · Accepted Answer · 2021-09-03 05:52:09Z

0

The button when clicked does not call the function. Add the following code for your submit button:

 <input type="button" class="btn" value="Get Details" onclick="get_details()">

answered Sep 3, 2021 at 5:52

Aditya Krishnan Mohan

1841 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

Error in my javascript code while running a form validation

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related