Develop Reference

Make the click-button code not disappear instantly? [duplicate]

I have a button (<input type="submit">). When it is clicked the page reloads. Since I have some jQuery hide() functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.

There is no need to use JS or jQuery.
to stop the page to reload, just specify the button type as 'button'.
If you don't specify the button type, the browser will automatically set it to 'reset' or 'submit' which causes the page to reload.
<button type='button'>submit</button>

Use either the <button> element or use an <input type="button"/>.

In HTML:
<form onsubmit="return false">
</form>
in order to avoid refresh at all "buttons", even with onclick assigned.

You could add a click handler on the button with jQuery and do return false.
$("input[type='submit']").click(function() { return false; });
or
$("form").submit(function() { return false; });

In HTML:
<input type="submit" onclick="return false">
With jQuery, some similar variant, already mentioned.

You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:
$(document).ready(function($) {
$(document).on('submit', '#submit-form', function(event) {
event.preventDefault();
alert('page did not reload');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
<button type='submit'>submit</button>
</form>

You could also use JavaScript for that:
let input = document.querySelector("input");
input.addEventListener("submit", (event) => {
event.preventDefault();
})

As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself.

I can't comment yet, so I'm posting this as an answer.
Best way to avoid reload is how #user2868288 said: using the onsubmit on the form tag.
From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<button> won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page.
For example:
<form id="frmData" onsubmit="return false">
<input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
<input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
<input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function() {
var tel = $("#txtTel").val();
var email = $("#txtEmail").val();
$.post("scripts/contact.php", {
tel1: tel,
email1: email
})
.done(function(data) {
$('#lblEstatus').append(data); // Appends status
if (data == "Received") {
$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
}
})
.fail(function(xhr, textStatus, errorThrown) {
$('#lblEstatus').append("Error. Try later.");
});
});
});
</script>

Use event.preventDefault() in the first line of your event function.
Buttons must be of the type button and contain type="submit" in the button html.

Submit <button> not submitted with javascript disable

I'm trying to set a element to disable after clicking (after submitting the data). The issue is, when I use the javascript to disable on click, the button is disabled, but does does not submit the information.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
<center><button type="submit" id="btn1" name="Submit" onclick="disableButton(this)">Submit</button></center>
Does anyone know how to fix this? I'm not very experienced. I've had it work with the a form, but not as a element.
Thanks.

Try to delay the disabling with a timeout 0. This should disable the button at the end of script's lifecycle, allowing the form to post before :
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
}) // No need to set a duration for the timeout
}
<form>
<button type="submit"
onclick="disableButton(this)"
action="/test">Submit</button></form>
Now if you check your console, you see a GET request being made.
Also, <center> is deprecated and not supported in HTML5.

Why don't you try putting the disable function on the form?
Here's the code and site if you are:
** https://www.the-art-of-web.com/javascript/doublesubmit/ **
<form method="POST" action="..." onsubmit="myButton.disabled = true; return true;">
<input type="submit" name="myButton" value="Submit"> </form>
Also, try to use onsubmit.
If you are using js validation you can use this
<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>
<script type="text/javascript">
function checkForm(form)
{
//
// validate form fields
//
form.myButton.disabled = true;
return true;
}
</script>

If you use addEventListener, you won't have this problem See below for an explanation and examples. Also note that this is a Chrome/Safari specific bug from what I have tested.
What you were doing disables the button during the processing of the click. When the browser checks if it should submit the form, it doesn't (though I haven't found something that says it should in the standard).
If you handle it in the submit event of the form, the check on whether the button was disabled has already passed.
Disables using onclick so you still see it here in this example.
<form>
<button type="submit" action="/test" onclick="this.disabled = true">Submit</button>
</form>
Disables it in the onsubmit handler, so it disappears here in this example.
<form onsubmit="this.querySelector('button').disabled = true">
<button type="submit" action="/test">Submit</button>
</form>
However, as I worked on a version without inline handlers, I realized the (seemingly incorrect) behavior cannot be reproduced when done that way.
I would suggest you use JS event handlers and you should handle the submit event since it is more accurate semantically (and even using addEventListener does not fix the problem in Safari).
function queryRegister(query, eventName, handler) {
document.querySelector(query).addEventListener(eventName, handler);
}
queryRegister("#click-handler-form button", "click", (e) => {
e.target.disabled = true;
});
queryRegister("#submit-handler-form", "submit", (e) => {
e.target.querySelector("button").disabled = true;
});
Both submit without inline handlers
<hr />
button.onclick
<form id="click-handler-form">
<button type="submit" action="/test">Submit</button>
</form>
form.onsubmit
<form id="submit-handler-form">
<button type="submit" action="/test">Submit</button>
</form>

