I've made a form using semantic UI. The form validation works perfectly. But the onSuccess event isn't getting triggered when I click the submit button.
formValidationRules = {
//some rules
}
var formSettings = {
on: 'blur',
inline: true,
onSuccess : function() {
alert("success");
return true;
}
};
$(document).ready(function() {
$('.ui.form').form(formValidationRules, formSettings);
});
This is the example I find on all web searches. Any ideas?
The full form code is here.
As far as I know, you have to include all the settings in the same object, at least that's the way I do it. Try combining formValidationRules and formSettings.
Related
Please check my work on plunker http://plnkr.co/edit/Jb43KPTXwF6zISS8PkaF?p=preview
Here I have two buttons save and modify. When I use save(type submit) button the form is validating before calling the function. Now I want to implement the same validation for modify(type button) button. So that when I click on it form should validate before calling the modify function.
Or if you have other solutions also i will take it forward for implementation but remember i need validation with multiple button on same form
Thanks in advance...
You could move scope.Modify() into the directive. I think it's more semantic that way anyway. Then just return false so the form doesn't actually submit and run whatever submitting logic you want in there.
Plunker
scope.submit = function (event) {
submitController.setAttempted();
if (!scope.$$phase) scope.$apply();
if (!formController.$valid) return false;
scope.$apply(function() {
fn(scope, {$event:event});
});
}
formElement.bind('submit', scope.submit);
scope.Modify = function () {
// process scope.session
scope.submit();
alert('Modified!');
return false;
};
I have a form. When I click Refresh in browser, form options stay cached in IE. How can I programmatically force page reload with JS or JQ?
Plain javascript:
form.reset();
You can access your form like this
var form = document.forms["your_form_name"];
To perform this on every page reload wrap it in onload event handler, like this:
jQuery (the easiest one)
$(document).ready(function() {
document.forms["your_form_name"].reset();
});
or plain javascript
var form = document.forms["your_form_name"];
var handler = function () {
form.reset();
};
if (form.addEventListener) {
form.addEventListener("load", handler, false);
} else if (form.attachEvent) {
form.attachEvent("onload", handler);
} else {
form["onload"] = handler;
}
or
<body onload="document.forms['your_form_name'].reset();">
(...)
Ideally, you'd use form.reset() as suggested in this answer
with jQuery:
$('form')[0].reset();
Or without jQuery:
document.forms[0].reset();
Having said that, if those values that you see are being prefilled by the browser as part of it's autocomplete feature, you can disable it by using the techniques suggested in this answer:
Form level:
$('form').attr( "autocomplete", "off" );
Individual element level:
$('inputSelector').attr( "autocomplete", "off" );
You can use JS to do this: window.location.reload()
I have two forms on our site #footer_leads and #footer_leads2 and i have a live submit event but need to verify a few things before the form gets summitted so i have this code
$('#footer_leads2, #footer_leads').live('submit', function(e){
e.preventDefault();
console.log('again');
var form = $(this); //save reference to form
if(somevalidation){
form.die();
form.submit(); //submit form
}
I assumed the jQuery die event would do the trick like in the above example but the page just into an infinite loop and crashes my browser....any ideas on how to do this
From the jQuery die() page:
Note: In order for .die() to function correctly, the selector used
with it must match exactly the selector initially used with .live().
Try $('#footer_leads2, #footer_leads').die() instead.
You shouldn't need to remove the handler and resubmit. Just wait on the preventDefault() until you know whether or not the form passed validation:
$('#footer_leads2, #footer_leads').live('submit', function(e) {
if (!somevalidation)
e.preventDefault();
// Else, the form will continue submitting unimpeded.
});
Are you want to disable the form after the submit?
if yes, try this:
$('input[type=submit]', this).attr('disabled', 'disabled');
I hope its help,
Don't unbind/die.
Just submit the form with the native method.
$('#footer_leads2, #footer_leads').live('submit', function() {
if (true /* validation succeeded */ ) {
this.submit(); //submit form, but don't use jQuery's method
} else {
return false;
}
});
UPDATE:
Since it sounds like you're making an AJAX call for the validation, you could just do the this.submit() in the success: callback.
$('#footer_leads2, #footer_leads').live('submit', function() {
$.ajax({
url: 'some/path',
context: this, // set the context of the callbacks to the element
...
success: function( d ) {
if( d.is_valid ) {
this.submit();
} else {
// give some feedback to the user for validation failure
}
}
});
return false; // block the submit by default
});
From the docs ( http://api.jquery.com/die/ ) :
Note: In order for .die() to function correctly, the selector used
with it must match exactly the selector initially used with .live().
You need to use .unbind('submit')
I have this little piece of code:
<script>
$(window).bind('beforeunload', function() {
$.ajax({
async: false,
type: 'POST',
url: '/something'
});
});
</script>
I wonder, how could I disable this request when user hits the submit button.
Basically something like here, on SO. When your asking a question and decide to close the page, you get a warning window, but that doesn't happen when you're submitting the form.
Call unbind using the beforeunload event handler:
$('form#someForm').submit(function() {
$(window).unbind('beforeunload');
});
To prevent the form from being submitted, add the following line:
return false;
Use
$('form').submit(function () {
window.onbeforeunload = null;
});
Make sure you have this before you main submit function! (if any)
This is what we use:
On the document ready we call the beforeunload function.
$(document).ready(function(){
$(window).bind("beforeunload", function(){ return(false); });
});
Before any submit or location.reload we unbind the variable.
$(window).unbind('beforeunload');
formXXX.submit();
$(window).unbind("beforeunload");
location.reload(true);
Looking for Detect onbeforeunload for ASP.NET web application well I was,
I've to show warning message if some input control changes on the page using ASP.NET with Master Page and Content Pages. I'm using 3 content placeholders on the master page and the last one is after the form
<form runat="server" id="myForm">
so after the form closing tag and before the body closing tag used this script
<script>
var warnMessage = "Save your unsaved changes before leaving this page!";
$("input").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$("select").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$(function () {
$('button[type=submit]').click(function (e) {
window.onbeforeunload = null;
});
});
</script>
beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively
so I got it working like this bind and unbind didn't work out for me also With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
if you're using bind then use this:
$('form').submit(function () {
$(window).unbind('beforeunload');
});
This will be good for all form submit.
Super old question but might be useful to others.
Simply detaching the "beforeunload" from the "submit" event would not work for me - because the submit handler was being called even when there were errors in the form that the user had to fix. So if a user attempted to submit the form, then received the errors, then clicked to another page, they would be able to leave without the warning.
Here's my workaround that seems to work pretty well.
(function($) {
var attached = false,
allowed = false;
// catch any input field change events bubbling up from the form
$("form").on("change", function () {
// attach the listener once
if (!attached) {
$("body").on("click", function (e) {
// check that the click came from inside the form
// if it did - set flag to allow leaving the page
// otherwise - hit them with the warning
allowed = $(e.target).parents("form").length != 0;
});
window.addEventListener('beforeunload', function (event) {
// only allow if submit was called
if (!allowed) {
event.preventDefault();
event.returnValue = 'You have unsaved changes.';
}
});
}
attached = true;
});
}(jQuery));
This way, if the click to leave the page originated from inside the form (like the submit button) - it will not display the warning. If the click to leave the page originated from outside of the form, then it will warn the user.
i load a form into a jquery ui dialog. i have a submit button (inside my form - NOT the actual dialog buttons) that calls a controller action but i can't figure out how to close the dialog after the submit is called as i dont have any event handler that i am attaching.
is there anyway of doing this besides changing the submit to input type=button?
i know in jquery i can capture the submit
$('#positionForm').submit(function () {
// do stuff
return true;
});
but this seems to fire before submitting so i dont want to close the dialog yet.
is there anything wrong with the below code:
$('#positionForm').live('submit', function () {
$.post('/MyController/Action', $("#positionForm").serialize(), function (data) {
alert(data);
}, "html");
closeModalPopup();
return false ;
});
For updated question: You can call the close code in the success callback, like this:
$('#positionForm').live('submit', function () {
$.post('/MyController/Action', $(this).serialize(), function(data) {
$('#positionForm').closest(".ui-dialog-content").dialog("close");
}, "html");
return false;
});
Original Answer: You can attach a form submit handler, for example:
$("#myform").submit(function() {
$(this).closest(".ui-dialog-content").dialog("close");
});
You can give it a try here.
You can also do it using $("#name_of_the_dialog").dialog("close");
It's more natural than using $closest