Develop Reference

Clarification wanted in the difference between input of type button vs input of type submit when calling jquery form.submit

This code should perform the following when clicked:
submit the form
disable the button to prevent double clicks
add a spinner to the button to notify the user something is happening
if the form is invalid, stop the form submission, remove the spinner, and enable the button.
While writing this code, I found that it will perform validation and form submission only when the button type is set to submit. If the button type is button, the form.submit in the button click event does not submit the form. Processing of the form halts, no validation occurs, no form submission. I set up break points inside the jquery #myForm.submit, and they are never hit. Does anyone have an explanation for this behavior?
frameworks: jquery 3.4.1, bootstrap 4
<form action="doSomething" id="myForm">
...
<!-- this performs validation and submits the form -->
<button type="submit" id="aButton" class="btn btn-primary" data-validate="true">
Save
</button>
<!-- this does not perform validation nor submits the form -->
<button type="button" id="bButton" class="btn btn-primary" data-validate="true">
Save
</button>
</form>
Javascript
removeSpinnerFromButton = function (btn) {
var span = btn.find('span[id="spinner"]');
span.remove();
btn.removeAttr('disabled');
btn.removeClass('cursor-wait');
};
addSpinnerToButton = function (btn) {
btn.attr('disabled', 'disabled');
btn.addClass('cursor-wait');
$("<span/>", {
class: 'spinner-border spinner-border-sm',
id: 'spinner',
role: 'status',
aria_hidden: 'true'
}).appendTo(btn);
};
$('button[data-validate="true"]').click(function () {
var $self = $(this);
$('#myForm').submit(function (event) {
addSpinnerToButton($self);
if ($(this).valid()) {
return true;
} else {
event.preventDefault();
removeSpinnerFromButton($self);
return false;
}
});
});
Edit
this bit of code aides in understanding what is happening.
$(function(){
$('#myInputSubmit').click(function(){alert('input of type submit clicked');});
$('#myInputButton').click(function(){alert('input of type button clicked');});
$('#myButtonSubmit').click(function(){alert('button of type submit clicked');});
$('#myButtonButton').click(function(){alert('button of type button clicked');});
$('form').submit(function(e){alert('form submitted');e.preventDefault();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="button" id="myInputButton" value="input button" />
<input type="submit" id="myInputSubmit" value="input submit" />
<button type="button" id="myButtonButton">button button</button>
<button type="submit" id="myButtonSubmit">button submit</button>
</form>

input or button type="submit" has a default behaviour: Submit the form
button type="button" (or no type at all) doesn't have a default behaviour and you should add it with a listener, as you're already doing for click event. Inside that function you should validate and, if it's the case, submit the form with $('#myForm').submit();, with no params
With this piece of code, you're adding a submit listener to the form instead of submit it:
$('#myForm').submit(function (event) {
addSpinnerToButton($self);
if ($(this).valid()) {
return true;
} else {
event.preventDefault();
removeSpinnerFromButton($self);
return false;
}
});
When button is clicked, do your validations and then submit the form. Right now, you need a plugin to validate with $(this).valid(), otherwise, an error will be thrown.
$('button[data-validate="true"]').click(function () {
var $self = $(this);
addSpinnerToButton($self);
if ($(this).valid()) {
$('#myForm').submit();
} else {
removeSpinnerFromButton($self);
}
});

Using .Net Core MVC, How to pass value of Submit "button" to controller, while having a confirmation dialog?

My problem seems like it must be somewhat typical but has been overly difficult to solve. Basically, I have a single form with two submit buttons. One for "Save" and one for "Submit". I also want the user to get a confirmation dialog to before proceeding to submit. Below is an example of what I've done.
View:
<form asp-action="Save">
<input type="submit" name="submitType" value="Save" class="btn btn-primary" />
<input type="submit" name="submitType" value="Submit" class="btn btn-primary" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "form" ).submit(function (e) {
e.preventDefault();
var submitClicked = $("input[type=submit][clicked=true]").val();
if ($(this).valid()) {
if (submitClicked == "Save") {
$("form").unbind('submit').submit();
}
if (submitClicked == "Submit") {
if (confirm("Are you sure you are ready to Submit your document for Approval?")) {
$("form").unbind('submit').submit();
}
}
}
});
$("form input[type=submit]").click(function () {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
Controller:
[HttpPost]
public async Task<IActionResult> Save(Document document, string submitType)
{
if (submitType == "Submit")
{
document.ApprovalLevel = 1;
}
}
Now the confirmation works without flaw, but for some reason when using preventDefault() with unbind().submit() it removes the input value for the submit button so I get a null value for submitType in the controller and consequently the submit fails. When I remove the jquery bit that posits the confirmation question, the input value for the submit button passes without fail. How can I achieve a solution where the confirmation question works while still knowing which button was used to submit to the controller.
Edit (Solution based on Chris Pratt's simple explanation):
View:
<form asp-action="Save">
//ADDED Hidden Input Parameter
<input type="hidden" id="submitForApproval" name="submitForApproval" value="false" />
<input type="submit" name="submitType" value="Save" class="btn btn-primary" />
<input type="submit" name="submitType" value="Submit" class="btn btn-primary" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "form" ).submit(function (e) {
e.preventDefault();
var submitClicked = $("input[type=submit][clicked=true]").val();
if ($(this).valid()) {
if (submitClicked == "Save") {
//ADDED jquery update to hidden input parameter
$('#submitForApproval').val(false);
$("form").unbind('submit').submit();
}
if (submitClicked == "Submit") {
if (confirm("Are you sure you are ready to Submit your document for Approval?")) {
//ADDED jquery update to hidden input parameter
$('#submitForApproval').val(true);
$("form").unbind('submit').submit();
}
}
}
});
$("form input[type=submit]").click(function () {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>

The value of a submit button only makes it into the request if it's what actually submits the form. Here, you're stopping that original submit, and then manually submitting later, where the button is no longer responsible and thus doesn't send its value.
Your best bet, since you're using JS here anyways, is to set a hidden field with the value on click.

How to validate an html5 form and show error tips on a button click?

I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.

You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>

Event on ok cancel button in JavaScript

I am stuck with a small issue.
<input class="btn btn-home" type="submit" name="discard" id="discard" onclick="return confirm('Are you sure you want to discard changes?')" alt="Discard" value="Discard Changes"/>
$('document').ready(function(){
var subm = "";
$('input[type="submit"]').click(function(e) {
subm = e.target.id;
if(subm == 'discard')
window.location = "http://www.weblink.com/manager.php";
})
});
When user click on button a confirmation box will appear with ok cancel. When user click on ok it will redirect to other page and if user click on cancel then it will stay on this page.
Problem is it is redirecting if user click on cancel. I don't want to redirect the page if cancel button clicked.

Two problems here:
You're trying to combine inline and external JS, which is always a bit messy
You're not suppressing the native behaviour of submit buttons, which is to submit a form (which I assume you have in your HTML, even though it's not shown). In fact, you don't even need the button to be of type submit.
HTML:
<button class="btn btn-home" name="discard" id="discard">Discard Changes</button>
JS:
$('#discard').on('click', function(evt) {
evt.preventDefault(); //don't submit the form, which a button naturally does
if (confirm('Are you sure you want to discard changes?'))
location.href = 'http://www.weblink.com/manager.php'; //redirect only on confirm
});

Put confirm dialog inside onsubmit listener instead. No need to use click listener.
<form onsubmit="return confirm('whatever your confirmation message')">
<input class="btn btn-home" type="submit" name="discard" value="Discard Changes"/>
</form>

You need to remove the inline script,
and the modification to the code should be something like the below -
$('document').ready(function()
{
var subm = "";
$('input[type="submit"]').click(function(e) {
var isConfirmed = confirm('Are you sure you want to discard changes?');
if(isConfirmed){
subm = e.target.id;
if(subm == 'discard'){
window.location = "http://www.weblink.com/manager.php";
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-home" type="submit" name="discard" id="discard" alt="Discard" value="Discard Changes"/>

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.

It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>

How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>

Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting

Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>