I need to confirm delete before submit form using javascript, i tried this code but it didnt work :
Delete
You should confirm first before submitting the form. And you need to set a condition whether it returned true or false
Delete
Submit form only when user confirm it otherwise set return false. So your form will not be submitted.
function confirmdelete() {
if (confirm("Are you sure?")) {
// submit form
}
return false;
}
Please check the comments against the code.
$(function () {
//Attach click event to the link. In this case all links
//You might want to update this, make it more specific by using id or name or class of the a tag
$('a').on('click', function (event) {
//prevent the default action of the tag
event.preventDefault();
//confirm
var conf = confirm('Confirm Delete');
if (conf) {
//you action if true
}
else {
return;
}
});
});
Related
For the dear life of me I cannot figure out how to the prevent the Woocommerce order submit process to allow a card token to be added as hidden input before the form is submitted to be able to post it to order received. The standard e.preventDefault(); does not work here.
var form = jQuery("#form-checkout");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Add token to the form
var tokenInput = document.createElement("input");
tokenInput.setAttribute("name", "token");
tokenInput.setAttribute("type", "hidden");
tokenInput.setAttribute("value", "test");
form.appendChild(tokenInput);
});
Code that gets close:
var form = jQuery("#form-checkout");
form.on('checkout_place_order', function() {
// Add token to the form
var tokenInput = document.createElement("input");
tokenInput.setAttribute("name", "token");
tokenInput.setAttribute("type", "hidden");
tokenInput.setAttribute("id", "token");
tokenInput.setAttribute("value", "test");
form.appendChild(tokenInput);
if(jQuery("#token").length > 0) {
return true;
} else {
return false;
}
});
When returned false, submit is prevented and the field gets added. When returned true, field also gets added but nothing gets posted. This is probably because the field is added after submit but before the ajax call.
The only way I can think of is to first add the field -> return false -> then excute the function again with true. But ofcourse after false nothing runs. What would be a way to approach this? (any help is appreciated)
I have a contact form.
Now when I need to delete a record, I need a confirmation box to ask for user's confirmation. I've achieved this, so far so good. But the record gets deleted for both OK and Cancel buttons.
My code is as follows:
<td>Edit / Delete </td>
<script>
function check(){
if(confirm("Are you sure you want to delete?")){
window.location.href = "delete.php?id=<?php echo $row["first_name"]; ?>";
return true;
}
else{
header("Location: http://localhost/test/display.php?show_details=Show+Details");
return false;
}
}
</script>
What could I do to delete the records only after clicking OK button in the confirmation box and return to display.php(same page) on clicking Cancel?
It should navigate to delete.php only on clicking OK and stay in display.php on clicking Cancel.
I'm new to PHP.. Help please...
An HTML anchor has a default action for clicks on it: open a link. Now if you add another click handler in JavaScript, you will have to prevent the default action for that element and thus prevent the link from being opened.
To prevent the default event action from within an inline event handler (one that is setup using the attribute onclick in contrast to use addEventListener() in JS) you must return false in that event handler.
See also: How to prevent default event handling in an onclick method?
The following two snippets fix that issue and are also re-using the href-attribute, so it must not be hardcoded in JS again.
variant 1:
<p>
Edit
/
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
/* Return FALSE to prevent the default link action */
return false;
}
</script>
variant 2:
<p>
Edit
/
<!-- Return FALSE to prevent the default link action -->
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
variant 3A:
Not returning false, but using event.preventDefault(). (Inspired by the comment of #ths)
<p>
Edit
/
Delete
</p>
<script>
function check(event, anchor) {
/* Prevent the default link action */
event.preventDefault();
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
variant 3B:
Not returning false, but using event.preventDefault(). (Inspired by the comment of #ths)
<p>
Edit
/
Delete
</p>
<script>
function check(anchor) {
/* Only open the delete-link, if the confirm returns TRUE */
if (confirm('Are you sure you want to delete?')) {
window.location.href = anchor.href;
}
}
</script>
I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.
This causes the hidden loading image to show even though the form is no being submitted.
Here is a fiddle with the loader and script
http://jsfiddle.net/mikeef74/gzSDH/16/
var submit_hit = false;
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
if (submit_hit) {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
$('body').css("background-image", "url(images/previewbg7.jpg)");
$('body').css("overflow-y", "auto");
}
}
});
$("#form_710370").validate();
$('#form_710370').submit(function (e) {
$('#loader1').show();
submit_hit = true;
return true;
});
});
The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.
Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.
$("#form_710370").validate({
submitHandler: function(form) {
$("#loader1").show();
submit_hit = true;
form.submit();
}
});
// remove this
//$('#form_710370').submit(function (e) { ... }
http://jqueryvalidation.org/documentation/
This is way validate a form in jquery:
$(function() {
$("#form_710370").validate({
rules: {
//
},
messages: {
//
},
submitHandler: function(form) {
form.submit();
}
});
});
I have a link with id="something":
html
<a id="something" onclick="getReturnValue()"> Something </a>
javascript
function getReturnValue(){
//some validation
if(validation fails){
return false;
}else{
return true;
}
}
I need to get the return value when I use:
$("#something").click();
How can I get the return value for the event ?
Already onclick function is mentioned in the html tag. I wanted to use:
$("#something").click();
and from that I wanted to get return value.
As I have to use it in multiple place, I dont want to write getReturnValue() method again and again like:
click(function(){ getReturnValue() })
I need to do this
if($("#something").click() == true){
form.submit();
}
click() will call getReturnValue() which will do some validation. If the validation fails, it return false and I need not submit the form. If validation is true, I need to submit the form
To do some form validation, you can do something like that:
$('#myForm').submit(function(e) {
if () {//Validation rules failed
e.preventDefault(); //Prevent browsers from submitting
}
//Form is valid do nothing and let the form submit
});
Now on your button:
$("#something").click(function() {$('#myForm').submit();//Calls function from above});
What you can do is create a jQuery event object and pass that to the click handler.
var e = jQuery.Event('click');
$('#something').click(e)
if (e.validResult) {
//action
}
You'll have to modify the click handler somewhat to take an event object and set a validResult property if the validation is successful.
function getReturnValue(e) {
//some validation
if (valid) {
e.validResult= true;
}
}
Here is an example on how you can access return data from event handler.
var a;
$(document).on('a', function(e){
$(document).trigger(a = $.Event('sum', {datas: e.datas}));
});
$(document).on('sum', function(e){
return e.datas;
});
$(document).trigger($.Event('a', {datas: [1,2,3]}));
console.log(a.result);//[1,2,3]
You change it with your purpose. check here https://api.jquery.com/event.result/ for more details.
$("#something").click(function() {
var x = getReturnValue();
});
this is what you want?
LE: and this means your a changes to
<a id="something"> Something </a>
you're trying to run two different functions on a click event,
maybe you need remove the inline code (onclick="func()") and put this in your script
$("#something").click(
function(){
var returnValue = getReturnValue();
}
);
I don't really understand your question though...
I have a form with two submit buttons on it. Buttons must be of submit type and I can't change it.
How can I make jquery not to validate but submit the form when first button is pressed and validate and submit when second button is pressed?
thank you
Ok, I found a solution which is ridiculously easy as usual, the only thing I need to do is to set class="cancel" to the first button and it'll skip validation on submit.
Found here http://forum.jquery.com/topic/stop-a-specific-button-calling-validation
event.originalEvent.explicitOriginalTarget is a Gecko-specific property (see this question and answer).
The following should work:
var doValidate;
$('#validating-button').click(function () { doValidate = true; });
$('#non-validating-button').click(function () { doValidate = false; });
$('#form').validate({
rules: {
myinputname: {
required: function () { return doValidate; }
}
}
});
EDIT: check questioneer's answer :)
First btn clicked, do validation stuff and check validation (just try it/improve it)... Second Btn clicked, just do nothing (submit form)
$('#formid').submit(function(event) {
if (event.originalEvent.explicitOriginalTarget.id == "firstButtonID") {
$(this).validate();
if(!$(this).valid()){
event.preventDefault();
return false;
}
}
});