I am working on a webpage where a Submit button sumbits a form, but I also want pressing the button to activate a JavaScript function which will disable the Search button and enable a button to reset the search fields and reenable the search button. This is the code currently on the button:
<input id="Search" type="submit" value="Search" onclick="SearchOff()"></input>
And this is the code currently behind that JavaScript function:
function SearchOff() {
document.getElementById("Search").disabled = true;
document.getElementById("Reset_Search").disabled = false;
document.getElementById("[All other relevant fields]").disabled = true;
var x = document.getElementsByTagName("form");
x[0].submit();// Form submission
return true;
}
(I have anonymised the actual function of the application, but it is just entering data into a form which is processed by other JavaScript)
The JavaScript does work, but when onclick="SearchOff()" is in the code, the type=submit function is overridden. Is there any way to get both functions to work? As you can see, I have tried this already with the bottom 2 lines of the JS code, but that was done without onclick="SearchOff()" in the code. I have also tried without this, and had the same problem.
How can I make both functions work at the same time?
Have you tried this idea?
function searchOff(event) {
//No submission yet.
event.preventDefault();
//Disable buttons.
document.querySelector('[type=submit]').disabled = 'disabled';
//Submit the form.
document.querySelector('form').submit();
}
Prevent the form submission when the button is clicked, disable the buttons you need to disable and then, submit the form yourself.
I decided to try retyping the formulas from scratch, which worked onthis occasion for some reason. I think the key was to not copy and paste any of the actual formula, and instead only copy the text to be searched for and counted. This is all I did differently, and I hope reading this helps someone out who reads this.
I have a jquery bug that I cant solve - hoping for help with a solution. Dont know if it is browser bug related (probably not), jQuery related, or Yii (our backend) related - but I need to try to solve it with the jQuery portion. Code at bottom of message.
Requirement: Disable accidental double submissions on forms.
Current Solution: Check for form submission state through a delegate and when the DOM form state changes to submit - append the disable attribute to the form submit button to prevent accident double form submission.
jQuery double click disabler:
$( document ).ready(function() {
$('html').delegate('form', 'submit', function() {
$(this).find(':submit').attr('disabled', true);
});
});
Problem: This works perfectly on every part of the CRM we are developing EXCEPT for a single timekeeper (clock in/clock out) feature. With the timekeeper the form has two submit buttons (one for clock in, one for clock out). Only one submit button shows at a time (Either "In" or "Out". When you click the button - it submits the form and changes the submit button to the other state by checking a session var to determine what state it is in and determines which of the two submit buttons are to be displayed. Problem is if you click it, the form appears to submit, but the state don't change. If you click it really fast a few times you can get it to change state. I suspect this is a timing or order of operations issue, but I have no idea how to fix it. The fix MUST be done on the front end, so here is the code (both the PHP being impacted and jQuery double click prevention). Perhaps a different method of disabling double submissions may work, please post your solution if you have one to try. Commenting out the current jQuery allows the form to function as designed. What might be causing this, and how might I change the jQuery double click prevention to solve it?
On page PHP for the time clock:
<form action = "<?=$clockUrl?>" method = "post" >
<input type = "hidden" name = "previousUrl" value = "<?=$currentUrl?>">
<?php if ($sessionVar->timeclockin) {?>
<input type = "submit" name = "submit-clockout" value = "Out">
<class="clock-time" ><?=$sessionVar->timeclockin?></class="clock-time">
<?php } else {?>
<input type = "submit" name = "submit-clockin" value = "In">
<?php }?>
</form>
Thank you for pointing me in the right direction Tyler! I was able to fix the issue with the following alteration to my script.
function do_nothing() {
console.log("click prevented");
return false;
}
$('html').delegate('form', 'submit', function(e) {
$(e.target).find(':submit').click(do_nothing);
setTimeout(function(){
$(e.target).unbind('click', do_nothing);
}, 10000);
});
Update 1:
If you are looking to prevent the button from being pressed twice then inside of your onclick or submit function, you should use something similar to the following:
$('#yourButton').prop('disabled', true);
If the page then redirects then you won't have to undo this. If it does, then do the opposite by changing true to false.
The submit function should instead disable the submit button until it either returns or fails.
An alternative is to use a lambda style function and replace it temporarily with an empty function until the request returns or fails.
I am absolutly new in JQuery development and I have the following problem.
I have a form that contains this JQuery button:
<!-- RESET BUTTON: -->
<td>
<button class="resetButton" name="submitReset" onclick="return resetSearch(); return false;">Reset</button>
</td>
Clicking this button the user reset to null two input that are into my form performing this JavaScript function:
function resetSearch() {
var f = document.getElementById('dataDaAForm');
f.dataDa.value = null;
f.dataA.value = null;
event.preventDefault();
}
The script is performed but the problem is that after that it go out from the previous function the form is submitted anyway and I don't want that this behavior happen.
How can I prevent that the form is submitted when the user click on the reset button? As you can see I also try to add this statment but it don't work:
event.preventDefault();
What am I missing? How can I fix this issue?
Another question is: is it the correct way to reset the values of the input tag of my form?
Give this a shot - you need to pass the event into the function. In addition, I've removed the need for inline JS.
$(".resetButton").click(function(e) {
var f = document.getElementById('dataDaAForm');
f.dataDa.value = null;
f.dataA.value = null;
e.preventDefault();
});
In addition to preventing the default, Javascript provides a method to reset your form:
$(".resetButton").click(function(e) {
document.getElementById("dataDaAForm").reset();
e.preventDefault();
});
Note: You tagged jquery, so I provided a jquery solution (although there is no jquery in your question).
The simplest way to create a reset button is an input type reset:
<input type="reset" value="Reset" />
Though if you really want to do it in javascript, the answer of James Hill will suffice
Try this
var form = $('#dataDaAForm')
$(".resetButton").on("click",function(e) {
form.reset()
e.preventDefault()
e.stopPropagation()
})
<input type="submit" name="btnADD" id="btnADD" value="ADD"/>
when user click add button twice, from get submitted twice with same data into table.
So Please help me to restrict user to submit from twice.
Once the form is submitted, attach a handler with jQuery that hijacks and "disables" the submit handler:
var $myForm = $("#my_form");
$myForm.submit(function(){
$myForm.submit(function(){
return false;
});
});
Returning "false" from the submit handler will prevent the form from submitting. Disabling buttons can have weird effects on how the form is handled. This approach seems to basically lack side effects and works even on forms that have multiple submit buttons.
try out this code..
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
You can disable the button after clicking or hide it.
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>
js :
function disableButton(button) {
button.disabled = true;
button.value = "submitting...."
button.form.submit();
}
If you are working with java server side scripting and also using struts 2 then you refer this link which talks about on using token.
http://www.xinotes.org/notes/note/369/
A token should be generated and kept in session for the initial page render, when the request is submitted along with the token for the first time , in struts action run a thread with thread name as the token id and run the logic whatever the client has requested for , when client submit again the same request, check whether the thread is still running(thread.getcurrentthread().interrupted) if still running then send a client redirect 503.
And if you are not using any framework and looking for simple workout.
You can take help of the
java.util.UUID.randomUUID();
Just put the random uuid in session and also in hidden form field and at other side(the jsp page where you are handling other work like storing data into database etc.) take out the uuid from session and hidden form field, If form field matches than proceed further, remove uuid from session and if not than it might be possible that the form has been resubmitted.
For your help i am writing some code snippet to give idea about how to achieve the thing.
<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>
You could notify the user that he drinks too much coffee but the best is to disabled the button with javascript, for example like so:
$("#btnADD").on('click', function(btn) {
btn.disabled = true;
});
I made a solution based on rogueleaderr's answer:
jQuery('form').submit(function(){
jQuery(this).unbind('submit'); // unbind this submit handler first and ...
jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
return false;
});
console.log('submitting form'); // only for testing purposes
});
My solution for a similar issue was to create a separate, hidden, submit button. It works like so:
You click the first, visible button.
The first button is disabled.
The onclick causes the second submit button to be pressed.
The form is submitted.
<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>
I went this route just for clarity for others working on the code. There are other solutions that may be subjectively better.
You can use JavaScript.
Attach form.submit.disabled = true; to the onsubmit event of the form.
A savvy user can circumvent it, but it should prevent 99% of users from submitting twice.
You can display successful message using a pop up with OK button when click OK redirect to somewhere else
Disable the Submit Button
$('#btnADD').attr('disabled','disabled');
or
$('#btnADD').attr('disabled','true');
When user click on submit button disable that button.
<form onSubmit="disable()"></form>
function disable()
{
document.getElementById('submitBtn').disabled = true;
//SUBMIT HERE
}
Create a class for the form, in my case I used: _submitlock
$(document).ready(function () {
$(document).on('submit', '._submitlock', function (event) {
// Check if the form has already been submitted
if (!$(this).hasClass('_submitted')) {
// Mark the form as submitted
$(this).addClass('_submitted');
// Update the attributes of the submit buttons
$(this).find('[type="submit"]').attr('disabled', 'disabled');
// Add classes required to visually change the state of the button
$(this).find('[type="submit"]').addClass("buttoninactive");
$(this).find('[type="submit"]').removeClass("buttonactive");
} else {
// Prevent the submit from occurring.
event.preventDefault();
}
});});
Put a class on all your buttons type="submit" like for example "button-disable-onsubmit" and use jQuery script like the following:
$(function(){
$(".button-disable-onsubmit").click(function(){
$(this).attr("disabled", "disabled");
$(this).closest("form").submit();
});
});
Remember to keep this code on a generic javascript file so you can use it in many pages. Like this, it becomes an elegant and easy-to-reuse solution.
Additionally you can even add another line to change the text value as well:
$(this).val("Sending, please wait.");
Add a class to the form when submitted, stopping a user double clicking/submitting
$('form[method=post]').each(function(){
$(this).submit(function(form_submission) {
if($(form_submission.target).attr('data-submitted')){
form_submission.preventDefault();
}else{
$(form_submission.target).attr('data-submitted', true);
}
});
});
You can add a class to your form and your submit button and use jquery:
$(function() {
// prevent the submit button to be pressed twice
$(".createForm").submit(function() {
$(this).find('.submit').attr('disabled', true);
$(this).find('.submit').text('Sending, please wait...');
});
})
None of these solutions worked for me as my form is a chat and repeated submits are also required. However I'm surprised this simple solution wasn't offered here which will work in all cases.
var sending = 0;
$('#myForm').submit(function(){
if (sending == 0){
sending++;
// SUBMIT FORM
}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}
This only allows one submit in any one second interval.
Good morning.
By default, and i don't know why, when the page ends the rendering, i get the submit button disabled.
<input type="submit" class="buttonColor" disabled="disabled" id="MyMatrix_ctl10_Form_btnSubmit" value="Enviar" name="MyMatrix$ctl10$Form$btnSubmit">
I need some way to enable it, or else i can't submit the form.
How can i do it?
Thanks.
Edit: I only have access to the code of the render page.
script to enable and disable button
$(document).ready(EnableDisableButton(buttonid,'true');
function EnableDisableButton(objid, isEnable) {
if (isEnable==='true') {
$('#' + objid).removeAttr("disabled");
}
else {
$('#' + objid).attr("disabled", "true");
}
}
or if you don't want this solution just remove disble attribute
<input type="submit" class="buttonColor" id="MyMatrix_ctl10_Form_btnSubmit" value="Enviar" name="MyMatrix$ctl10$Form$btnSubmit">
I'm assuming by the generated name and id on the input tag that this is ASP.NET. The most likely cause of the disabled button is that the codebehind for this page actually sets the Enabled state of the button to false.
This is probably to prevent someone submitting a form before all values are completed, so I guess there would be some other codebehind logic somewhere to re-enable the button.