動的JavaScriptの値をhtmlテキストに入力してください。

フォームとjavascriptを注意深く読んでください。私の目標は、テキスト入力値 'a'と 'b'を取得し、合計整数値は動的に ' - ' x 'というテキスト入力IDに設定されます。どのように動的なJavaScriptの値をHTMLテキスト入力に設定できますか？また、リアルタイムで更新する必要がありますので、ユーザーはxのa + bの合計値を確認できます。 xは実際に値を表示していて、「送信」ボタンが押された場合にこの値を送信します。動的JavaScriptの値をhtmlテキストに入力してください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script> 
</head> 
<body> 

<form method="post"> 

<input type="text" id="a" value="5"> 
<input type="text" id="b" value="2"> 
<input type="text" id="x" value="dynamic_value_from_javascript"> 
<input type="submit" name="submit" value="submit"> 

</form> 



<script type='text/javascript'> 

     $('#a').keyup(updatetxt); 
     $('#a').keydown(updatetxt); 

     var a = $('#a'); 
     var b = $('#b'); 
     var x = a+b; 

     function updatetxt() { 
      $('#x').val($(x).val()); 
     } 

</script> 

</body> 
</html>

出典

2017-08-11 Nix Li

使用するHTML属性のonchangeを入力し、 bは同じjavascript関数updatetxtを呼び出します。関数updatetxtで、aとbの両方の値が空白でない場合に値を合計します。このように機能させる。 var a = $（ "＃a"）; var b = $（ "＃b"）; aとbが空白でないか、または未定義でない場合、var x = a + b; $（ "＃x"）。val（x）;それ以外の$（ "＃x"）。val（ ''）; – Amit

発生した場合、私に知らせてあなたのコードを持ついくつかの問題がありますが、私は以下にそれらを固定している：

あなたはaとbの値を取得する必要がありますキーアップイベント中に
aとb入力の両方のキーアップイベントを購読する必要があります。
それが入力

のデフォルト値に基づいて合計値を設定することができるように整数値を追加するためには、あなたは、任意のイベントのない初めて parseInt

コールupdatetxtを使用することができますテキスト上の

$('#a').keyup(updatetxt); 
 
$('#b').keyup(updatetxt); 
 

 
function updatetxt() { 
 
    var a = $('#a').val(); 
 
    var b = $('#b').val(); 
 
    var x = parseInt(a) + parseInt(b); 
 

 
    $('#x').val(x); 
 
} 
 

 

 
updatetxt();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="a" value="5"> 
 
<input type="text" id="b" value="2"> 
 
<input type="text" id="x" value="">

出典

2017-08-11 12:35:20 Nisarg

私が最近作ったものをチェックすると、リアルタイムで更新されます。任意のクエリは

$(function() { 
    $("#a").keyup(function() { 
    var a = $('#a').val(); 
    var b = $('#b').val(); 
    var c = parseInt(a) + parseInt(b); 
    $('#c').val(c); 
    }); 
    $("#b").keyup(function() { 
    var a = $('#a').val(); 
    var b = $('#b').val(); 
    var c = parseInt(a) + parseInt(b); 
    $('#c').val(c); 
    }); 
}); 

<input type="text" id="a" value="1"/><br> 
<input type="text" id="b" value="2"/><br> 
<input type="text" id="c" value=""/><br><br>

My Jsfiddle link

出典

2017-08-11 12:34:05

動的JavaScriptの値をhtmlテキストに入力してください。

答えて

関連する問題