Setting display to inline submits form but block does not

Question

I have a website that is set up to be used on mobile devices. The user can draw on a canvas element and then click the "submitButton" button to save the canvas to a server. When the user clicks the button, the "submitButton" button disappears and a "submittingButton" button appears in it's place. All this is working correctly. In fact, the entire project is working correctly after I changed the "submittingButton" button to a type=button instead of type=submit.

My question is, however, when I change the style.display of the "submittingButton" button, if I set the style.display to block, the form is not submitted (which is what I want) but the button is displayed on a new line. However, if I set the style.display to inline or inline-block, the form is submitted, the page refreshed, and the drawing is cleared. Why does the form submit when the style.display is set to inline or inline-block but not submit when the style.display is set to block?

Here are the relevant parts of my code:

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

And the 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. I have the code working as expected, by changing the "submittingButton" to type=button. I don't want the form to submit, the saveImage() function uses an ajax post to submit the image to the server.

You should event.preventDefault() on submittingButton - see http://stackoverflow.com/questions/8614438/preventdefault-inside-onclick-attribute-of-a-tag — smallworld, May 29 '13 at 23:13
@CodyGuldner the link I shared already has a link to jsfiddle to demonistrate same thing. Though it is doing it on a link element - button should be similar - e.g. onclick="preventSubmit()" and then a function similar to the one in referenced link fiddle should offer desired results. — smallworld, May 29 '13 at 23:19
I do have the button not submitting, as desired. I was just curious as to why changing to the `block` display style would not submit the form, but if I changed it to `inline`, the form did submit. — Niro, May 30 '13 at 00:51

score 0 · Accepted Answer · answered May 29 '13 at 23:30

I have no idea why changing the display value of the button causes it to submit the form, however I can offer the following.

By default, a button element in a form is a submit button, so if you have a button that you don't what to act as a submit button, give it a type of button (or use an input element with a type of button), so:

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

would be better as:

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

or

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

so there is no chance of the form submitting when it's clicked. Similarly for the submittingButton button, change it to a button then it can't submit the form.

Finally, all you seem to be doing is changing the label of the button. You can probably do that using something like:

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

and the function:

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

Untested of course, but hopefully you get the idea. The timeout is to ensure the button label changes before the form submits, otherwise browsers may decide that since they are in the process of navigating to another page, they won't do any DOM updates and so won't change the label.

Thank you for your comments. I have done as you said and I have the button set as `type=button` so that it doesn't submit. I was just curious as to why the `block` style did not submit the form while the `inline` style did. — Niro, May 30 '13 at 00:49

Setting display to inline submits form but block does not

1 Answers1