Click here to Skip to main content
15,074,668 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Please help me. I got some problem in my code. I want to display data from database in existing multiple textbox on the same page after I click search button. But when I click the search button, it load the page and go to another page then only the result display. I want it to be display in the same page without refreshing the browser. Below is my code

I have 2 buttons here as for the search button will read the searchDetails.php file, while submit button will read customer.php file. I put it in one form as at the end, the user need to submit all the data after they fill in the field if only after there is no data exist in database after they search. Please help me as I am new in code and I have tried this for weeks


What I have tried:

HTML
<pre><form id = "Form1" action="customer.php" method = "POST">
 <div class="row">
  <div class="column left" style="background-color:transparent">
   <div class="container">
    <div class="row">
     <div class="col-01">
      <label for="icno">ID No :</label>
     </div>
     <div class="col-02">
      <div class="input-group">
       <input type="text" id="customerid" name="customerid" value = "<?php if(isset($_POST['customerid'])){echo $_POST['customerid'];} ?>"  class="form-control" aria-describedby="basic-addon2" required >
       <div class="input-group-append">
        <button type="button" id ="searchID" name = "searchID" onclick="searchForm('searchDetails.php')" class="btn btn-primary">
          Name :</label>
    </div>
    <div class="col-02">
     <input type="text" id="customername" name="customername" required>
    </div>
   </div>

   <div class="row">
   <div class="col-01">
    <label for="name">^__b>Address  :</label>
   </div>
   <div class="col-02">
    <input type="text" id="customeraddress" name="customeraddress" required>
   </div>
  </div>

   <div class="row">
    <div class="col-01">
     <label for="name">^__b>Phone number:</label>
    </div>
    <div class="col-02">
     <input type="text" id="customerhpnum" name="customerhpnum">
    </div>
   </div>
   <div align="center">
    <input class="button1" type = "submit" name = "insert"  value = "SUBMIT">
   </div>
</form>


JavaScript
$('#searchID').on('click', function(){
$.ajax({
    type    : "POST",
    url     : 'searchDetails.php',
    data:{
        customerid:document.querySelector('input[name="customerid"]').value
    },
    success : function(data)
    {
      var response = JSON.stringify(data);
      $('#customername').val(response[0]);
      $('#customeraddress').val(response[1]);
      $('#customerhpnum').val(response[2]);
    },
});
});



PHP
<pre> <?php
include($_SERVER['DOCUMENT_ROOT'].'/customer/include/config.php');

if(isset($_POST['customerid'])){
  $searchValue = $_POST['customerid'];                                   
  $query="SELECT * FROM customer WHERE customerID= '$searchValue'";
  $result = mysqli_query($con, $query) or die(mysqli_error($con,$query));

  while($row = mysqli_fetch_array($result)){
      echo $row['customername'];
      echo $row['customeraddress'];
      echo $row['customerhpnum'];
}
}else{
   echo "<script type='text/javascript'>alert('No Record');</script>";
}
Posted
Updated 22-Aug-21 22:14pm

1 solution

Your HTML is completely messed up - for example:
HTML
<button type="button" id ="searchID" name = "searchID" onclick="searchForm('searchDetails.php')" class="btn btn-primary">
    Name :
</label>
The closing </label> tag doesn't match the opening <button> tag.

It also doesn't make sense for your search code to run when you click on the "Name:" label, rather than the submit button.

Once you've fixed your HTML, change your script to execute when the form is submitted, and prevent the default action:
JavaScript
$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
        ...
    });
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900