2016-02-12 91 views
1

我是新來的ajax有人幫助我我想創建一個包含輸入字段的表單。通過ajax獲取輸入字段的值,然後將其傳遞給php

enter image description here

每當我按一下按鈕,我會得到輸入字段的值,並將它宣佈它在AJAX數據,並從阿賈克斯將它傳遞給PHP腳本的價值。它會顯示一個表格。

enter image description here

我的問題是如何讓輸入字段的值,並宣佈它爲AJAX數據。點擊表後將在AJAX腳本中聲明成功,該表將顯示一個表。

預先感謝您

UPDATE:

@J_D,這是我爲我的表單的html代碼:

<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> 

這裏是我的AJAX代碼:

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

這裏的getTransmittalNum.php代碼

<?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); 
    } 
?> 
+2

請發表你使用,讓您的AJAX調用的代碼,併爲您的形式 –

+0

什麼是你嘗試的HTML? –

+0

@NorlihazmeyGhazali,將值傳遞給PHP,然後顯示包含Mysql的提取數據的表。 – pvegetah

回答

0

嘗試下面的代碼:

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

我不知道如何填充AJAX @NorlihazmeyGhazali成功下面的代碼, – pvegetah

+0

你可以'console.log(res)'裏面的成功回調,並在這裏共享輸出 –

+0

這裏是我的輸出:http://i.stack.imgur .com/gCZqw.jpg 它將得到輸入文本字段的值。 – pvegetah

相關問題