ボタンのonclick押すフォーム

Question

を提出することを入力したときに、私はこのためのフォームが必要な場合、それは、テキストボックスから入力を受け取り、JavaScriptのだ、その上にいくつかの計算を行い、結果を表示するかわからない細かいが、望ましくない動作を動作しますDIVで私は、ユーザがsubmitをクリックするか、またはenterを押すことによって、サブミットできるようにしたいだけです。

要するに、ボタンの種類が「ボタン」の場合、クリックはうまく動作しますが、「押し」は変わっています。ボタンの種類が「送信」の場合は、Enterキーを押しても問題ありません。

<form action="#" onsubmit="calcserial()"> 
Serial no: <input type="text" name="serialno" id="serialno" /><br /> 
<input type="button" value="Submit" onclick="calcserial()" /> 
</form> 

<script type="text/javascript"> 
function calcserial(){ 

var x=document.getElementById('serialno').value; 

var year=[business logic]; 
var month=[business logic]; 

document.getElementById('results').innerHTML="Shipped: " + month + ", " + year; 
} 
</script> 

<div id=results></div> 

は奇妙な行動についての詳細を与えるために、入力タイプが「ボタンのとき：以下のコードのサンプル（罰金働いていたいくつかのビジネスロジックと他の変数を削除し、それが単純ここに表示できるようにすること）であります「そして私はむしろcalcserial（）関数を実行しているよりも、Enterキーを押し、テキストボックスがクリアされ、URLが変更にされています[値]で

[filename].php?serialno=[value]# 

これまでテキストボックスにあったものであること。その後、同じ正確な値を入力してEnterキーをもう一度押すと、意図したとおりに機能しますが、URLに既に提示している値が表示されている場合のみです。別の値を入力すると、テキストボックスが再び消去され、URLが変更されて新しい値が表示されます。入力タイプを「submit」に切り替えると、Enterキーを押しても問題は解決されますが、送信するボタンをクリックすると同じ問題が発生します。

どうしてですか？任意のアイデアをどのように解決するには？ありがとう！

Answer 1

この変更してみてください：あなたのケースではと、

<form action="#" onsubmit="calcserial();return false;">

通常、フォームの提出に起こるデフォルトのアクションを停止する必要があること：これに

<form action="#" onsubmit="calcserial()">

をaction="#"の結果、同じページがリロードされます。

あなたが実際にあなたが本当にこのためのフォームを必要としない（Webサーバに）何かを提出したくないことを考えます。 <input type="button">と、テキスト入力の入力onkeyupをチェックすると、同じ効果が得られます。