JavaScript work before submitting ASP.NET MVC form - javascript

I have an ASP.NET MVC view with a Beginform, that specifies an action and controller to hit on submit. But on submit I want to call a service using jQuery to get some data and then submit those data with the form.
Currently I have a submit button on the form where the onclick event of the button calls the JavaScript method. Depending of what result I get from the method I want the form to be submitted to the specified action.
Now I can't get this to work. Is it the right way to do this or should I instead make a post using jQuery? I think it would be nice to use what I have already specified as action/controller in the form.

I think the best way is to use event 'submit' on form, because users can want to submit form by pressing Enter in some fields. Guess, it is possible to change some input values during this event,
jQuery('form#myform').submit(function(e){
//....
if (somevar == false)
{
// stop submitting form
e.preventDefault();
}
else
{
jQuery('input#hiddeninput').val('somevalue');
}
})

The solution is add on submit event to form tag
onsubmit="return onSubmitClick(this);"
function onSubmitClick(item) {
console.log(item);
return false;
}
it's work well. GL ! HF !

I think it would be better to perform the task of querying an external web service in a controller action. This way you would always submit the form to the same controller action which will query the service and based on the results would either render a view or redirect to some other action.

Related

Force Client Side Model Validation MVC 4 (Issue) on type="Button" [duplicate]

I have a form and unobtrusive validations are enabled. By default in submit method client side validation gets triggered and (if you have any errors) the form looks like this:
The validation happens even before any data gets sent to the server.
Now this behavior doesn't work if you want to use $.ajax method. Client side validation doesn't work. You have to manually check all the fields in your javascript, losing all the beauty of DataAnnotations.
Is there any better solution? I could've use jquery's submit() but I guess it doesn't have callback like $.ajax.
Oh...
if (form.valid()) // do submit
You must force the form to validate before checking if it is valid. Something like this:
var form = $( "#myform" );
form.validate();
if (form.valid()) {
// ...
}
I did...
$("#form-submit-button").click(function (e) {
e.preventDefault(); // Stops the form automatically submitting
if ($("#my-form").valid()) {
$("#my-form").submit();
}
});
This also seems to be a good solution if you have say textboxes with a plugin to make those textboxes into a calendar control. Only reason I say this is because I used Zebra Datepicker with an MVC form and it would submit an invalid form if focus was on the calendar date picker. Using the below code stops this.
I was having the same issue Yablargo was having in that it was saying that valid is not a function, so I came up with this:
For the onclick handler of the submit button, I put this:
onclick="return $(this).closest('form').checkValidity();"

Yii and Javascript form submission

I'm using Yii as a PHP framework for my site. Additionally, my site uses some js/jquery like, say, a jQuery UI Dialog widget (except for those dialogs, the rest of the code is pure normal html form components and jQuery code for the event handlers).
In the Yii side, I use CForms to build my forms from specifications file.
When I test if the form was submitted, I must do it for a certain button. This is not only forced, but I also take advantage of it.
if ($myCFormInstance->submitted('approve')) {
//process approval code
} else if ($myCFormInstance->submitted('reject')) {
//process rejection code
}
The actual problem I have is a bit conceptual one, since -fortunately- I know what's going on with my code and -again, fortunately- know the problem root:
Somewhere in My code I intercept the submit button's click event:
$(function(){
$(".critical-action").click(function(e){
var form = $(this).closest("form");
e.preventDefault();
e.stopImmediatePropagation();
confirmDialog("¿Continuar?", "#critical-action-dialog", function(){
form.submit();
});
});
});
Say the .critical-action classed elements are always a submit button in a form.
The intention of the code: cancel the form submission, and perform it only if the user -in the dialog- clicks the "Yes, Continue" (i.e. confirming the action) button.
This code works as expected, and have no problems at a javascript level BUT -and here goes my issue- when doing form.submit(), the button is not sent as part of the form. This is obvious: I'm sending the form without specifying any button. In the case of Approve and Reject, which have two buttons, the example explains itself: if the form.submit() call could send their buttons ¿which of them should send?.
Question: So, since form.submit() doesn't send any button, but I actually need buttons ¿how can I send the form "with the corresponding button" -i.e. a button I choose to specify, which should correspond to this in the click handler function context- automatically via javascript? The button NEEDS to be identified by Yii in order to process the form (specially with the Approve and Reject case).
If you added a hidden input to the form, you can modify the input value with jQuery before you submit the form, like this:
$("#inputID").val('approve');
If you want to set the value to the value of the clicked button via $(this).val(), be aware of the issue that could result in an IE browser, explain here. The second answer (by postpostmodern) has a solution to this issue.

