Why is <button> "clicked" on form submit? - javascript

Pressing return on the <input> of the form in the code below seems to trigger two events:
submit event,
click event for the first <button> in the form.
preventDefault seems to cancel the submit event, but the click event is not stopped because it is triggered before the submit event. I could replace <button> with an <input type="button">, but why is the <button> clicked at all? How can I prevent it?
Here is the form http://jsfiddle.net/MNXUS/:
<form>
<button></button>
<input>
</form>

That's just what browsers do. If you don't want the button to submit the form, you can make it a "button" button instead of a "submit" button:
<button type=button>Click Me</button>

Related

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.
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>
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>
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>
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.

Using Onsubmit function with php

I am trying to use onsubmit javascript event with my php code.
So I have a screen in which I am allowing a user to select a record to delete,when the user presses the submit button.
But I want the user confirm his action when he presses the submit button by displaying a popup by using javascript
I have added onsubmit event like this
<input type="submit" value="Submit" onsubmit="confirm('Are you sure you wish to delete this record?')" />
But no pop up or alert message is displayed.
Try putting the onsubmit attribute in the <form> tag instead of the <submit> tag.

onclick vs. $.post how to isolate a button function vs. submission? [duplicate]

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.

Onclick shouldn't trigger form data submission

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.

Simple function onSubmit?

I'm trying to call a simple function onsubmit. I tried using onsubmit and also a listener with jQuery. My problem is that when the user presses enter he gets redirected to mysite.com?
<form id="teleport">
<input id="tInput" type="text" value="Type a location" />
<input type="button" id="tSubmit" value="Submit"/>
</form>
$("#teleport").submit(function () {
teleport(document.getElementById('tInput').value);
});
How do I prevent anything from happening when submitting? Also .submit() is only detecting the enter key, how do I listen for both enter key and clicks on the submit button?
You need to prevent the default action of the form. You can do that with event.preventDefault():
$("#teleport").submit(function (e) {
e.preventDefault();
teleport(document.getElementById('tInput').value);
});
Alternatively, you could return false inside the submit event handler for the same effect.
The easiest way to make the button submit the form too will be to change it's type to submit:
<input type="submit" id="tSubmit" value="Submit" />
Or you could attach a click event handler to your current button and trigger the submit event of the form.
Prevent submiting a form:
$("#teleport").submit(function (e) {
teleport(document.getElementById('tInput').value);
e.preventDefault();
});
Submit event catches any way of submitting a form - both with clicking the submit button and enter key press.

Categories