Develop Reference

javascript call before submit using thymeleaf does not work as expected

I am new to javascript so it might be a simple question for many.
I have used form sumbit in thymeleaf and am trying to add a JS validation before the form is submitted to the spring mvc controller. I can perform these two actions separately (individual tasks). However I could not really make them work one after the other (js function and form submit). Submit action is triggered by a button inside the form.
<form th:action="#{/user/trigger}" th:object="${triggers}" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="submit" id="ignore" name="action" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
The js function is like below:
$(".ignore").click(function() {
//do some processing;
return false;
});
So can someone can help me to rewrite this code which will first call the JS function and submit the form to the java spring mvc controller? Thanks in advance.

The issue with your approach is that after your java-script is validating the code, your html 'submit' button is submitting the form as they're executing one after another. You haven't done anything to prevent the form submission after the validation is getting failed.
To overcome this issue, what you can do is to submit the form through your JavaScript code manually only when your validation is successful.
So your code will look something like this -
1.) Changes in Html code, instead of creating the button type as 'submit', make it as a normal button and run your javascript validation function on its click -
<form th:action="#{/user/trigger}" th:object="${triggers}" id="myForm" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="button" id="ignore" name="action" onclick="myValidationFunction()" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
2.) Changes in Javascript code, now after clicking on the above button your javascript validation function will execute and after the validation is successful submit the form manually using the form id, something like this -
function myValidationFunction(){
if( some_condition ){
//validation failed
return;
}
//validation success , when above mentioned if condition is false.
$("#myForm").submit(); // Submit the form
}
For more information about using submit in jquery, refer the official documentation -
https://api.jquery.com/submit/

for jquery, it return a list, so:
$('#search_form')[0].submit();

using window.open() has the effect of submitting form prematurely

I have a web-form written in ASp.Net MVC5 which is used to gather some details from the user. However, before I get them to submit the form, I want them to have the option to look at another web-page (in a new window or tab) which gives them more information if they need it prior to submitting the page. To that end, on the web-form, I have a form with the following buttons:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button onclick="getMoreInfo()">More Information</button>
<button type="button">Submit Form</button>
</form>
Then, at the bottom of the page I have the following javascript defined:
<script>
function getMoreInfo()
{
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse);
return false; // trying to stop the form submission from occurring
}
</script>
My problem is that when this "More Information" button is clicked, it has the effect of submitting the form [which I don't want to do yet] - since there is a separate submit button for doing that task. Is there a way to use a button to jump to another page without actually submitting the current form?
thanks heaps,
David.

I found that answer #3 at this question helped me:
How do I cancel form submission in submit button onclick event?
My solution was to change the code thus:
I changed the button code to look like this:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button id="moreInformationButton" >More Information</button>
<button type="button">Submit Form</button>
</form>
And then I changed the javascript to look like this:
$("#moreInformationButton").click(function (event) {
event.preventDefault(); // This stops the submit form being triggered
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse); // open the help page
});
This allowed me to open up another window or tab with more information without actually submitting the form.

send <form> information through 2 different Submit buttons, that calls the same function but need to know from which submit button came the call

I'm sending information through 2 different Submit buttons, that calls the same function but I need to know from which submit button came the call.
I have a form with 'x' parameters that I'm going to send to a js function thats going to validate the data. After I validate the data I need to send that data to diferent js function depending on the submit button press
my form is like this:
<form name="Datos_ConfiguracionRangos_Tension_Laboral" action="#" onsubmit="Consultar_ConfiguracionRangos('Tension', 'Laboral'); return false" method="post">
<button id="button" type="submit" name="graficar" value ="graficar">Graficar</button>
<button id="button2" type="submit" name="guardar" value ="guardar"> Guardar Configuraciones</button>
</form>`

One way would be to allow your script to submit the form, and use regular buttons.
<button id="button" onclick="validateMe(this)" value ="graficar">Graficar</button>
...then in your function:
function validateMe(e) {
alert(e.value) <-- this tells you which button was presssed.
.... your validation code ...
document.forms.Datos_ConfiguracionRangos_Tension_Laboral.submit();
}

cancel form submission when a button is clicked

I have a login form. No doubt it accepts username / password. And I have 2 buttons, submit button and a cancel button.
What I want to do is when user clicks on submit button, login request starts processing. User can see the login screen for 8-10 seconds. When he clicks on cancel button that should allow him to cancel form submission (cancel login).
Please let me know how to do this. I know there can be a js function but I haven't encountered any. Thanks a lot in advance!

Have you tried :
function cancel () {
document.execCommand('Stop')
}
<input type = "button" name="cancel" value = "cancel" onclick = "cancel()" />

When user sends the login request, the request and authentication must be handled by some server side script like php. So, put a link on the cancel button to another server side script. This script should try to logout the user. If he has already logged in, he will log out so the cancel works. In other case, if he hasn't than nothing happens, the script ends doing nothing.

here is simple example with this you can create your own
html code
<form name="f1" action="test.jsp" method="get">
username:<input type="text" name="username">
password:<input type="password" name='password'>
<input id="sub" type="submit" name="subm" value="subm">
<input id="reset" type="button" name="reset" value="reset">
</form>
and jquery code
$(document).ready(function()
{
$('#sub').click(function(){
$('form [name="f1"]').submit();
});
$('#reset').click(function(){
$('input[name="username"]').val('');
$('input[name="password"]').val('');
});
});
this is just a reference and you can modify and create accordingly with your requirements

My suggestion:
"cancel" button is hidden at first.
When "login" button is clicked, send a login request, hide or disable "login" button, and show "canccel" button. then setup a default handler for normal login procedures:
$.post('login', params, function(){handler.loginCallback()});
When "cancel" button is clicked, replace the handler with another procedure:
handler.loginCallback = function() { ... }
If login failed, do nothing; If login succeeded, send another logout request.

html form button to stop multiple submissions

I have this form that submits to work.php.
What I want to do is disable the submit button when the form is submitted, then re-enable it after 5 seconds or so, so I don't get multiple posts.
How can I do this?
Also, if I press the enter key in one of the text boxes while the submit button is not clickable then it will redirect me to work.php which don't want to happen.
<form method="post" action="work.php">
<strong>Message:</strong>
<input type="text" id="message" name="message" class="message" />
<input type="submit" id="submit" onClick="this.value='Processing form';this.disabled=true;if(Submitting()){this.form.submit()}else{this.value='Submit';this.disabled=false;}" value="Submit" />
</form>

<form id="your-form">
<input type="submit" id="submit" onclick="doSubmit(this);" value="Submit" />
</form>
<script>
function doSubmit(el) {
var frm = document.getElementById('#your-form');
el.value = 'Processing...';
el.disabled = true;
frm.submit();
setTimeout(function(el) {
el.value = 'Submit';
el.disabled = false;
}, 5000);
}
</script>
This is one way to do it. There are several others.

You don't need to worry about this. If the user spams the form submit in any way (clicking submit or hitting enter), only one complete request is sent to the server - every time the submit is triggered, it resets the POST and starts again.
Do note that using JavaScript to stop this behaviour is pretty bad, considering it's incredibly easy to disable JS and spam away, which is one of the reasons why browsers only allow one POST submission at a time.
If you're using AJAX (which you haven't specified), then you should use #drrcknlsn's answer.

If your using Ajax you use the "Ajax Manager Plugin." It will prevent double requests.
That way you don't have to worry about a person hitting enter or the submit button multiple times. Only one request will go through until it is finished(but by then I would assume a success message and clearing of the form would happen)