We Keep Coding

disable click button on submit

I try to update this jquery script in pure js (with bootstrap 5). The goal is to not allow someone to click twice on the payment button. Sorry I am not very strong in js.
My goal is to have the same reaction that the jquery script.
I tried to follow the process on this page :
Disabling a button in vanilla JavaScript and in jQuery
Thank you
My current script
<form name="checkout_confirmation" action="http://............/Process" method="post" id="checkout_confirmation" role="form" onsubmit="return checkCheckBox(this)"><section class="checkout_confirmation" id="checkout_confirmation">
div class="text-end" id="process_button" class="processButton">
<button type="submit" data-button="payNow" class="btn btn-success">Confirmer la commande avec paiement</button> </div>
</div>
</form>
<script>
$('form[name="checkout_confirmation"]').submit(function() {
$('form[name="checkout_confirmation"] button[data-button="payNow"]').html('Confirm the payment').prop('disabled', true);
});
</script>
Now the script update
<script>
var button = document.getElementById('checkout_confirmation');
button.addEventListener('submit', function() {
alert('Confirm the payment');
});
button.disabled = false;
button.click(); // No output
button.prop("disabled", true);
</script>

setAttribute can be used in JavaScript to set the attribute of the button as disabled.
Element.setAttribute("disabled", true);
This can be used to disabled the button.
So when someone clicked on the submit button, you can disable the button till the data is processed.
Check the below demo code:
const btn = document.getElementById("submit-data");
btn.addEventListener("click", submitForm);
function submitForm(){
btn.setAttribute("disabled", true);
btn.innerText = "Submitting..";
let userName = document.getElementById("user-name").value;
console.log("Name: ", userName);
setTimeout(() => {
btn.removeAttribute("disabled");
btn.innerText = "Submit";
}, 3000);
}
<form type="POST">
<label for="user-name">Full Name</label>
<input type="text" id="user-name" placeholder="Your Full Name" />
<br /><br /><br />
<button id="submit-data">Submit</button>
</form>

You have two problems:
Submit events fire on form elements, not button elements.
getElementById gets an element by its id and neither your button nor your form has an id. (See this question).

Could you not use e.preventDefault() to stop the default behaviour of the button being pressed?
More can be read here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

call function When Submit is Clicked

Hello guy's im trying to call a Function But after i Click on Submit but there is no ID for the submit
here what i got :
<input type="submit" name="save" value="Continue" onclick="return validateFrm();" class="btn primary-btn btn-ctnue row alignCenter" autocomplete="off">
so i want it to be like this for example :
if Submit Clicked then Run this :
function example()
{ alert('Yay!'); )
Anyidea How to do it on JavaScript/Jquery
Ps: There a lot of Submit so i want this specific Submit

Select the submit button using CSS selector input[name=save]
Add listener to fire on click event and pass the function to execute.
document.querySelector("input[name=save]").addEventListener("click", function(){
alert('Yay!');
});

<button id="submit-btn">SUBMIT</button> //html file
const submitBtn = document.getElementById('submit-btn');
function showAlert() {
alert ('YAY!');
}
showAlert();
submitBtn.addEventListener('click', showAlert);

Adding css when form submitted javascript

I want to add css to a class when my form is submitted because it take long time, but nothing change! here is my form
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
the div I want to change :
<div id="circlecontainer"></div>
and my script :
$('form.std').submit(function(e){
$( "#circlecontainer" ).removeClass('whatever').addClass('whatever');
});
I want the button to be disabled too when the submit goes on?

Try this.
<form id="myForm" method="post" class="std" enctype="multipart/form-data">
<button type="submit" id="submitBtn" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
$('#myForm').submit(function(e){
$("#circlecontainer").addClass('whatever');
$("#submitBtn").prop('disabled', true).html('Please Wait...');
});

Reason 1. you will need e.preventDefault(), otherwise submit the form will refresh the whole page
Reason 2. Since reason 1, You will need to use ajax to post the form data instead of using default form event, please refer to this question for how to set it up in your submit function jQuery AJAX submit form
<script type="text/javascript">
$( "#circlecontainer" ).removeClass('whatever')
var frm = $('.std');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: //'your post url',
data: frm.serialize(),
success: function (data) {
$("#circlecontainer").addClass('whatever');
}
});
ev.preventDefault();
});
</script>

Simple add a listener to your button and change the class attribute
var divClassChanger=function()
{
var div=document.getElementByID("circlecontainer");
div.setAttribute("class", "someotherclass");
document.getElementById("yourBtnId").disabled = true;
};
document.getElementById("yourBtnId").addEventListener("click",divClassChanger);
you only need a id in you button

You really need to consider using Ajax request as this will definitely solve your problem. As you have it
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
AJAX Request Script
$('form').on("submit", function(e) {
e.preventDefault();
var $form = $(this), url = $form.attr('action');//url could be your PHP script
var posting = $.post(url, {$('yourinputs').val()});
posting.done(function(data){
$('.circlecontainer').removeClass('yourclass');
});
});
This should work.

Javascript: avoiding window to reload

I have this form, that is never submitted: it just triggers a calcularplazas() function when pressing a non-submit button:
<form name="what" id="what" action="">
<input id="mat" type="text"/>
<button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
<input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
<p id="resultado"></p>
</form>
When clicking on the button, function works properly but no result can be shown, as the window reloads. I do not understand this behaviour as there's nothing on the function making it reload, neither is a form submitting.
As consequence of this, the result text is exported to <p id="resultado"></p> but on miliseconds dissapears, as window reloads.
Why this behaviour?
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
}

You say "non-submit" button, but since you haven't given your <button> element a type attribute, it is a submit button by default. You need to tell the browser to treat it as a "normal" button:
<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
Clicking this will now not submit the form, and not cause the page to reload.

You can prevent submit event to be dispatched.
myForm.addEventListener('submit', function(e) {
e.preventDefault();
calcularplazas();
// do anything else you want
})
And HTML
<form id="myForm">
<input id="input1" type="text"/>
<button type="submit" id="myButton">SEND</button>
</form>
It will works for Return key to do as well

The button in the form, have you tried giving it type="button" ?
Because in a form it gets type="submit" by default (or the form behaves like it would with a submit type).

You Need to make only 2 changes and the code will run .
Put return false in the javascript function.
when you call the function on onclick function write return calcularplazas.
check the below code for for your reference.
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
return false;
}
<button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>

ASP.NET MVC and Javascript - Submit button submitting form, onclick #URL.Action not firing

I have two submits, one to submit the form on page 1, the other to submit form on page 1 and redirect to form 2 on page 2.
<input type="submit" value="Submit and Add Expense" onclick="window.location.href='#Url.Action("Create", "Expense")';"/>
The issue is, when this secondary submit button is clicked it just submits the form just like the first submit button. It appears that the redirect #url.action is not firing. Thoughts?

The following code should do the trick.
<input type="submit" id="btnOne" value="One"/>
<input type="button" id="btnTwo" value="One"/>
<script>
var sample = sample || {};
sample.url = '#Url.Action("Create", "Expense")';
</script>
//you can move it to a separate file
<script>
$(function(){
$("#btnTwo").click(function(){
var form = $("form");
form.submit();
setTimeout(function() {
window.location.href = sample.url;
},100);
});
});
</script>

I wound up going the easy route of assigning value property to the button, and then checking the button value in the controller.
// View
<input type="submit" value="Submit" />
<button name="button" value="SubmitAndExpense">Submit and Add Expense</button>
// Controller
[HttpPost]
public ActionResult Create(string button)
{
if (button != "SubmitAndExpense") {...}
}