2014-06-25 44 views
1

不知道如何標題這個問題,但我可以在這裏解釋我的情況,我有下面的代碼(這不是一個真正的數據,我不得不創建這向您展示傢伙,我要什麼)在選擇更改PHP PHP的JQuery填充文本字段與PHP值

<!DOCTYPE html> 
<html> 
<head> 
    <title>Multiple form submit </title> 


</head> 
<body> 
<form action="test.php" method="POST"> 
    First Name : <input type="text" name="fname" /><br /> 
    Last Name : <input type="text" name="lname" /><br /> 
    Gender : <input type="text" name="gender" /><hr /> 
    <select class="form-control input-sm" name="rta_address" id="rta_address"> 
     <option value="2">5, Footer street, AA2 2KK</option> 
     <option value="23">44, Header street ZZ6 7FF</option> 
     <option value="28">56, Oak street, DD5 5LL</option> 
     <option value="33">5, (flat 5) Temple street, EE2 9HH</option> 
    </select> 
    <br /> 
    Postcode : <input type="text" name="postcode" /><br /> 
    House No : <input type="text" name="houseno" /><br /> 
    Street : <input type="text" name="street" /><br /> 

    <input type="submit" name="submit" value="Save" /> 

</form> 
</body> 
</html> 

我想知道的是......如果用戶沒有比在下拉框中提供的任何其他地址是什麼,然後用戶可以選擇從下拉一個值並且該值應該填充這些地址文本字段,否則用戶可以手動鍵入它

請記住,如果窗體有大約40個項目我只在這裏顯示你7或8所以提交一個表格我不認爲會是一個好主意,因爲在這一點上表格是沒有完全填充的。

請注意,所有的地址都來自數據庫通過一個循環。

我希望你得到了我的觀點

請隨時在必要時解決這一問什麼...

問候

+0

數據您將需要一個適當的格式來區分選擇選項中的郵編,houseno和街道。就像'5 Footer street AA2 2KK'應該是'5,Footer street,AA2 2KK'。如果數據可以被格式化,那麼是的,這是可能的。 –

+0

@ThinkDifferent好吧,讓我們這樣做,但如何...:D – Amjad

回答

2

您可以使用每個選項 數據屬性如:

<option data-houseno="5" data-street="Footer Street" data-pincode="AA2 2KK"> 
    5, Footer street, AA2 2KK 
</option> 

得到jQuery的使用這個

$(document).on('change','#rta_address',function(){ 
     $('input[name="postcode"]').val($(this).find('option:selected').data('postcode')) ; 
     //AND SO ON 
}) 
2

您可以使用jQuery庫可以輕鬆地實現它。代碼樣品低於

$(document).on('change','#rta_address',function(e){ 
      if($.trim($(this).val())!=''){ 

         var tmp= $(this).val().split(" "); 
         var house_no=tmp[0]; 
         var street=tmp[1]+" "+tmp[2]; 
         var post_code=tmp[3]+" "+tmp[4]; 
         $('input[name="postcode"]').val(post_code) ; 
         $('input[name="houseno"]').val(house_no) ; 
         $('input[name="street"]').val(street) ; 
      } 

}); 
+0

這個* only *問題是,你可能不知道在地址部分可能有多少單詞。 –

+0

是@JayBlanchard,選項值爲空。需要使用文本部分。 –

+0

你將會改變$(this).val()。split爲$(this).text()。他沒有給下拉菜單分配一個值,只有一個文本。 (儘管他應該爲更好的操控選項設置價值,並在表單提交時使用) – PugsOverDrugs

4

你可以這樣說:

$('#rta_address').change(function(){ 
     var data = $(this).text().split(','); 
     $('input[name="houseno"]').val($.trim(data[0])) ; 
     $('input[name="street"]').val($.trim(data[1])) ; 
     $('input[name="postcode"]').val($.trim(data[2])) ; 

}); 

是的,你可以做一個空的選擇,如:

jQuery中

$('#rta_address').append($('<option>-- SELECT --</option>'); 
$('#rta_address').text('-- SELECT --'); 

或HTML

(添加到選擇)

<option selected="selected">-- SELECT --</option> 
+0

謝謝@ThinkDifferent我可以問你一些事嗎..正如你所看到的那個投遞箱會顯示第一個被選中的項目,但是我不希望任何在頁面開始時選擇的東西只是空白,一旦選擇了空白應該消失的項目 – Amjad

+0

@UsSharifAmjadKhan是的,你可以。請檢查更新後的答案。 –

+0

,並且一旦更改就會消失,因爲我不想在用戶選擇正確的選項後顯示空的選擇選項......謝謝 – Amjad

2

下面是一個例子 - http://jsfiddle.net/3UA7X/2/

$('#rta_address').change(function(){ 
    var addressParts = $(this).val().split(','); 
    $('input[name="postcode"]').val(addressParts[2]); 
    $('input[name="houseno"]').val(addressParts[0]); 
    $('input[name="street"]').val(addressParts[1]); 
}); 
相關問題