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

Question

I have been trying to update a field. Bid price and offer price are the fields I want to update. The selections are gbp/usd, eur/usd, etc. I would like to define the text field with variables like $bid, $bid1, bid2, etc. which are already predefined. Can someone help me with this?

This is my code.

<?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>

Can you correct the errors first? For instance, `
` may not do what you think it does. Also, a submit button outside of a form will not work. And you have more errors, but those are not as problematic. — Mr Lister, Jul 29 '13 at 07:42
Please note that once a php page is loaded,further php code parsing will not happen until refreshed or called again.So u will have to make ajax calls so that u can update the text field contents. — Mayur, Jul 29 '13 at 08:17
Yes i do understand that and i have done that on a another page. I am trying to find out how i can allow the 2 texts field display the variable values. My variable are $bid , $bid1 , $bid2 , $bid3,etc. how do i assign the selected options to each 2 variable so i can display in the 2 text box?? — Quan Yi, Jul 29 '13 at 08:26

score 0 · Answer 1 · edited May 23 '17 at 12:05

First, you need to get a framework. The most commonly used framework is jQuery.

Secondly, I would look here for the code on how to get the selected text: jQuery Get Selected Option From Dropdown

Finally, you should bind the relvant code to the corresponding event. In jQuery that is the change() event.

Example

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

This should go in a separate file, and it should be linked into your HTML via the script tag, which you can find a tutorial on here: http://www.w3schools.com/tags/att_script_src.asp

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

It is answered here:

Change input class of textbox onchange dropdown List
Play around the code to check what works for you.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 29 '13 at 07:37

Sandiip Patil

456
1
4
21

mas.morozov · Answer 3 · 2013-07-29T08:44:51.873

You should use one PHP array, not separate variables $bid, $bid2, ...
You should generate Javascript data structure (object of arrays in code below, but this can vary) from your PHP array
You should use event onchange of your select to lookup Javascript data structure, find there appropriate data (for user selection) and substitute it into your edits
Learning and using framework like jquery instead of pure JS would be simpler and better, so it is recommended, but not obligatory. Code below is using only pure JS, because you did not mention knowledge or usage of any framework in your question.

Here is the code:

<?
$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>

PHP code is inside ?> brackets, HTML and JS code is outside. As a whole it works "like template". When PHP code is executed, ?> blocks control flow and generate some (maybe empty) output to form HTML+JS document. For example, =$v1+$v2?> outputs value of expression ($v1+$v2) Please, read PHP docs for more detailed explanation. — mas.morozov, Jul 29 '13 at 09:27
oh.. i have tried the code. it doesnt seem to work , the selection of $currency_pair. — Quan Yi, Jul 29 '13 at 09:53
Code was tested before posting here - in local HTM file with Firefox browser, using online sandbox for PHP preprocessing (codepad.org), and it works for me — mas.morozov, Jul 29 '13 at 10:02

score 0 · Accepted Answer · answered Jul 30 '13 at 10:43

Here is PHP-preprocessed version of the code, which contains only HTML and 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>

Tested and works in IE 8-10, Firefox, Chrome, Opera 15 and Safari

WOW Thanks!!! i managed to do it already , but do you know how i make them refreshable(text field) ? because they are live data. — Quan Yi, Jul 31 '13 at 07:21
Making data 'live' is not so simple. You will need to run [AJAX-call](http://en.wikipedia.org/wiki/Ajax_(programming)) to retrieve new data periodically (from server script) Or even use [server push technology](http://en.wikipedia.org/wiki/Push_technology) — mas.morozov, Jul 31 '13 at 15:23

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

4 Answers4