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

How to disable two submit buttons when one of them is clicked

I have two submit buttons in a cshtml file.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse"Refuse</button>
I am trying to disable these two buttons when either one of them is clicked.
Is there a way to do so?

You can use the similar code for both buttons. onClick on one button disable the other button and so.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="return foo();">Accept</button>
function foo() {
document.getElementById("buttonAccept").disabled = true;
document.getElementById("buttonRefuse").disabled = true;
return true;
}

you can use javascript (especially jQuery) to reach your purpose.
but, actually when you submit your form, it means your form is sent to your server and it returns new result of your view, so the next steps will happen in the backend, your backend will be responsible to render the result in the way you want.
$('#buttonAccept').on("click",function() {
$('#buttonRefuse').attr("disabled", "disabled");
});
$('#buttonRefuse').on("click",function() {
$('#buttonAccept').attr("disabled", "disabled");
});

This should do it:
document.getElementsByName("SubmitButton")[0].disabled = true;
document.getElementsByName("SubmitButton")[1].disabled = true;
I wouldn't use the index directly though.

You can Do like this.
For Disabling the Button in Front-end using Pure JavaScript
<button onclick="document.getElementById('ButtonTwo').disabled = true;" type="submit" name="ButtonOne" id="ButtonOne">First</button>
<button onclick="document.getElementById('ButtonOne').disabled = true;" type="submit" name="ButtonTwo" id="ButtonTwo">Second</button>

firstly add jquery if your page don't have one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
then add on click event like this
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="EnableDisable()">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse" onclick="EnableDisable()">Refuse</button>
then you can disable both submit button on any of there click event like this
function EnableDisable() {
$(':input[type="submit"]').prop('disabled', true);
}

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"/>

How to click on an input type"submit" button without submiting the whole form

I am trying to click the following line of code:
<input title="Add To Cart" name="pdp_addtocart" value="Add To Cart" type="submit" class="active_step">
I have tried the .click() form and it doesnt work. I need the code in javascript.

With Jquery:
var my_btn = $('input[name="pdp_addtocart"]');
my_btn.click(function(event){
event.preventDefault(); //This avoid the default behavior of the button
//Your Stuff
});
In case your form still sending add this line:
$('form').submit(function(event){
event.preventDefault(); //This avoid the behavior of sending the form
});

Try adding the onclick event to the button:
<input onclick="return false;".... />
return false in the event will halt the form submission.
or using pure javascript:
theButton.onclick = function() {
return false;
};
Edit:
jQuery version:
$theBtn.click(function() {
return false;
});

Does it have to be a <input type="submit" />?
You could use a <input type="button" /> instead.

using javascript to modify form action submits form without doing submit

I have an HTML form that I submit after changing the action with some javascript. Two different buttons can do the submit.
The interesting thing is that I was trying to debug it and inserted an alert after changing the action and before submitting the form. The form is submitted without the alert ever being displayed. To make sure it's actually performing the javascript, I added an alert before changing the action. That alert displays; the alert after changing the action does not.
<form name='FormSelect' method='post' action='Undefined'>
...
<button onclick="SubmitForm('class')">Submit</button>
...
<button onclick="SubmitForm('student')">Submit</button>
...
</form>
<script type="text/javascript">
function SubmitForm(target){
alert("Action 1: " + document.FormSelect.action);
if (target=="class") {
document.FormSelect.action = "ClassAction.php";
} else {
document.FormSelect.action = "StudentAction.php";
}
alert("Action 2: " + document.FormSelect.action);
// document.FormSelect.submit();
}
</script>
Is that the expected sequence of events?

Any button placed inside form element will cause submit action. To prevent this you can add type="button" to button elements, or make you submit callback return false;
<button type="button" onclick="SubmitForm('class')">Submit</button
see http://jsfiddle.net/yD2Uu/

As the others have already pointed out the form will be submitted anyway if you don't cancle the event. I want to suggest a JavaScript free solution to your problem.
<button formaction="ClassAction.php">Submit</button>
<button formaction="StudentAction.php">Submit</button>
It's not supported in IE < 10 though. But you can still use your function as a fallback then, just a bit more elegant ;)
function SubmitForm(button){
button.form.action = button.formaction;
}

A better solution is to give the buttons a name each and submit to Action.php and let the server get the value of the named button
$student = filter_var($_POST["student"], FILTER_SANITIZE_STRING); // php5 cleaning
when you have
<form method="post" action="Actions.php">
<input type="submit" name="student" value="John Doe" />
<input type="submit" name="student" value="Jane Doe" />
<input type="submit" name="student" value="Whatever Doe" />
</form>
Otherwise if you must
Try this
<form method='post' action='Undefined'>
...
<input type="button" value="Class" onclick="SubmitForm(this)" />
...
<input type="button" value="Student" onclick="SubmitForm(this)"/>
...
</form>
<script type="text/javascript">
var actions = {
"class":"ClassAction.php",
"student":"StudentAction.php"
}
function SubmitForm(button){
button.form.action = actions[button.value];
button.form.submit();
}
</script>

Thanks to Yauhen Vasileusky's example, I started removing code between my 1st & 2nd alerts and found that the problem seems to be the following IF statement:
if (document.FormSelect.FormName.value.substr(0,19)=="ObservationRequest_" || document.FormSelect.FormName.value=="StudentReg2013rx" || document.FormSelect.FormName.value=="Toddler Update Form v3rx")
{
document.FormSelect.action = "GenerateXDP.php";
}
When I remove it, both alerts are displayed. So the answer to my question is that changing the action does not submit the form; it was some other error in my code that made it appear as if that was the case.