Develop Reference

How to disable submit button? [duplicate]

I wrote this code to disable submit buttons on my website after the click:
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
Unfortunately, it doesn't send the form. How can I fix this?
EDIT
I'd like to bind the submit, not the form :)

Do it onSubmit():
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
What is happening is you're disabling the button altogether before it actually triggers the submit event.
You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.
Demonstration: http://jsfiddle.net/userdude/2hgnZ/
(Note, I use preventDefault() and return false so the form doesn't actual submit in the example; leave this off in your use.)

Specifically if someone is facing problem in Chrome:
What you need to do to fix this is to use the onSubmit tag in the <form> element to set the submit button disabled. This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead...
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="submit">
</form>

Disabled controls do not submit their values which does not help in knowing if the user clicked save or delete.
So I store the button value in a hidden which does get submitted. The name of the hidden is the same as the button name. I call all my buttons by the name of button.
E.g. <button type="submit" name="button" value="save">Save</button>
Based on this I found here. Just store the clicked button in a variable.
$(document).ready(function(){
var submitButton$;
$(document).on('click', ":submit", function (e)
{
// you may choose to remove disabled from all buttons first here.
submitButton$ = $(this);
});
$(document).on('submit', "form", function(e)
{
var form$ = $(this);
var hiddenButton$ = $('#button', form$);
if (IsNull(hiddenButton$))
{
// add the hidden to the form as needed
hiddenButton$ = $('<input>')
.attr({ type: 'hidden', id: 'button', name: 'button' })
.appendTo(form$);
}
hiddenButton$.attr('value', submitButton$.attr('value'));
submitButton$.attr("disabled", "disabled");
}
});
Here is my IsNull function. Use or substitue your own version for IsNull or undefined etc.
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}

Simple and effective solution is
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
Source: here

This should take care of it in your app.
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});

A more simplier way.
I've tried this and it worked fine for me:
$(':input[type=submit]').prop('disabled', true);

Want to submit value of button as well and prevent double form submit?
If you are using button of type submit and want to submit value of button as well, which will not happen if the button is disabled, you can set a form data attribute and test afterwards.
// Add class disableonsubmit to your form
$(document).ready(function () {
$('form.disableonsubmit').submit(function(e) {
if ($(this).data('submitted') === true) {
// Form is already submitted
console.log('Form is already submitted, waiting response.');
// Stop form from submitting again
e.preventDefault();
} else {
// Set the data-submitted attribute to true for record
$(this).data('submitted', true);
}
});
});

Your code actually works on FF, it doesn't work on Chrome.
This works on FF and Chrome.
$(document).ready(function() {
// Solution for disabling the submit temporarily for all the submit buttons.
// Avoids double form submit.
// Doing it directly on the submit click made the form not to submit in Chrome.
// This works in FF and Chrome.
$('form').on('submit', function(e){
//console.log('submit2', e, $(this).find('[clicked=true]'));
var submit = $(this).find('[clicked=true]')[0];
if (!submit.hasAttribute('disabled'))
{
submit.setAttribute('disabled', true);
setTimeout(function(){
submit.removeAttribute('disabled');
}, 1000);
}
submit.removeAttribute('clicked');
e.preventDefault();
});
$('[type=submit]').on('click touchstart', function(){
this.setAttribute('clicked', true);
});
});
</script>

How to disable submit button
just call a function on onclick event and... return true to submit and false to disable submit.
OR
call a function on window.onload like :
window.onload = init();
and in init() do something like this :
var theForm = document.getElementById(‘theForm’);
theForm.onsubmit = // what ever you want to do

The following worked for me:
var form_enabled = true;
$().ready(function(){
// allow the user to submit the form only once each time the page loads
$('#form_id').on('submit', function(){
if (form_enabled) {
form_enabled = false;
return true;
}
return false;
});
});
This cancels the submit event if the user tries to submit the form multiple times (by clicking a submit button, pressing Enter, etc.)

I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons.
http://malsup.com/jquery/block/#element
Then my buttons have a class autobutton:
$(".autobutton").click(
function(event) {
var nv = $(this).html();
var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
$(this).html(nv2);
var form = $(this).parents('form:first');
$(this).block({ message: null });
form.submit();
});
Then a form is like that:
<form>
....
<button class="autobutton">Submit</button>
</form>

Button Code
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
Disable Button
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
Note: You Case may Be Multiple this time more condition may need

Easy Method:
Javascript & HTML:
$('form#id').submit(function(e){
$(this).children('input[type=submit]').attr('disabled', 'disabled');
// this is just for demonstration
e.preventDefault();
return false;
});
<!-- begin snippet: js hide: false console: true babel: false -->
<form id="id">
<input type="submit"/>
</form>
Note: works perfectly on chrome and edge.

The simplest pure javascript solution is to simply disable the button:
<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
<button id="blahButton">Submit</button>
</form>
document.getElementById('blahButton').disabled = true ;
It works with/without onSubmit. Form stays visible, but nothing can be sumbitted.

In my case i had to put a little delay so that form submits correctly and then disable the button
$(document).on('submit','#for',function()
{
var $this = $(this);
setTimeout(function (){
$this.find(':input[type=submit]').attr('disabled', 'disabled')
},1);
});

