0

モバイル デバイスで使用するように設定された Web サイトがあります。ユーザーはキャンバス要素に描画し、「submitButton」ボタンをクリックしてキャンバスをサーバーに保存できます。ユーザーがボタンをクリックすると、「submitButton」ボタンが消え、代わりに「submittingButton」ボタンが表示されます。これはすべて正しく機能しています。type=button実際、「submittingButton」ボタンをではなくに変更した後、プロジェクト全体が正しく機能していますtype=submit。

しかし、私の質問は、style.display「submittingButton」ボタンの を変更すると、 を に設定するstyle.displayとblock、フォームは送信されませんが (これが必要です)、ボタンは新しい行に表示されます。ただし、style.displayをinlineまたはに設定するとinline-block、フォームが送信され、ページが更新され、図面がクリアされます。が に設定されているときにフォームが送信されるのはなぜですか?またはがstyle.displayに設定されているときにフォームが送信されないのはなぜですか?inlineinline-blockstyle.displayblock

私のコードの関連部分は次のとおりです。

function sendImage(){
if(window.hasBeenDrawn){
  document.getElementById("signError").style.display="none";
  document.getElementById("submitButton").disabled=true;
  document.getElementById("clearButton").disabled=true;
  window.wasSent=true;
  document.getElementById("submitButton").style.display="none";
  document.getElementById("submittingButton").style.display="";
  //document.getElementById("submittingButton").style.display="block";

  saveImage();
}

そしてHTML：

<form method="post" action="" class="sigPad">
  <div id="receipt" style="text-align:center">
    <div class="sig sigWrapper">
      <canvas style="width:85%; height:95%; margin-top:25px" height="300" class="pad" id="myCanvas" />
      <input type="hidden" name="output" class="output" />
    </div>
    <br />
  </div>
  <div id="clearSubButtons">
    <button id="clearButton" onclick="redoSig(); return false;" >&nbsp;</button>
    <button id="submitButton" type="submit" onclick="sendImage()">&nbsp;</button>
    <button id="submittingButton" style="display:none;">&nbsp;</button>
  </div>
</form>

PS。「submittingButton」を に変更することで、コードが期待どおりに機能するようになりましたtype=button。フォームを送信したくありません。saveImage()関数は ajax 投稿を使用して画像をサーバーに送信します。

4

1 に答える 1

0

ボタンの表示値を変更するとフォームが送信される理由はわかりませんが、次のことを提供できます。

デフォルトでは、フォーム内のボタン要素は送信ボタンなので、送信ボタンとして機能しないボタンがある場合は、ボタンのタイプを指定します (または、ボタンのタイプを持つ入力要素を使用します)。 ）、 それで：

<button id="clearButton" onclick="redoSig(); return false;" >&nbsp;</button>

次のようにするとよいでしょう:

<button id="clearButton" type="button" onclick="redoSig();">Clear</button>

また

<input id="clearButton" type="button" onclick="redoSig();" value="Clear">

そのため、クリックされたときにフォームが送信される可能性はありません。submitButtonボタンについても同様に、ボタンに変更すると、フォームを送信できなくなります。

最後に、ボタンのラベルを変更するだけです。おそらく次のようなものを使用してそれを行うことができます：

<form onsubmit="return modifiedSubmit(this);" ...>
  ...
  <input name="submitButton" type="submit" value="Submit signature">
</form>

そして機能：

function modifiedSubmit(form) {
  if (form.submitButton) {
    form.submitButton.value = "Submitting...";
    form.submitButton.disabled = true;
    window.setTimeout(function(){form.submit();}, 10);
    return false;
  }
}

もちろん未テストですが、うまくいけばアイデアが得られます。タイムアウトは、フォームが送信される前にボタンのラベルが変更されることを保証するためのものです。そうしないと、ブラウザーは別のページに移動しているため、DOM の更新を行わず、ラベルを変更しないと判断する可能性があります。

于 2013-05-29T23:30:50.180 に答える