How to auto-populate the corresponding field based on user input
Question
I have a form, or rather a few forms but the concept should be similar, where I need to take the user input value from one field and auto populate the corresponding fields. For example, in order to multiply a matrix, the rows of matrix A must equal the Columns of matrix B.
So, my form:
<?php
case 'Multiply':
echo "<p>Matrix Multiplication requires Matrix B to have the same number of rows as Matrix A has columns.</p>"
. "<p> What size matrices would you like? </p>";
echo " <form method='POST' action='$_SERVER[PHP_SELF]' onsubmit='return param_check_mux();'>
<p>A Rows:<input type='text' name='arows' id='arows'> A Columns:<input type='text' name='acolumns' id='acolumns'></p>
<p>B Rows:<input type='text' name='brows' id='brows'> B Columns:<input type='text' name='bcolumns' id='bcolumns'></p>
<input type='submit' value='Compile my Matrices!' name='submit'>
</form>";
break;
?>
So basically, if a user was to enter in 'A Rows' the number '3', I want 'B Columns' to auto populate and also hold a '3' value. I wish this to work the other way also, so if 'B Columns' = '3' then 'A Rows' would = '3' also.
I can't seem to find a correct example online anywhere, or rather, I do not know how to word the question in the search as it is quite specific.
Appreciate any help in advance. Thank you.
3 answers
solution1
2 2017-04-20 16:05:48
Using jQuery:
jQuery(document).ready(function()
{
// Set the B Columns if A rows changed
jQuery('#arows').on('change', function()
{
jQuery('#bcolumns').val(jQuery('#arows').val());
});
// Set the A rows if B Columns changed
jQuery('#bcolumns').on('change', function()
{
jQuery('#arows').val(jQuery('#bcolumns').val());
})
});
solution2
1 ACCPTED 2017-04-20 16:12:18
For something like this would would grab the values using javascript. I tried to keep the example fairly basic so you can have a good understanding of how to pull and fill values using JavaScript.
function fillB(){ var anum = document.getElementById('aRow').value; var bnum = document.getElementById('bRow'); bnum.value = anum; } function fillA(){ var bnum = document.getElementById('bRow').value; var anum = document.getElementById('aRow'); anum.value = bnum; }
A: <input type="number" onblur="fillB()" id="aRow"> B: <input type="number" onblur="fillA()" id="bRow">
solution3
1 2017-04-20 16:30:14
You can try and use Javascript on the client side. You listen for changes in input value and then take the appropriate actions. Example :
<body>
<form action="#" method="post">
<div> Matrix A <br/>
<label> Rows </label><input type='text' name='arows' id='arows'></input>
<label> Columns </label> <input type='text' name='acolumns' id='acolumns' onchange=columnChange(this.value)></input>
</div>
<br/>
<div> Matrix B <br/>
<label> Rows </label> <input type='text' name='brows' id='brows' onchange=rowChange(this.value)></input>
<label> Columns </label> <input type='text' name='bcolumns' id='bcolumns'>
</div>
<input type="submit" name="send" value="Send">
</form>
<script type="text/javascript">
function columnChange(input){
document.getElementById("brows").value=input;
}
function rowChange(input){
document.getElementById("acolumns").value=input;
}
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.