We Keep Coding

uploading a file with fetch() works but then skips both success *and* error paths [duplicate]

I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?

Add type="button" to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.

Let getData() return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>

All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
That solves the issue

The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.
Alternatively, you could also use the preventDefault method of the event object:
function getData(e) {
e.preventDefault();
}

HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});

<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>

If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});

A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);

This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.

For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.

Return function is not working in all the cases.
I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}

I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>

I updated on #JNDPNT answer, this way the function (getData()) doesn't have to return false;
<form method="POST">
<button name="data" onclick="getData(); return false;">Click</button>
</form>

A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.
You will need to rename the function for the page to not be reloaded

Add e.preventDefault(); in the starting of the function to be called when the button is clicked
Example:
const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}
The button code:
<input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>

You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>

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.

Onclick inside form element

While fiddling something with the HTML code, I came up with a mind-boggling thing. Have a look at the code:-
<form class="index-form" name="LoginForm">
<div class="index-input">
<button onclick="myFunction();">Login</button>
</div>
</form>
<script>
function myFunction(){
window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
};
</script>
This just added a '?' in my URL and did nothing. But when I relieve the button element from the parent form element, it works perfectly fine. I know what I did is just nonsense but still, any idea how and why it's happening?

When your button is written inside <form> then after calling onclick event handler on button, your form gets submitted. Since there is no action attribute defined in your <form> element so the default is make GET request to the current page with any given named inputs in the form, since you have none, you just get '?'.
Now, if you return false from onclick event handler, then form does not get submitted and your window.location code works.
Update code should be -
<form class="index-form" name="LoginForm">
<div class="index-input">
<button onclick="myFunction(); return false;">Login</button>
</div>
</form>
<script>
function myFunction(){
window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
};
</script>
In addition
<button> defaults to <button type="submit"> which submits the parent form, you can instead use <button type="button"> which does not submit the form.

Try this
<form class="index-form" name="LoginForm">
<div class="index-input">
<button onclick="myFunction()">Login</button>
</div>
</form>
<script>
function myFunction(e){
e.preventDefault();
window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
};
</script>

HTML Onlcick event only works with # Anchor Tag

When I attempt to call a function my this page using the below code. I just seems to refresh the page and not call the script.
<form role="search" name="locationForm">
<div class="form-group">
<input id="locationInput" type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
</form>
If I add a '#' to the end of the url, reload the page, then the onlcick event works as it is suppose to.
As far as I knew these were Anchor tags and I have no idea why they would be required in the calling of a function.
How do I correct this? As I don't want to have to use the #.

You are using a button element, whose default behavior, when clicked, submits its parent form. return false will stop the form from submitting:
<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>

If you don't want the button to automatically submit, you could change its type to button. Then, all it will do is run its onclick code. (You can still have that code submit the form manually)

I suppose you want to run the start() function when you submit the form?
You said you're working with an click event listener.
Try to listen for the submit event, instead.
$('#your_form_id').on('submit', function(e) {
e.preventDefault();
your script...
});
The code above basically does this.
Furthermore, the preventDefault keeps the form from actually submitting itself.
You could access the form data with
$('#your_form_id').serialize();
I hope this pushes you into the right direction!

Why JS confirm() won't Cancel the submit action when I hit Cancel in confirm dialog?

I tried to find out where is the problem, but no clue.
I have 4 buttons for one form by using HTML5 multi submit. When I click on DELETE button, a dialog pops out, by using an attribute onclick="confirm('message');. When I hit Cancel, it should stop form submission, close the dialog and stay on the same page without any actions, instead it keeps submitting the form. It works perfectly until now, and I can't find out where is the problem.
<form action="http://google.com/index/25" method="post" accept-charset="utf-8">
<button class="btn" type="submit" name="formSubmit" value="new">New</button>
<button class="btn" type="submit" name="formSubmit" value="save">Bulk save</button>
<button class="btn btn-danger" type="submit" name="formSubmit" value="delete" onclick="confirm('Do you really want to remove a record(s)?.');">Delete permanently</button>
<button class="btn" type="submit" onclick="confirm('stop or proceed');">submit</button>
</form>
And a live DEMO IS HERE on jsbin
Anyone got the same bug ?

Handle it on the form instead of the button, and have the handler return the outcome from the confirm dialog:
<form onsubmit="return confirm('stop or proceed');">
You can also handle the events of each button, but don't forget to return:
<button onclick="return confirm('blabla');">Button</button>

If you wanna use Jquery, you should use this code:
click
JQuery
$(function () {
$(".classTest").click(function (e) {
return confirm("Submit the Post action?");
});
}