If <button type="submit"> tag is not inside <form></form> there is nothing to submit. <button type="submit"> submits only it's parent <form>

Try to submit the form with Javascript.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
document.getElementById('formId').submit();
alert("Button has been disabled.");
}

Jquery form submit event don't work if i trigger manually

So, i have this simple script where i try to stop form submision for make some ajax call and after i want to submit form manually, but this doesn't work, I try over 20 solutions. I try event to stop form submit with prevent default and fire latter in callback as i see in some example but for me give recursion
<script type="text/javascript">
$(function() {
$('#my-form-submit').click(function(e) {
e.preventDefault();
$('#my-form').submit(function() {
alert('test');
});
});
});
</script>
<form method="post" id="my-form" action='#'>
<input type="submit" name="my-submit" value="Submit this form!" id="my-form-submit">
</form>

You attached a event listener for when the form will submited.
To submit the form, just pass the method submit() without any parameter, or like so:
$('#my-form').submit(function() {
alert('test');
}).submit();

If u want to capture event before send a form, you only need to use .submit()
$(function() {
$('#my-form').submit(function() {
alert('Check it is showed before submit test');
});
});

Allow Button Submit on Click with jQuery

I have an web page that has a submit button. My submit button looks like the following:
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
When a user clicks the submit button, I want to disable the button and let the user know that something is happening. To do that, I have the following JavaScript:
$('.wait-on-click').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true);
$('span', this).text('Please wait...');
});
The button disables. The text is updated. However, the submit does not actually get submitted to the server. If I comment out the body of my JavaScript function, it works fine. I do not understand how to fix this.
Thank you!

I believe your problem is with this line
e.preventDefault();
This is preventing the default behavior of the submit button, i.e., submitting! Therefore, remove it.
Update
After testing, I have found the problem.
I believe your problem is with this line
$(this).prop('disabled', true);
For some reason, this is preventing the form from submitting. Therefore, put it in the submit handler.
$('.wait-on-click').click(function(e) {
$('span', this).text('Please wait...');
});
$('form').on('submit', function() {
$('.wait-on-click').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="n" />
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
</form>

Submit form normally after validating with jquery

I'm using the jquery.form.js from here: http://www.malsup.com/jquery/form/. I want to validate the text of the text input from the form before submitting. Validation goes to
'search_validate.php'. This part works fine. If validation passes, the form action's is changed. That works too.
Getting the form to submit normally after changing the action attribute doesn't work. The browser never goes to the '/videos/search/' page. It stays on the same page. I see the '/videos/search/' page loading in Firebug over and over though.
<form id="search" method="post" action="">
<input type="text" id="query" />
<input type="image" id="searchmag" src="blah.jpg" ?>
</form>
<script>
$(function(){
$('#searchmag').click(function(){
$('#search').attr('action','/search_validate.php');
$('#search').ajaxForm(function(data, textStatus){
if ((data.indexOf('letters & numbers only')>-1)) {
$('#query').css('color','#FF0000').val(data);
$("#query").unbind("click").click(function(){
$('#query').css('color','#848484').val('');
});
} else {
$('#search').attr('action','/videos/search/' + $('#query').val());
$('#search').submit();
}
});
});
});
</script>

This always works for me:
$("#myForm").on("submit", function(event) {
event.preventDefault();
// Validate form, returning on failure.
$(this).off("submit");
this.submit();
});
I hope this helps!