獲取選定的數據並填充文本框

我正在嘗試爲使用我們的內部應用程序的用戶提供易於使用的表單。基本上我有一個選擇元素。我想要的是當我選擇任何我想填寫指定的文本框。獲取選定的數據並填充文本框

代碼如下。這工作正常，但只填寫1盒。請不要忘記通常我從mySQL數據庫獲取數據。

HTML文件：

<script src="choose.js"></script> 
<select onchange="ChooseGuest(this.value)"> 
<option value="1">guest 1</option> 
<option value="2">guest 2</option> 
<option value="3">guest 3</option> 
</select> 
<input type="text" id="guestdetails"/> 
<input type="text" id="guestdetails2"/>

PHP數據文件：

$AskForIt = $_GET["q"]; 
If ($AskForIt == "1") { 
echo "guest 1 data"; 
} Elseif ($AskForIt == "2") { 
echo "guest 2 data"; 
} Elseif ($AskForIt == "3") { 
echo "guest 3 data"; 
}

js文件：

var xmlHttp 

function ChooseGuest(str) 
{ 
xmlHttp=GetXmlHttpObject(); 
if (xmlHttp==null) 
    { 
    alert ("upgrade your browser"); 
    return; 
    } 
var url="guests.php"; 
url=url+"?q="+str; 
url=url+"&sid="+Math.random(); 
xmlHttp.onreadystatechange=stateChanged; 
xmlHttp.open("GET",url,true); 
xmlHttp.send(null); 
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4) 
{ 
document.getElementById("guestdetails").value=xmlHttp.responseText; 
} 
} 

function GetXmlHttpObject() 
{ 
var xmlHttp=null; 
try 
    { 
    // Firefox, Opera 8.0+, Safari 
    xmlHttp=new XMLHttpRequest(); 
    } 
catch (e) 
    { 
    // Internet Explorer 
    try 
    { 
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e) 
    { 
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    } 
return xmlHttp; 
}

來源

2017-06-06 Ayberk

你可以使用jQuery AJAX而不是HTTP。 – Webinion

歡迎來到Stack Overflow。這段代碼乍一看是正確的。什麼具體不工作，或者人們怎麼幫助？ – Twisty

您的代碼僅設置爲填充第一個框，如此處所示document.getElementById（「guestdetails」）。value = xmlHttp.responseText; –

從我易懂nd，您正試圖用從您的數據庫中提取的數據填充輸入框，並根據選擇的下拉列表顯示適當的數據。 PHP只是服務器端。一旦加載頁面，PHP將只運行一次，直到頁面被重新加載。所以，你需要使用JS訪問這些變量。這可能就是爲什麼只有第一個選擇被填補。

如果確實如此，您需要進入PHP文件並創建與從數據庫訪問的數據相同的JS變量。只需將您的JS瓦爾等於從你的PHP的增值經銷商的PHP回聲：

PHP數據文件

<?php 

    var somePHPvar = "DB Value"; 

?> 

<script> 

    var someVar = <?php echo somePHPvar; ?>; 


</script>

如果這是所有在同一個PHP文件完成後，不要忘了包括它在頁面上並調用這些JS變量。從那裏你將能夠使用JS填充這些值。

來源

2017-06-06 16:11:57

這是一種只需jQuery即可完成的方法。

實施例：https://jsfiddle.net/Twisty/u2gqwfL4/

的JavaScript

var myData = [ 
    "guest 1 data", 
    "guest 2 data", 
    "guest 3 data" 
]; 
$(function() { 
    function ChooseGuest(v, str) { 
    // Example AJAX Post call in jQuery 
    // Replace '/echo/json/' with 'guests.php' 
    // or use $.get() in the same way 
    $.post("/echo/json/", { 
     json: JSON.stringify(myData), 
     q: str 
    }, function(results) { 
     console.log(results, v); 
     $("#guestdetails" + v).val(results[v - 1]); 
    }); 
    } 
    $("#guestSelect option").click(function() { 
    var selVal = parseInt($(this).val()); 
    var selText = $(this).html(); 
    ChooseGuest(selVal, selText); 
    }); 
});

您的代碼會有點不同，由於的jsfiddle的性質和所示例由的方式。我會建議：

function ChooseGuest(v, str) { 
    $.get("guests.php", { 
     q: str, 
     sid: Math.random() 
    }, function(results) { 
     console.log(results, v); 
     $("#guestdetails" + v).val(results); 
    }); 
    }

來源

2017-06-06 16:26:10 Twisty

獲取選定的數據並填充文本框

回答

相關問題