Preventing multiple form submits

I am submitting a form using JQuery and an event listener bound to a div (not an input field) and I am trying to prevent multiple submits, so the customer does not get overcharged. I am trying to accomplish this by removing the submit-button class of the clicked div, so the next time the user clicks it, JQuery won't listen to the event that is associated with the submit-button preventing multiple submits.
Using the implementation below however, for some reason, does not prevent multiple submits, as intended.
HTML
<div class="submit-button button-style">Submit</div>
JQuery
$(".submit-button").click(function(){
$(this).removeClass("submit-button");
//**submit form**
});
NOTE: I must stick to a solution that uses the html above, so solutions using an input element of type submit, will not be useful.
I appreciate any suggestions on how to make this work. Many thanks in advance!
You can make use of .one() to prevent it from firing multiple times -
$(".submit-button").one('click',function(){
//**submit form**
});
http://api.jquery.com/one/
Edit :
In case of error :
function submitForm(){
//**submit form**
$.post('submit.php').error(function(){
// rebind event on error
$(".submit-button").one('click',submitForm);
});
}
$(".submit-button").one('click',submitForm);
You could use something like:
$('something').one('click', function(){
// submit code
});
Which will only fire once.
A significant portion of users don't bother clicking the submit button to submit a form - there's other more convenient ways, like hitting the enter key when the cursor focus is on a form field.
A more robust approach is to block the form via the forms submit event, and maintain a variable to keep track of the form submission state.
var submitted = false;
$("form#myForm").submit(function(evt){
if (submitted) {
evt.preventDefault();//stops form submission
return;
}
submitted = true;
});
I omitted form validation for this example.

Disable action in form when using AJAX commands?

When one uses AJAX commands with Jquery, is it necessary to disable form action parameter in the HTML? The load URL and the action point to the same place, so is it necessary to have the action parameter?
You should use the event object's preventDefault() method, which will disable any default behavior associated with the element type. This is very important for links and form submit buttons.
For example:
<!-- you have this link -->
<a id="clickme" href="test.html">Click me</a>
You can disable the loading of test.html by using preventDefault()
$('#clickme').click(function(event) {
event.preventDefault();
// ...
});
You can also return false in your click function for the same effect.
In this case I think is useful only for clarity of code. When you put your code to make the AJAX call you can get the url from the form's action but that depends on you.
Try to be clear and consistent it's my advice.
If you are submitting the form via Ajax, then you just need to make sure there is not a way for the form to be submitted traditionally. You can either remove the form tags themselves, remove the actions, or remove any submit buttons. You can also capture the submit event of the form and just return false to prevent the form from doing a postback submit.

How to write "on form submit complete" using javascript?

I have a form loading inside my page and there is a button out side this form its function is to submit this form.
$('#MyForm').submit();
I want a way to write a submit complete function, means to know that the form successfully/completely submitted.
I tried the jquery form plugin, but didn't work, i think because the submit come from a button outside the form.
anyone knows any different ways?
Actually, you can use the jquery form plugin, just use the ajaxSubmit() method.
Documentation for the jQuery form plugin.
// setup the form, and handle the success
$('#myFormId').ajaxForm({
success: function() {
// do what you are looking to do on
// success HERE
}
});
// setup submission on some random button
$('#someButton').click(function() {
// submit the form from a button
$('#myFormId').ajaxSubmit();
});

Categories