Dynamically display data in a form

Question

Dynamically display data in a form

This form helps the user enter several values into the database. I want to check that when a user enters a number, then all these addresses should be displayed, which are present, corresponding to this phone number. But this must happen before the button is sent.

<?
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {
        /*
        *
        *
        code to insert database
        *
        *
        */
    }
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    /*
    *
    other inputs
    *
    */
    <input type="text" name="phoneno" value=""  />
    <button class="button btn btn-primary btn-large" type="submit" name="submit" value="submit" >Submit</button>
</form>

An example of representing the original form will

An example of a form submission after entering phoneno

After entering all the values and selecting the address, I would like to submit a form. Can someone please tell me how to do this.

+4

javascript jquery ajax php forms

samuel Sep 14 '15 at 7:43

source share

3 answers

, .

, JavaScript AJAX {} JSON.
JSON JSON div.

0

Manish Prajapati 14 . '15 8:05

jquery autocomplete. jquery

-2

Tuhin Subhra Dey 14 . '15 7:56

Kuya · Accepted Answer · 2015-09-16T10:41:59+0000

Using jquery and ajax calls, you can achieve your results as follows.

The form...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/js/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
  $("#phone").keyup(function() {  
        var number = $("#phone").val();
        $.ajax({
            url: "/processes/process-data.php",
            type: 'POST',
            data: 'number='+number,
            cache: false,
    }).done(function( html ) { 
            $('#results').html(html);
        });
  });
});
</script>
</head>
<body>
<form>
<table width="400" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td>Phone #:</td>
    <td><input type="text" name="phone" id="phone"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><div id="results"></div></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input name="submit" type="submit" value="Submit"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

-data.php

<?php
require ('conn.php');

try {
    $val = $_POST['number'].'%';
    $sql="SELECT * FROM phones WHERE phonenumber LIKE :val";
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':val', $val, PDO::PARAM_STR);
    $stmt->execute();
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $totalRows = $stmt->rowCount();
} catch (PDOException $e) {
    die("Could not update the table: " . $e->getMessage());
}
?>

<?php do { ?>
<label><input type="radio" name="phoneno" value="<?php echo $row['phonenumber'] ?>"><?php echo $row['firstname'] ?> <?php echo $row['lastname'] ?> - <?php echo $row['phonenumber'] ?></label><br>
<?php } while ($row = $stmt->fetch(PDO::FETCH_ASSOC)); ?>

,

CREATE TABLE IF NOT EXISTS `phones` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(20) NOT NULL,
  `phonenumber` varchar(20) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

INSERT INTO `phones` (`ID`, `firstname`, `lastname`, `phonenumber`) VALUES
(1, 'Name', '1', '9158591915'),
(2, 'Name', '2', '9158591916'),
(3, 'Name', '3', '9158591920'),
(4, 'Name', '4', '9158591836'),
(5, 'Name', '5', '9158592274'),
(6, 'Name', '6', '9158577188'),
(7, 'Name', '7', '9158572468'),
(8, 'Name', '8', '9158635700'),
(9, 'Name', '9', '9159517539'),
(10, 'Name', '10', '9168745291'),
(11, 'Name', '11', '9226543210');

, , "9" ... "91" 10... "915" 9... "9158" 8... "91585" 7 ... ..

!

Dynamically display data in a form

More articles: