I have a simple function that intercepts a form submit event, displays a SweetAlert2 confirmation dialogue, and if the user confirms the form is submitted.
The function is something like this:
$(document).ready(function() {
$('form.require-confirmation').submit(event => window.swalConfirm(event));
});
window.swalConfirm = function(e)
{
e.preventDefault();
Swal.fire().then((result) => {
if (result.value) {
e.target.submit();
}
})
};
This works as expected… in most cases. When the form has multiple submit buttons – for example:
<button type="submit" name="action" value="add">Add</button>
<button type="submit" name="action" value="remove">Remove</button>
… the value of "action" is removed from the submitted form. Is there any way around this, like resuming the initial submit or something like that? Or is there no option but making the buttons change the value of a hidden input before submitting the form, for example?
You gave the solution yourself
<input type="hidden" name="action" value="" />
<button type="button" class="action" value="add">Add</button>
<button type="button" class="action" value="remove">Remove</button>
$(function() {
$('.action').on("click",function(e) {
const parent = this.form;
$("[name=action]").val(this.value);
Swal.fire().then((result) => {
if (result.value) {
parent.submit();
}
})
});
});
Related
I have three buttons in my form. I want to use JS to confirm when clicking the delete button. Upon confirm, the form should be submitted. How do i do that?
This is how far I got:
My form:
<form method="post" id="form1">
<button id="button1" name="action" type="submit" value="save"></button>
<button id="button2" name="action" type="submit" value="update"></button>
<button id="button3" name="action" type="submit" value="delete"></button>
</form>
and a JS (swal) script to confirm before submitting
<script>
var formname = "are you sure you want to proceed?";
document.querySelector("#button3").addEventListener('click', function(e) {
var form = this;
e.preventDefault();
swal({
title: "Delete?",
text: formname,
icon: "warning",
buttons: [
'Cancel',
'Yes'
],
dangerMode: true,
}).then(function(isConfirm) {
if (isConfirm) {
document.querySelector("#form1").submit();
}
});
});
The confirmation script runs fine, but upon clicking on yes the form is submitted without action=delete..
First try to put type="button" for 'delete'.
(Type Button won't submit form on its own. It is a simple button which is used to perform some operation by using javascript whereas Type Submit is a kind of button which by default submit the form whenever user clicks on submit button)
<button id="button3" name="action" type="button" click="deleteFormData()" value="delete"></button>
function deleteFormData(){
// write the delete action here
}
I created a Vue form where there are two buttons. In my formSubmit() function i need to somehow find which button was used to submit the form. Here is what i tried:
<form #submit.prevent="formSubmit()">
<input type="text" class="form-control" v-model="name">
<input type="text" class="form-control" v-model="product">
<button class="btn btn-primary" v-model="buttonType" value="button1">BUTTON1</button>
<button class="btn btn-primary" v-model="buttonType" value="button2">BUTTON2</button>
</form>
And my function:
formSubmit(){
console.log(this.buttonType)
}
But once i click the button, i always get an undefined. Is there any other way to get the button used to submit the form? Any advice is appreciated.
You shouldn't really use v-model on a <button> element.
You can register separate event handlers for each button and call submit your form at the event of the respective event handlers.
<form #submit.prevent="onFormSubmit">
<button #click="onClickButton1">Button 1</button>
<button #click="onClickButton2">Button 2</button>
</form>
{
// ...
methods: {
onFormSubmit() {},
onClickButton1() {
// code for when button 1 is pressed
this.onFormSubmit()
},
onClickButton2() {
// code for when button 2 is pressed
this.onFormSubmit()
},
},
}
Whenever i disable or hide submit button the form doesnt submit:
<form action="leads_add.php" method="post" name="leads_form" id="leads_form">
<input type="submit" name="saveforlaterbutton" value="Save for later" class=" btn btn-primary" id="saveforlaterbutton" >
<script>
$("#leads_form").submit(function(e) {
e.preventDefault();
$("#saveforlaterbutton").hide();
});
</script>
I also tried:
<input type="submit" name="saveforlaterbutton" value="Save for later" class=" btn btn-primary" id="saveforlaterbutton" onclick="this.disabled=true;return false;">
If i click the button, it disables/hides the button but then nothing happens;the form doesnt submit
You're canceling the submit action. Remove this line:
e.preventDefault();
If you want the form to submit you need to remove :
e.preventDefault();
This prevents the form from being submitted.
and also you need not put onclick="this.disabled=true;return false;".
The return false is not required.
If you really want you can do onclick="this.disabled=true;"
i removed but it didnt work
e.preventDefault();
This is what worked for me:
<script>
$(document).ready(function($) {
$('#leads_form').on('submit', function(evt) {
$('#saveforlaterbutton').hide();
});
});
</script>
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>
I have a form with multiple submit buttons, and I'd like to capture when any of them are pressed, and perform different JS code for each one.
<form id="my-form">
<input type="email" name="email" placeholder="(Your email)" />
<button type="submit" value="button-one">Go - One</button>
<button type="submit" value="button-two">Go - Two</button>
<button type="submit" value="button-three">Go - Three</button>
</form>
Looking at an older answer, I can process all of the submit buttons in JS:
function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
// You must return false to prevent the default form behavior
return false;
}
var form = document.getElementById('my-form');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
But how can I discriminate amongst the different submit buttons? Is there a way to get the value and perform logic from there?
I don't need to have three submit buttons, per se... I just need three different buttons in a form to perform three different actions.
Thanks!
you can attach a custom click handler to all buttons, and that way you can check which button is clicked before submitting the form:
Live Example
$("#my-form button").click(function(ev){
ev.preventDefault()// cancel form submission
if($(this).attr("value")=="button-one"){
//do button 1 thing
}
// $("#my-form").submit(); if you want to submit the form
});
use this
function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
var submit_type = document.getElementById('my-form').getAttribute("value");
if(submit_type=="button-one"){
}//and so on
// You must return false to prevent the default form behavior
return false;
}
HTML:
<form id = "form" onSubmit = {handleSubmit}>
<input type="email" name="email" placeholder="(Your email)" />
<button type="submit" value="button-one">Go - One</button>
<button type="submit" value="button-two">Go - Two</button>
<button type="submit" value="button-three">Go - Three</button>
</form>
JS:
const handleSubmit = e => {
e.preventDefault();
var ans = document.activeElement['value'];
console.log(ans);
};
You can also use the read-only submitter property of a SubmitEvent.
HTML (same as you have):
<form id="my-form">
<input type="email" name="email" placeholder="(Your email)" />
<button type="submit" value="button-one">Go - One</button>
<button type="submit" value="button-two">Go - Two</button>
<button type="submit" value="button-three">Go - Three</button>
</form>
JS:
let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);
function handleSubmit(event) {
event.preventDefault()
alert(event.submitter.value) // shows a different value depending on button pressed
From there on, it's easy to use submitter as a control flow, e.g.:
let form = document.getElementById("my-form");
form.addEventListener("submit", handleSubmit);
function handleSubmit(event) {
event.preventDefault()
submitter = event.submitter.value
switch (submitter) {
case "button-one":
alert(1)
break;
case "button-two":
alert(2)
break;
case "button-three":
alert(3)
break;
}
}
But how can I discriminate amongst the different submit buttons? Is there a way to get the value and perform logic from there?
Yes, you can use querySelector to grab elements with attributes.
document.querySelector('#my-form button[value="button-one"]' )