如何基於用戶輸入自動填充相應的字段

我有一種形式，或者更確切地說有幾種形式，但概念應該類似，我需要從一個字段獲取用戶輸入值並自動填充相應的字段。所以基本上如何基於用戶輸入自動填充相應的字段

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

，如果用戶是進入「：例如，爲了乘以矩陣，矩陣A的行必須等於矩陣B的列

所以，我的表格A行的數字'3'，我想'B列'自動填充，並且還保存'3'值。我希望這種方式也能以另一種方式工作，所以如果'B列'='3'，那麼'A行'也會='3'。

我似乎無法在任何地方在線找到正確的示例，或者說，我不知道如何在搜索中輸入問題，因爲它非常具體。

提前感謝任何幫助。謝謝。

來源

2017-04-20 Kieran

方法是使用JavaScript。一種開始的方式：[CodeAcademy]（https://www.codecademy.com/learn/javascript） – Hulothe

對於像這樣的會使用JavaScript搶值。我試圖保持這個例子非常基本，所以你可以很好地理解如何使用JavaScript來拉和填充值。

function fillB(){ 
 
\t var anum = document.getElementById('aRow').value; 
 
    var bnum = document.getElementById('bRow'); 
 
    bnum.value = anum; 
 
} 
 

 
function fillA(){ 
 
\t 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">

來源

2017-04-20 16:12:18

感謝您的示例代碼，非常容易閱讀和理解！這工作的一種享受，感謝幫助！ – Kieran

我很高興我能幫到你！ :) –

使用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()); 
    }) 
});

來源

2017-04-20 16:05:48 Hossein

你可以嘗試在客戶端使用JavaScript。您傾聽輸入值的變化，然後採取適當的行動。示例：

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

來源

2017-04-20 16:30:14 user3344867

如何基於用戶輸入自動填充相應的字段

回答

相關問題