[英]How to make values show up in input boxes
這是我的第一次編碼,我試圖在網站上創建功能,從下拉菜單中選擇一個項目后,與該項目相對應的值將顯示在我創建的輸入框中。 例如,如果我從下拉菜單中選擇“蘋果”,則值“ 1.2”和“ 4.00”將分別顯示在“磅”和“成本”輸入框中。
我已經使用下拉菜單和輸入框的HTML和JS編寫了代碼,並將與項目相對應的數據存儲在csv文件中。 現在,僅在輸入框中顯示值,因為我是用JS編寫代碼的。 HTML文件有什么方法可以從csv文件讀取我的數據並在輸入框中顯示該數據? 以下是到目前為止的內容。
<div id="cs-element">
<label id="cs-element-label">Elements</label>
</div>
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected">Choose Element</option>
<option>Methane</option>
<option>Ethane</option>
<option>Propane</option>
<option>n-Butane</option>
</select>
<div id="result"></div>
<script type="text/javascript">
function dropdownTip(value){
console.log(value);
document.getElementById("myText").value="190.6";
document.getElementById("myText1").value="45.99";
document.getElementById("myText2").value="0.012";
}
</script>
<div id="cs-tc" class="col-sm-4 text-center">
<label id="cs-tc-label" class="control-label">Critical Temperature (K)</label>
<input type="text" id="myText" value=" " class="form-control" name="cs_tc">
</div>
<div id="cs-pc" class="col-sm-4 text-center">
<label id="cs-pc-label" class="control-label">Critical Pressure (atm)</label>
<input type="text" id="myText1" value=" " class="form-control" name="cs_pc">
</div>
<div id="cs-acc" class="col-sm-4 text-center">
<label id="cs-acc-label" class="control-label">Accentric Factor</label>
<input type="text" id="myText2" value=" " class="form-control" name="cs_acc">
</div>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "B1_1.csv", //read csv file
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(allText) {
var allTextLines = allText.split("/\r\n|\n/");
var headers = allTextLines[0].split(',');
var lines = [];
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j=0; j<headers.length; j++) {
tarr.push(headers[j]+":"+data[j]);
}
lines.push(tarr);
}
}
}
</script>
如果我了解您的要求,則無法從html讀取文件。 使用html中的表單,您可以上傳文件,但是該事件由javascript處理。
是的,當然有可能,您發布的代碼就是這樣做的,我知道最初可能會造成混淆,但是讓我解釋一下javascript部分...
<script>
// in html you use script tag to put javascript code inside and using jquery, you // can easily modify the html page.
$(document).ready(function() {
// this is a jquery piece of code that is calling an // ajax request
$.ajax({
type: "GET",
url: "B1_1.csv", //read csv file
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(allText) {
// a method is a piece of code that you write once because you know that you will // reuse it and it makes the code more readable
var allTextLines = allText.split("/\r\n|\n/");
// split is a method that takes as input a string and (in this case `allText`) //literally split the calling string in n strings storing them in an array. The //strings are splitted by the string you passed as parameter. In this case this //piece of code is simply dividing the entire text in n lines
var headers = allTextLines[0].split(',');
// Now is splitting the line number 1 (look for 0-indexed array on google) in many // strings
var lines = [];
for (var i=1; i<allTextLines.length; i++) {
// A for loop is a loop that repeat itself n-times until a condition is no more
// satisfied, in this case i has to be smaller than the length of that array.
// `var i=1` represents the starting point of the index.
// `i<allTextLines.length` is the condition and `allTextLines.length` returns the
// length of the array.
// In the end `i++` just increment i every time the loop reach the end and restart
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
// an if statement is a piece of code that is executed if and only if a condition
// is satisfied.
var tarr = [];
for (var j=0; j<headers.length; j++) {
tarr.push(headers[j]+":"+data[j]);
}
lines.push(tarr); // The push method add to an array a new element
}
}
}
</script>
我試圖盡我所能地解釋(我是一個糟糕的老師,所以這對我來說是培訓),希望對您有所幫助。 如果您有任何疑問,請詢問,如果您想更多地使用代碼,請在網上查找教程,因為有很多東西。 也許您感興趣,幾年前,我從這里學到了javascript。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.