after clicking anchor jquery validate not working ( Spring MVC + JQuery) - javascript

We are developing a project using spring + hibe and jquery which do some form validation and text changing stuff. spring + hibe is working fine. but jquery doesnt. Here goes the scenario:
login.jsp
<form:form action="/login" method="post" id="registerForm" modelAttribute="formbean" data-ajax="false">
...
//some input fields
...
register
...
//some buttons
...
</form:form>
register.jsp
<form:form action="/reg" method="post" id="registerForm" modelAttribute="formbean" data-ajax="false">
...
//some input fields and buttons
...
</form:form>
in the login page ive got an anchor which will go to the register page.
if i call the two pages using spring mapping pattern /login... or /reg... seperately the jquery validation works pretty well.(validate if the fields are empty or invalid input and so on...).
BUT if i go to the register page by means of clicking the anchor, the validation will not be executed in the register.jsp. And basicly it submits the form to the server.
I suppose it has something to do with the jquery or ajax. Spring on the otherside should be no problem.
Could someone please tell why the jquery validate plugin doesnt work after the anchor being clicked and help me find the solution. I would really appreciate it.
btw the file i used included for both jsp pages are:
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js"></script>
<script src="scripts/jquery.validate.js"></script>

I recommended you choose between jquery validation or spring form validation ,combination of them is not good point! however spring tag will execute validation before jquery .
you can use simple
#RequestParam ("param1") String param1
In controller instead of use modelAttribute and command,and use plain html form and rely on jquery validation.

Related

Submiting a form using JavaScript in Django is not working

I try to submit a form by Javascript in Django.
The form is working
The Javascript is working
The submit() function is not working.
My testing HTML code:
<form method="post" id='testForm' action="www.google.com">
{% csrf_token %}
<a onclick="onDeleteButtonClick()" href="">Delete</a>
<input type="submit" value="Submit">
</form>
My testing Javascript code:
<script type="text/javascript">
function onDeleteButtonClick(){
console.log("before");
document.getElementById("testForm").submit();
console.log("after");
}
</script>
3 Results:
This part of the web page looks like this:
web page pic
Really simple
A When I click the Submit button:
It is working, the form is been submit.
B When I click the delete link:
It is not working.
The log in Javascript works, I can see "before" and "after" in the console.
C I also test this on a normal web page (without Django framework), the Submit button, and the Delete link is all working.
So I think it must be something related to Django.
If anyone knows why this happened, please let me know~ Thank you!

Redirecting form submission to URL after sending the details to database

I am working on a popup newsletter signup. I already have the similar signup form in another page. I used the exact code and it works great. Once I submit the form, two actions has to happen.
Sending the form details to database
Redirecting to thank you page.
With the existing code(this is from a ecommerce website, I cannot manipulate the code), I can send the details to database - perfectly works fine, but
it is not redirecting to Thank You page, instead redirecting to the page hardcoded in the database(assigned to "action". Is there a way out?
This is the code.
<form name="MailingList" method="post" action="http://www.mywebsite.com/MailingList_subscribe.asp">
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28"> <br>
<input type="submit" name="Submit" value="Submit" width="260px">
</form>
Instead of this - http://www.mywebsite.com/MailingList_subscribe.asp, I would like to redirect to "www.mywebsite/thankyou.html" . If I assign www.mywebsite.com/ThankYou.html to "action" , then the form is getting redirected to Thank you page, but not sending the information to the database. I have to use HTML, I cannot call from outside file. I guess I need to use PHP, but I am unclear with the code.
Sorry my mind is all over the place, I guess I explained it clearly. Apologies if my question is unclear. Thanks
Give id to your form like formId and you can do this using jQuery,
Download the jQuery latest version from JQuery repo and then place the jquery.min.js file in your resources folder.
Updated
<script src="yourResourcesFolderPath/jquery.min.js"></script>
// above code will use the jQuery plugin online
// chances are that the file path might be wrong according to where you put the js file
// A simple way to try this is put your file in the same folder of your html file and then change above code to
// <script src="jquery.min.js"></script> change file name according to downloaded file name.
<script>
$(document).ready(function(){ // will run the below code after all html loaded
$('#formId').submit(function(){ // will be called upon form submission
$.ajax({
type: "POST",
url: "http://www.mywebsite.com/MailingList_subscribe.asp",
context: document.body
}).success(function() {
// this will be called when you return from your server submit code
location.href = "www.mywebsite.com/ThankYou.html";
});
});
)};
</script>

How to submit AJAX form in grails w/out using a submit button

I have this g:formRemote which submits a form using ajax.
<g:formRemote name="listAll" update="menuItemAJAX" url="[controller: 'superWaiter', action:'menuItem']" onSuccess="additionalContent()">
All
</g:formRemote>
I dont want to use a button since it is easier to style links. It does not work with
<script type="text/javascript">
function myFunction(){
$('#listAll').submit();
};
</script>
Btw, the id of the form is listAll since it gets it from the name attr
Here's a link to a blog post I wrote a couple years ago that contains a sample of each of the Grails Ajax invocations you can make and here's the link to the code on GitHub. There is also an updated version written for Grails 2.x.

Spring submit has double parameter

I am new to spring web applications. When I submit a form, the request mapping is getting a "dual" parameter.
My form is set as:
<form action="" method="post" name="myform">
......
</form>
I use a javascript to submit the form, for example, when I submit the form for going to various pages, my javascript is like this:
function gotoPage(pageNumber)
{
document.forms['myform'].action="trx?page=" + pageNumber;
document.forms['myform'].submit();
}
So when I have a link like this on my jsp page,
Page number: 3
On my controller for the request mapping for /trx, I should be getting parameter page as value "3", but I am getting value as "3,3".
Any ideas why? I noticed only on the page parameter, If I use parameters like action=search or action=sort. It all works out fine.
Dumb question. :)
Had a <select name="page"> in the form.

ASP.Net MVC, Submit a form using javascript

I have a form on one of my ASP.Net MVC views that I created using the following code
<% using (Html.BeginForm(null, null, FormMethod.Post))
Using this code I have no control as far as I am aware of setting the name of the form. I'm now trying to write a javascript function to submit the form, is this possible without knowing the forms name?
Thanks
You can use jquery to submit the form:
<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm"})) { %>
(the last part is for htmlAttributes parameter)
just do this:
$("#myForm").submit();
and do not forget to include jquery-1.2.6.js that comes with mvc (or use a higher version).
If you want to use jQuery without naming the form, and you will only have one form on the page, you can just add a link like this to your page:
Submit
And then add this jQuery which will wire up the link to submit every form:
$(document).ready(function () {
$("a.submitForm").click(function () {
$("form").submit();
});
});
So this is a way of doing it (the way I just did it on my site) that doesn't require you to name the form - provided you only have one. Saying that, you may want to submit multiple forms ..
If you have only one form on that page, you can access the form by using:
document.forms[0].
So you could add a link:
submit form
If you need to set name of the form, use object htmlAttributes parameter of BeginForm method.
<% using
(Html.BeginForm(null, null, FormMethod.Post,
new {name="MySuperForm"})) %>
For submitting forms through javascript, check out this post. Might be useful.
This simple solution submit the Ajax form without post-back
Generate
<input id="sbmt" type="submit" style="visibility: hidden" />
Works in IE and Firefox.

Categories