2015-06-14 50 views
4

填寫完整的表單字段如何填補數據庫基於在下拉選擇,如何從數據庫

實例從下拉列表中選擇的值完整的表單輸入字段:在一個應用程序,通過選擇它填補了一個客戶端名稱包含存儲在數據庫中的詳細信息的完整表單輸入字段。

Sample Code: 
<select name="client"> 
<option value="">-- Select Client Name -- </option> 
<option value="1">John</option> 
<option value="2">Smith</option>        
</select> 

<input name="phone" type="text" value=""> 
<input name="email" type="text" value=""> 
<input name="city" type="text" value=""> 
<textarea name="address"></textarea> 

所有關於輸入字段都需要填寫客戶端名稱選擇值。


編輯:

我試着用AJAX卻苦於無法從文件中獲取特定的變量...以下是我的代碼:

<script> 
    $(document).ready(function() { 
     $('#client').change(function() { 
      alert(); 
      var selected = $(this).find(':selected').html(); 

      $.post('get_details.php', {'client': selected}, function(data) { 
       $('#result').html(data); 
      }); 
     }); 
    }); 
</script> 

get_details.php文件我將不同的值存儲在不同的變量中,但我不明白如何將它們轉換爲主頁中的單個變量。

+0

使用Ajax。 Jquery很容易。 – Rasclatt

+0

到目前爲止,您嘗試過哪些方法來實現您的目標? –

+0

試圖用AJAX但該文件可能無法獲得特定的變量...以下是我的代碼 在get_details.php文件中iam在不同的變量中存儲不同的值,但我不明白如何讓它們變成主頁面的個體變量 – Krish

回答

5

這是隻是一個基本的jQuery例子呼叫本身(當$_POST由腳本的頂部部分是活動的),這是我命名index.php如jQuery的AJAX的url指示。如果需要,您可以使用兩個單獨的頁面來完成此操作。剛分離出來自HTML/JavaScript中的PHP和改變url: '/index.php'

<?php 
// This is where you would do any database call 
if(!empty($_POST)) { 
    // Send back a jSON array via echo 
    echo json_encode(array("phone"=>'123-12313',"email"=>'[email protected]','city'=>'Medicine Hat','address'=>'556 19th Street NE')); 
    // Exit probably not required if you 
    // separate out your code into two pages 
    exit; 
} 
?> 

<form id="tester"> 
    <select name="client" id="client"> 
     <option value="">-- Select Client Name -- </option> 
     <option value="1">John</option> 
     <option value="2">Smith</option>        
    </select> 
    <input name="phone" type="text" value=""> 
    <input name="email" type="text" value=""> 
    <input name="city" type="text" value=""> 
    <textarea name="address"></textarea> 
</form> 

<!-- jQuery Library required, make sure the jQuery is latest --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // On change of the dropdown do the ajax 
     $("#client").change(function() { 
      $.ajax({ 
        // Change the link to the file you are using 
        url: '/index.php', 
        type: 'post', 
        // This just sends the value of the dropdown 
        data: { client: $(this).val() }, 
        success: function(response) { 
         // Parse the jSON that is returned 
         // Using conditions here would probably apply 
         // incase nothing is returned 
         var Vals = JSON.parse(response); 
         // These are the inputs that will populate 
         $("input[name='phone']").val(Vals.phone); 
         $("input[name='email']").val(Vals.email); 
         $("input[name='city']").val(Vals.city); 
         $("textarea[name='address']").val(Vals.address); 
        } 
      }); 
     }); 
    }); 
</script> 
+0

的輸入字段謝謝@Rasclatt,It Works !! – Krish

+0

沒問題!確保您將問題標記爲已回答,以便您沒有其他人試圖解決已解決的問題。歡呼聲 – Rasclatt

+0

你會顯示你的index.php文件代碼嗎? – Aswathy

-3

當你取得了JSON格式AjaxCall的回報數據,如

json_encode(array("phone"=>'123-12313',"email"=>'[email protected]','city'=>'Medicine Hat','address'=>'556 19th Street NE')); 

如上圖所示

然後在jQuery的解析它並將其放入不同的選擇器中,如

var Vals = JSON.parse(response); 
// These are the inputs that will populate 
$("input[name='phone']").val(Vals.phone); 

如上所示。

+3

你爲什麼要複製我的答案的部分?那是個奇怪的人。單詞複製,更糟糕! – Rasclatt

+0

:)我只寫了你的代碼的解釋是否 –

+3

我爲OP做了大量的符號,我不認爲你的增加比我寫的更清晰。 – Rasclatt

相關問題