CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Phil O'kelly
Phil O'kelly

Reputation: 171

Changing button attribute triggers my form submit?

I have a button that I want to dynamically change from a regular button to a form submission button.

I.e. I have my button start with type='button' to prevent it from submitting my form on the first click.

<button id="myButton" type="button">Button</button>

Then I bind a click event to my button, to change it to a submit type for the next click. For some reason, it's triggering the submit on the first click.

$('#myButton').click(function(){
  $(this).prop('type', 'submit');
});

How can I achieve what I'm trying to do? I want my button to turn into a button which will submit my form on the second click, not the first.

Upvotes: 0

Views: 193

Answers (4)

alexhughesking
alexhughesking

Reputation: 2007

You'll want to prevent the default click action from occurring on the first click, but allow the default click action to submit the form on the second click.

You can do this with jQuery's one()

$('#myButton').one('click', function(e) {
  $(this).prop('type', 'submit');
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="alert('Form Submitted!');return false;">
  <button id="myButton" type="button">
    My Button
  </button>
</form>

Upvotes: 1

j08691
j08691

Reputation: 207916

Since the click event will still apply to your button, even as you change the type, you need to insert a small delay between it and the changing of the type. Try:

$('#myButton').click(function() {
  setTimeout(function() {
    $('#myButton').prop('type', 'submit')
  }, 100)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <button id="myButton" type="button">Button</button>
</form>

You should see the first click don't submit the form but the second does.

Upvotes: 1

&#214;zg&#252;r Ersil
&#214;zg&#252;r Ersil

Reputation: 7013

You need to remove the click event ,

try this:

$('#myButton').click(function(){
  console.log('foo');
  $(this).unbind();
  $(this).prop('type', 'submit');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="myButton" type="button">Button</button>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178215

Code and style inline for demonstration purposes

This is by far the simplest and safest

<button type="button" onclick="$(this).hide(); $('#subbut').show()">Click</button>
<button id="subbut" type="Submit" style="display:none">Submit</button>

Upvotes: 1

Related Questions