How to dynamically enable/disable a button

Based on the answer here, I tried to create a similar validation function:
<html>
<head>
<script>
$("#my_name_id").on("change", function() {
if (!$("#my_name_id").val()) {
$("#button_id").attr("disabled", "disabled");
} else {
$("#button_id").attr("enabled", "enabled");
}
});
</script>
</head>
<body>
<form action="" name="test_form" id="test_form_id" method="post">
<input type="text" name="my_name" id="my_name_id" placeholder="Type your name"/>
<button type="submit" id="button_id">My button</button>
</form>
</body>
</html>
In this example, I would like to continually check to see if the input box contains any characters. If it does, then the button should be enabled (clickable). If the input box does not contain any text, then the button should be disabled.
However, in my case the button always remains enabled. What am I doing wrong here?

You should use prop, not attr. After all your code will become simpler:
$("#my_name_id").on("change keyup", function() {
$("#button_id").prop("disabled", !this.value);
})
.trigger('change');
Also note how you can use trigger in order to run initial check on page load automatically. I also included keyup event for this to work as you type.
Demo: http://jsfiddle.net/7nywe/

No enabled attribute in HTML for , so manipulate the disabled attribute:
<script>
$("#my_name_id").on("change", function () {
if (!$("#my_name_id").val()) {
$("#button_id").attr("disabled", "disabled");
} else {
$("#button_id").removeAttr("disabled");
}
}).trigger('change');;
</script>

You should use prop()
$("#button_id").prop("disabled", true); // disabled
$("#button_id").attr("disabled", false); // enabled
You should use prop when you are dealing with boolean types.

clear radio buttons when click on text input

I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.
<input type="radio" name="radio"><label for="radio1">1</label>
<input type="radio" name="radio"><label for="radio2">2</label>
<input type="radio" name="radio"><label for="radio3">3</label>
<input type="radio" name="radio"><label for="radio4">4</label>
<input type="text" id="textInput">
<script>
$('#textinput').click(function () {
radio.checked = false;
});
</script>

You can use .prop() to set checked property of input rabio buttons. Also you have misspelled textInput while event binding
<script>
$('#textInput').click(function () {
$('input[name="radio"]').prop("checked", false);
});
</script>
DEMO

<script>
$('#textInput').click(function () {
$('input[type=radio]').removeAttr("checked");
});
</script>

Or you can try attr() method
$('#textInput').click(function () {
$('input[name="radio"]').attr('checked',false);
});
DEMO

I think the best way to modify your script block (without changing your html) is first by ensuring that the code runs on document ready, and also you should probably ensure that the event is focus, not click, in case someone is using a keyboard or alternate navigation:
$(function() {
$('#textInput').focus(function () {
$('input[name=radio]').prop("checked", false);
});
});
Though it's probably more likely that you want to only clear other selections if they actually enter some data in that field, you might want to instead do:
$(function() {
$('#textInput').on('input', function () {
if($(this).val().length > 0) {
$('input[name=radio]').prop("checked", false);
}
});
});

How to select value of input onClick?

I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?

<input type="text" onclick="select()"/>

Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};

You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}

You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>

Stop reloading page with 'Enter Key'

I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the apropriate JavaScript takes place without reloading the page. The problem is that the page keeps reloading. Here is my latest attempt:
$("searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
$("#buttonSrch").click();
return false;
}
});
<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />

Don't bind to the inputs; bind to the form. Assuming the form has an ID of searchForm:
$("#searchForm").submit(function() {
search($("#searchText").get(0));
return false;
});
Try it out.
It can also be done with plain JavaScript:
document.getElementById('searchForm').addEventListener('submit', function(e) {
search(document.getElementById('searchText'));
e.preventDefault();
}, false);

I know its a little late but I ran into the same problem as you. It worked for me using "keypress" instead of bind.
$('#searchText').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
//do something
}
});

You are missing # in the selector. Try this
<input type='text' id='searchText' />
JS
$("#searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
//$("#buttonSrch").click();
search(this.value);
}
});

Add onSubmit="return false;" on your form tag
<form onSubmit="return false;">
/* form elements here */
</form>`

$('#seachForm').submit(function(e){
e.preventDefault();
//do something
});

You could set the form action attribute to javascript:void(0); that way the form doesn't post/get so the page wont refresh.
$(document).ready(function () {
$('#form1').attr('action', 'javascript:void(0);');
});

Just use the "action" attribute in <form> tag.
Like this
<form action="#"> // your content </form>

$("searchText").keypress(function(event){
if(event.keyCode == 13){
$("#buttonSrch").click();
return false;
}
});

Does your JS execute immediately or on document ready? If it's not in a document ready the button won't exist at the time you're trying to call bind.

This is what ended up working for me. Please note that my struggle was to find the object that triggered the form submit:
$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);
});

You just need to add this:
<form #submit.prevent="search">
whatever function is triggered for search. When I press that search button search() func is triggered. That is why: #submit.prevent="search"
async search() {
let yuyu = document.getElementById('search').value
console.log('lsd', yuyu)
try {
let newRecipes = await this.$axios.$get(
`/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
)
this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
} catch (e) {
console.log(e)
}
},