ASP.Net MVC, Submit a form using javascript - 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.

Related

Liferay portlet: redirect to a new jsp with a js parameter

I'm working on a liferay portlet.
What I want to do is opening a new jsp with sending to it a URL parameter coming from javascript variable. I thought about it and I found two ideas:
1)Send the js variable to the jsp using ajax and then create a render url in jsp with a parameter the value received from js. But how I send js variable to jsp I don't find a good example in the internet.
2)Build the render url in javascript using the received parameter and then redirect from the script itself to the new jsp file using the render url that I found. For this idea I posted this question Liferay portlet: redirect to an other jsp page from javascript but I didn't get solution for it yet.
Has someone a suggestion how I can achieve what I want using one of my ideas or may be an other idea?
I found finally a solution for this problem.
I added in the jsp page a hidden post form that contains just one input and posts to an action method like that:
<portlet:actionURL var="jsVarActionURL" name="jsVarAction"/>
<form:form name="JsVarModel" method="post" modelAttribute="JsVarModel" action="<%=jsVarActionURL.toString() %>">
<form:input id="jsVar" type="text" path="receivedMessage" style="display:none;"/>
<input id="submit" type="submit" value="Add" style="display:none;"></input>
</form:form>
So my want was to for certain condition in javascript I have to send a js variable to new jsp page and open it. So in the script when the condition is valid I set to the input #jsVar the javascript value and I make a virtual click button in the submit button with trigger function of jquery like that:
var jsToJsp="Hello jsp I'm a js variable"
if(/*condition*/)
{
$("#jsVar").val(jsToJsp);
$("#submit").trigger("click");
}
In the controller the action method will receive the value coming from the form input field then it will redirect it to a render method:
#RenderMapping(params={"action=displayPageRender"})
public ModelAndView openUserProfilPage(RenderRequest request,RenderResponse response,Model model)
{
ModelAndView modelAndView= new ModelAndView("display");
modelAndView.addObject("jsVar", request.getParameter("jsVar"));
return modelAndView;
}
#ActionMapping(value = "jsVarAction")
public void sessionKeyActionMethod(#ModelAttribute("JsVarModel")ActionReceiveModel jsVar,ActionRequest actionRequest, ActionResponse actionResponse,Model model)
{
actionResponse.setRenderParameter("jsVar", jsVar.getMessage());
actionResponse.setRenderParameter("action", "displayPageRender");
}
Then I can receive it in display.jsp with ${jsVar} and everything works fine.

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

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.

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.

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

How to pass variables from javascript to form?

In my application I get json with place details from google maps API using autocomplete
var place = autocomplete.getPlace();
I can get a name of the place with place.name
On the same page I have a form where I get another details from user. The question is how do I pass the place.name to my rails controller when the form gets submitted? In js I tried to change HTML of the form
<form...>
<div id="hidden_fields"></div>
</form>
using
$("#hidden_fields").append("<input name='name' type='hidden' value='"+place.name+"' />");
But apparently it doesn't works.
Should I learn AJAX to do such things or there another ways?
Thanks in advance for any hint.
Please ensure you are creating the hidden fields after the autocomplete finished. check the viewsource if the hidden variables has appended before submitting. As long as the control available with in the form tag before submit, your controller able to get it.
Thank you all! The problem has been solved. The important things I learned were
View/Source doesn't show dynamically added content, but Firebug does.
Rails modify forms field names: It turns
<%=form_for #place do |f| ...
<%= f.password_field :password , :class =>"form-field", :id =>"passwordField"
into
<input class="form-field" id="passwordField" name="place[password]" type="password" />
which means that I have to pass values from js in the same manner:
$text.append('<input name="place[name]" type="hidden" value="'+place.name+'"/>');
Hope it will help to someone else.

Categories