Develop Reference

Trying to make two functions associate with one button using Type= and OnClick=

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.

Unable to submit a form on the first click event

Well, I spent hours on this problem and scanned the whole stackoverflow, but still do not know what to do. But what really gets me nuts is that such a trivial and the simplest in the world thing is not working. So, what I have now is a form with inputs and a button:
<form id="frm" action="/accent/login/enter/">
{% csrf_token %}
<div draggable="true" id="panel" class="panel" title="">
<input id="login" name="login" type="text" placeholder="" class="required" /> <br/>
<input id="pswd" name="pswd" type="password" placeholder="" class="required" /> <br/>
<button id="btn" value="">ENTER</button>
</div>
</form>
And I have this code which is supposed to send the form:
$('#btn').one("click",function(){ // prevent from multiple submits
$('#frm').validate({ // validate the form before submission
...general stuff: rules, messages, etc
submitHandler:function(form){
$('#frm').submit(function(e){ //submitted on the second click. why???
...prepare parameters for ajax call
$.ajax({
type:'POST',
...general stuff
});
e.preventDefault();
})
}
});
});
The problem is, when a user clicks on submit button for the first time, then the form is not submitted, if, however, he or she clicks it for the second time, then it is submitted ok. I can't understand the logic behind such behaviour implemented in jquery. Besides, I should say, that I have tried many other tricks, like:
form.submit(...
$('#frm')[0].submit(...
But they work not as expected, as if there is no callback function - I'm redirected to the url, but do not stay on the same page - just what I expect from e.preventDefault. I guess there is some sacred method or magic properties in jquery that I should use to make it work (like method one which prevents terrible multiple submits). But at this moment I do not know them.
EDIT
I also tried this trick:
jQuery('#frm').submit(...
but it works exactly like the first method - $('#frm').submit(...
EDIT
I found the third method which works like the previous one:
$('form').submit(...
To sum up, I have three different methods, but all of them work only when a user clicks on the button for the second time. And I have two methods that work in a standard manner and do not make it possible to use a callback function.

The problem is, you are registering for form submit after the form validation.
so,
1) On first click of button validation, the submit event is registered to a handler.
2) On second click of the button, the registered handler will be called. that is why it get submitted on second click. But note that you are registering again for the submit event. which means, on third click the form will be submitted twice, on fourth click the form will be submitted thrice..... and so on...
Solution
1) remove the $("#frm").submit() code from the submitHandler and put it outside.
2) use e.preventDefault(); in $("#frm").submit() so the default action is prevented and page doesn't get reloaded.
3) put the AJAX code directly in submitHandler
$('#btn').one("click",function(){ // prevent from multiple submits
$('#frm').validate({ // validate the form before submission
...general stuff: rules, messages, etc
submitHandler:function(form){
...prepare parameters for ajax call
$.ajax({
type:'POST',
...general stuff
});
}
});
});
$('#frm').submit(function (e) {
e.preventDefault();
});

I guess you are using the jqueryvalidation plugin. If it's true, then your using of $().validate() may be wrong.
The $().validate() function is to initialize the validation, it tells the script how to validate the form value and what to do if the validation is passed(the submitHandler property).
So maybe you should edit your code like this:
<form id='frm'>
...
</form>
$('#frm').validate({
//...general stuff: rules, messages, etc
submitHandler: function (form) {
//blahblah before doing the submitting...
form.submit();
}
});
$('#btn').one('click', function (){
$('#frm').submit();
});
But, actually there's still a problem with your $btn.one() event handler: if you click the button while the form values doesn't meet your validation rules, the one chance to fire the handler is consumed and even if you re-input the right value, the button will never response your clicking unless refreshing the page.
So maybe you should check your business logic again and redesign the form submitting flow, but that's not what this question is discussing, good luck ;)

jQuery removeAttr or prop not working on submitButtons?

Hy there,
I've got a little problem with my formhandling here.
I try to block the submit Button (ID:#submitForm) until any field in the formular has been changed.
Here's my jQuery Code :
// block submit until change
$('#submitForm').prop('disabled', true);
$(':input').change(function() {
$('#submitForm').prop('disabled', false);
});
And in the site :
<input id="submitForm" type="submit" value="Send Form">
If the User changes any of the other Inputfields the Submit should be enabled to post the changes, a simple alert"MSG" does well but not the release of the disabled property.
Thanks a lot,
DR

Thanks for all your support and sorry for stealing your time - the problem was the simultaneous use of jQuery UI (which sets additional options to the buttons, but I didn't tell you).
I solved the problem now with a mixture of the given solutions :
// set the form(ID) submit to the button(ID)
$("#ID_OF_THE_BUTTON").click(function() {
$("#ID_OF_THE_FORM").submit();
});
// set submit button(s)
$("#ID_OF_THE_BUTTON").button();
// block submit until change
$("#ID_OF_THE_BUTTON" ).button("disable");
$(":input").on("input change paste", function() {
$("#ID_OF_THE_BUTTON").button("enable");
});
..and the button:
<button id="ID_OF_THE_BUTTON">User eintragen</button>
Now the submitting of the form blocked until a change in any of the given form-elements is done.

How to prevent that a JQuery button submit my form?

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()
})

OnClick bypasses form submit

I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/

if you don't need a submit button, why don't you use a regular button instead
<input type="button" />

<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>

Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>

In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.

Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});

Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});

Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});

You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.