通过ajax获取输入字段的值，然后将其传递给php

Question

I am new with ajax somebody help me I want to create a form that include input field.

Whenever I click the button I will get the value of input field and it declared it as data in AJAX and the value from ajax it pass to PHP script. It will display a table.

My question is how to get the value of input field and declared it as data in AJAX. After click the table will declared in success in AJAX Script that will show a table.

Thank you in advance

UPDATE:

@J_D, Here's my html code for my form:

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
            <table cellpadding="15px">
                <tr>
                    <td>Transmittal #</td>
                    <td><input type="text" class="form-control" style="padding-left:5px;" name="transmittal_number_inquiry" id="transmittal_number_inquiry" class="transmittal_number_inquiry" onKeyPress="return isNumberKey(event)" required></td>
                </tr>
            </table>
            <div style="float:right; padding-right:110px; padding-top:10px;">
                <a href="#modalTransmittalInquiry" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" data-backdrop="false" name="inquire-transmittal-number">Inquire</a>
                <?php /*?><input type="submit" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" name="btn-inquire-transmittal-number" data-backdrop="false" value="Inquire"><?php */?>
                <?php /*?><button type="submit" class="btn btn-info" data-toggle="modal" id="btn-inquire-transmittal-number" name="btn-inquire-transmittal-number" data-backdrop="false">Inquire</button><?php */?>
            </div>
        </form>

Here's my AJAX Code:

$(document).ready(function(){
   $('.btn-inquire-traensmittal-number').click(function(){
    $inputtextval = $('#transmittal_number_inquiry').val();
    $.ajax({
        type: 'POST',
        url: getTransmittalNum.php,
        data: {'transmittal_number_inquiry' : $inputtextval},
        success: function(res){
        }
    });
  });
});

Here's the getTransmittalNum.php code

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "etransmittal";

    $selectedTransmittal = $_GET['q'];
    $con = mysqli_connect($servername,$username,$password,$dbname);

    if(!$con){
        die("Connection failed: " . mysqli_connect_error());
    }

    if(isset($_POST['inquire-transmittal-number'])){
        $query = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
                    userlist.`department`, en.document_number, doctype.document_type, doctype.document_description, vendor.`vendor_name`, en.`remarks`, 
                    en.status_id, stat.status_name, en.total_amount
                    FROM tbl_encode_transmittal en
                    LEFT JOIN tbl_vendor vendor ON vendor.`vendor_id` =  en.vendor_id
                    LEFT JOIN tbl_doctype doctype ON doctype.`doc_id` = en.doctype_id
                    LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
                    LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.`receiver_id`
                    LEFT JOIN tbl_status stat ON stat.status_id = en.status_id
                    WHERE en.`transid` = '{$_POST['transmittal_number_inquiry']}'";

        $result = mysqli_query($con, $query);
        $rows = array();

        if($result){
            while($row = mysqli_fetch_assoc($result)){
                $rows[] = $row;
            }
        }
        else{
            echo 'MYSQL Error: ' . mysqli_error();
        }

        $json = json_encode($rows);
        echo $json;
        mysqli_close($con);
    }
?>

Answer 1

Try following code :

$(document).ready(function(){
  $('#btn-inquire-transmittal-number').click(function(){
    $inputtextval = $('#transmittal_number_inquiry').val();
    $.ajax({
      type: 'POST',
      url: 'getTransmittalNum.php', // wrap code with quote
      data: {'transmittal_number_inquiry' : $inputtextval},
      dataType : 'json', // expecting result type json
      success: function(res){
        // once you got result,
        // populate table here
      }
    });
  });
});

PHP

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "etransmittal";

//$selectedTransmittal = $_GET['q']; //<---- u need this?????
$con = mysqli_connect($servername,$username,$password,$dbname);

if(!$con){
    die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['transmittal_number_inquiry'])){ // <-- check for existence
    $query = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
                userlist.`department`, en.document_number, doctype.document_type, doctype.document_description, vendor.`vendor_name`, en.`remarks`, 
                en.status_id, stat.status_name, en.total_amount
                FROM tbl_encode_transmittal en
                LEFT JOIN tbl_vendor vendor ON vendor.`vendor_id` =  en.vendor_id
                LEFT JOIN tbl_doctype doctype ON doctype.`doc_id` = en.doctype_id
                LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
                LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.`receiver_id`
                LEFT JOIN tbl_status stat ON stat.status_id = en.status_id
                WHERE en.`transid` = '{$_POST['transmittal_number_inquiry']}'";

    $result = mysqli_query($con, $query);
    $rows = array();

    if($result){
        while($row = mysqli_fetch_assoc($result)){
            $rows[] = $row;
        }
    }
    else{
        echo 'MYSQL Error: ' . mysqli_error();
    }

    $json = json_encode($rows);
    echo $json;
    mysqli_close($con);
}
?>