JavaScriptでsumbitボタンとリセットボタンを使用してフォーム内の2つのフィールドを計算する

ここでコードを作成して、結果のフィールドに私の合計を得る方法を見ていないと思っています。フィールドからすべてのテキストを消去します。JavaScriptでsumbitボタンとリセットボタンを使用してフォーム内の2つのフィールドを計算する

<html> 

<head> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      document.result.submit() 
     } 

     function reset() {} 
    </script> 
</head> 

<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 

    <form> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
</body> 

</html>

出典

2016-04-04 Mr_links

フォームを送信するには 'form'に' .submit（） 'を使用し、' .reset（） 'を使用するにはリセットしてください[Demo]（https://jsfiddle.net/tusharj/mma5jqyk/） – Tushar

あなたはjQuery ...なぜあなたはそのようにタグ付けしましたか？ –

初めての投稿 –

これをしますか？ jsbin

<html> 
<head> 
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      //document.result.submit() 

      //if you want use submit, use this code. if only see the result, don't use this 
      //Submit is receive data, so you can't see a result. 
      //document.getElementById('formId').submit(); 

      //jquery submit 
      //$("form")[0].submit(); 
     } 

     function reset() { 
      //no jquery 
      document.getElementById('formId').reset(); 
      //jquery 
      //$("form")[0].reset(); 
     } 
    </script> 
</head> 
<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 
    <form id="formId"> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
    <input type="button" onclick="reset()" value="reset"> 
</body> 

</html>

出典

2016-04-04 01:38:12 yongsup

これを使用してオリジナルを強化し、より多くの計算をするようにしました[JSBin]（https://jsbin.com/finagohuju/edit?html,output） –

なぜフォームを送信しますか？

document.formsを使用できます。フォームにアクセスする。

これを試してみてください：

<html> 

<head> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      document.forms.calculator.submit() 
     } 

     function reset() { 
      document.forms.calculator.reset(); 
     } 
    </script> 
</head> 

<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 

    <form name="calculator"> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
    <input type="button" onclick="reset()" value="reset"> 
</body> 

</html>

出典

2016-04-04 01:23:57

フォームにリセットを配置し、クリックイベントを使用する必要はありません。また、入力フィールドには 'name'属性がないため、入力されません。 –

これはまさに私が感謝のために探していたものでした！ –

だけのフォームにして、リセット機能にIDを与え、ちょうど

document.getElementById("myForm").reset();

アップデートを実行します。

ROBGのコメントによると、あなたがドン」ボタンに関数をバインドする必要はありません。あなたは、単純に、フォームのすべてのフィールドをリセットする

<input type="reset">

を追加することができ、ボタンがフォーム外にある場合は、特定のフォームに関連付けること <input form="formID" type="reset"> を行うことができます。

出典

2016-04-04 01:34:53 user1070111

フォームをリセットするためのコードは必要ありません。リセットボタン（入力タイプのリセット）を使用するとフォームがリセットされます。 – RobG

は素晴らしいですが、ボタンをフォームから外したい場合はどうしたらいいですか？このように、タイプリセットボタンは機能しません。 – user1070111

コントロールの*フォーム*属性を使用してフォームの外にあるフォームコントロールを関連付けることができるので、 ''はどこにでも置くことができ、フォームをリセットします。これは、フォームに関連付けるすべてのコントロールに適用されますが、アクセシビリティ制約（適用される場合）には注意が必要です。 – RobG

フォームの提出ハンドラにリスナーを添付し、提出に起こるために何かをしたいので、もしフォームは、送信ボタンをクリックせずに提出することができることに注意してください。フォームをリセットするには、コードなしのリセットボタンが必要です。

フォームコントロールが成功すると、フォームで自分の価値を提出する名前を持つ必要があり、そしてあなたがgetElementByIdをを使用する必要はありませんので、あなたがリスナーからこのを使用して、フォームへの参照を渡すことができます。

上記を実装すると、必要なコード量が大幅に削減されます。

以下では、サブミットリスナーはfalseを返し、フォームの送信を防ぎます。フォームを提出したい場合は、単にイン・ラインのリスナーからのreturn文を削除します。

function addition(form) { form.result.value = +form.num1.value + +form.num2.value; }

<form name="calculator" onsubmit="addition(this); return false;"> Number 1: <input type="number" name="num1" value="0" autofocus> <br> Number 2: <input type="number" name="num2" value="0"> <br> Result: <input type="text" name="result" value="0" readonly> <br> <input type="submit" value="Submit form"> <input type="reset"> </form>

あなたはあなたが作ることができ、その場合には、まったくフォームを送信したくない場合があります送信ボタンはプレーンボタンであり、そこから関数を呼び出すが、それ以外の場合はフォームを停止することを忘れないでください。

出典

2016-04-04 01:43:13 RobG

JavaScriptでsumbitボタンとリセットボタンを使用してフォーム内の2つのフィールドを計算する

答えて

関連する問題