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
}
Related
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()
},
},
}
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();
}
})
});
});
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 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") {...}
}