选择表单中的选项后，如何在文本字段上显示数据

How do I display data on a text field upon selection of an option in a form

本文关键字：文本 字段 数据 显示 表单 选项 选择      更新时间：2023-09-26

我一直在尝试更新一个字段。投标价格和报价是我想要更新的字段。选择是gbp/usd、eur/usd等。我想用已经预定义的变量$bid、$bid1、bid2等定义文本字段。有人能帮我吗？

这是我的密码。

<?php
$timestamp=time();set_time_limit (0);
?>
<!DOCTYPE html>
<head></head>
<body>
<meta charset="UTF-8">
<form action ="price.php" method="post">

<p>Symbol : <select name="currency_pair">
<option value="gbp/usd">GBP/USD</option>
<option value="eur/usd">EUR/USD</option>
<option value="usd/cad">USD/CAD</option>
<option value="usd/chf">USD/CHF</option>
<option value="usd/jpy">USD/JPY</option>
<option value="eur/chf">EUR/CHF</option>
<option value="eur/jpy">EUR/JPY</option>
<option value="aud/usd">AUD/USD</option>
</select></p>
<p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>" name="date"/>    </p>
<p> Type : <input type="radio" name="type" value="buy">Buy 
<input type="radio" name="type" value="sell">Sell
<p> Size : <input type="number"pattern="[0-9]+(['.|,][0-9]+)?" step="0.01"name="size"/></p>
<p> Bid Price : <input type="number" step="any" readonly name="entry" value="<?php if  ($currency_pair=="gbp/usd"){echo bid;}elseif($currency_pair=="eur/usd"){echo bid2;};?>" >
Offer Price<input type="number" step="any" readonly="yes" name="entry" value="<?php if ($currency_pair=="gbp/usd"){echo bid;}elseif($currency_pair=="eur/usd"){echo bid2;};?>" ></p>
<p> Stop Loss : <input type="number"step="any" name="stoploss"/></p>
<p> Take Profit : <input type="number"step="any"name="takeprofit"/></p>
<input type="submit" value="Submit"/>
</form>
<script>
</script>   </body> </html>

这是经过PHP预处理的代码版本，它只包含HTML和JS:

<!DOCTYPE html>
<head></head>
<body>
<meta charset="UTF-8">
<form action ="price.php" method="post"/>
<form>
<p>Symbol : <select name="currency_pair" id="select_pair" onchange="pair_selected()">
<option value="gbp/usd">GBP/USD</option>
<option value="eur/usd">EUR/USD</option>
<option value="usd/cad">USD/CAD</option>
</select></p>
<script>
var courses = {};
courses['gbp/usd'] = [ 10, 15 ];
courses['eur/usd'] = [ 14, 16 ];
courses['usd/cad'] = [ 21, 23 ];
function pair_selected() { // to change your edits
    var e = document.getElementById("select_pair");
    var pair = e.options[e.selectedIndex].value;
    var course = courses[pair];
    document.getElementById("bid").value = course[0];
    document.getElementById("offer").value = course[1];
}
window.onload = function() { pair_selected(); } // to init your edits
</script>
<p> Date : <input type="datetime" value="1970-01-01 " name="date"/> </p>
<p> Type : <input type="radio" name="type" value="buy">Buy 
<input type="radio" name="type" value="sell">Sell
<p> Size : <input type="number"pattern="[0-9]+(['.|,][0-9]+)?" step="0.01"name="size"/></p>
**<p> Bid Price : <input id="bid" type="number" step="any" readonly name="entry" value="" >
   Offer Price<input id="offer" type="number" step="any" readonly="yes" name="entry" value="" ></p>**
<p> Stop Loss : <input type="number"step="any" name="stoploss"/></p>
<p> Take Profit : <input type="number"step="any"name="takeprofit"/></p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

已在IE 8-10、Firefox、Chrome、Opera 15和Safari 中测试并工作

首先，您需要获得一个框架。最常用的框架是jQuery。

其次，我会在这里寻找关于如何获得所选文本的代码：jQuery从下拉获得所选选项

最后，您应该将相关代码绑定到相应的事件。在jQuery中，这是change()事件。

示例

$('#currency_pair').change(function() {
    // Note: 'currency_pair' should be an ID, not a name.
    $('#textBox').text($('#currency_pair').val());
});

这应该放在一个单独的文件中，并且应该通过script标记链接到HTML中，您可以在这里找到教程：http://www.w3schools.com/tags/att_script_src.asp

答案在这里：

更改下拉列表上文本框的输入类
播放代码以检查哪些代码对您有效。

  1. 您应该使用一个PHP数组，而不是单独的变量$bid、$bid2。。。

  2. 您应该从PHP数组生成Javascript数据结构（下面代码中的数组对象，但这可能有所不同）

  3. 您应该使用select的事件onchange来查找Javascript数据结构，找到合适的数据（供用户选择），并将其替换为编辑

  4. 学习和使用像jquery这样的框架而不是纯JS会更简单更好，因此推荐，但不是强制性的。下面的代码只使用纯JS，因为您在问题中没有提到任何框架的知识或用法。

这是代码：

<?
$timespamp = time();
$conversions = array(
    "gbp/usd" => array(10,15),
    "eur/usd" => array(14,16),
    "usd/cad" => array(21,23)
    // and so on
);
?>
<!DOCTYPE html>
<head></head>
<body>
<meta charset="UTF-8">
<form action ="price.php" method="post"/>
<form>
<p>Symbol : <select name="currency_pair" id="select_pair" onchange="pair_selected()">
<? foreach( $conversions as $pair=>$course ) { ?>
<option value="<?=$pair?>"><?=strtoupper($pair)?></option>
<? } ?>
</select></p>
<script>
var courses = {};
<? foreach( $conversions as $pair=>$course ) { ?>
courses['<?=$pair?>'] = [ <?=$course[0]?>, <?=$course[1]?> ];
<? } ?>
function pair_selected() { // to change your edits
    var e = document.getElementById("select_pair");
    var pair = e.options[e.selectedIndex].value;
    var course = courses[pair];
    document.getElementById("bid").value = course[0];
    document.getElementById("offer").value = course[1];
}
window.onload = function() { pair_selected(); } // to init your edits
</script>
<p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>" name="date"/> </p>
<p> Type : <input type="radio" name="type" value="buy">Buy 
<input type="radio" name="type" value="sell">Sell
<p> Size : <input type="number"pattern="[0-9]+(['.|,][0-9]+)?" step="0.01"name="size"/></p>
**<p> Bid Price : <input id="bid" type="number" step="any" readonly name="entry" value="" >
   Offer Price<input id="offer" type="number" step="any" readonly="yes" name="entry" value="" ></p>**
<p> Stop Loss : <input type="number"step="any" name="stoploss"/></p>
<p> Take Profit : <input type="number"step="any"name="takeprofit"/></p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
相关文章：