Javascript submitting all the forms on a page - javascript

I'm using jsf 1.2. When a particular jsp has more than one form with a specified id, for example when using something like below, jsf gives the form a seemingly random id.
<ui:repeat>
<h:form id="repeatingform">
...
I would like submit all forms using javascript. Is there a way to do this without knowing the ids of the forms?

Submitting more than one form at once it not really possible. The problem is that each form requires its own separate request - submitting a form is basically similar to clicking a link, and you can't open all links on a page at once (you can by opening them in new tabs/windows, but that's a different matter)
If you really do want to keep each form its separate form element, you can use Aquatic's example,
var forms = document.getElementsByTagName("FORM");
for (var i=0; i<forms.length; i++)
forms[i].submit();
but replace the code which runs submit() with code which submits the form using XMLHttpRequest. You can have multiple XMLHttpRequests running in the background.

Hmm, It won't work like that real easy. If you would use something like document.form1.submit(); it posts that specific form and all values in it.
So it's no use looping through all the forms and submitting every single one.
That would be the same as clicking on the submit button of each single form, resulting in each form being posted separately.
The solution is to collect the values of each field in each form in a single collector form, and post the collector form.
You can read (with code examples!) more about it here: http://www.codetoad.com/forum/15_24387.asp

You can access all forms on the page in the next way
var forms = document.getElementsByTagName("FORM");
for (var i=0; i<forms.length; i++)
forms[i].submit();

I think there are several parts of this problem.
1. Are you trying to submit multiple forms in JSF? There is a way you can seggregate components in different forms and then submit a chosen group of them if req. The outer tag may be and inside these you may have as many as you may like. (Please know t:subform is a tomahawk library; but it works well with JSF). Also Subforms can be submitted in a chosed group using t:commandButton.
Notice the last paragraph on subform deocumentation that all forms with comma seperated id's may be submitted. so for example
some input controls here
more controls here
whole lotta controls here
something like this will allow you to submit selective forms and validating components only for forms you wish to validate. If that is what you are really trying to do here.
But if your intent is really to submit these forms by a single piece of java script I have a small advise, javascript supports lookup of form tags dynamically in a dom tree as shown in above example by aquatic. you could traverse those ui elements also by implementing a PhaseListener which gets invoked before "RENDER_RESPONSE" phase and there traverse the ComponentUITree to get the names or list of all the UI components and then provide them to javascript by scriplet variables or $ variables that JSP 2 supports.
I could give more detailed answers or examples if you could exactly lay out your problem, as to WHY you want a common java script and do you intend to submit multiple forms parallely or you intend to submit them one at a time ( as and when requiered) but by a common piece of java script.
Parallel submission of HTML form component is really not possible until and unless u use javascript to accumulate component values from all forms and then do whole lot of manual maipulating.
Give more details on your actual intent.

Related

web2py form read values in js

I'm building a webpage in web2py.
The effect that I want to achieve is a form that one can submit in the usual way, but where the html page containing the form also features an html canvas which is managed by js code that is able to dynamically see the contents of the form. This enables a sort of preview to be seen live as the user changes the contents of the form and updated continuously prior to the user submitting the form.
It seems there are two challenges to doing this.
1.) web2py likes you to define forms in the controller which generates to form code automatically - I don't see a way to add extra elements in the middle of the form by editing the html page.
2.) I don't see any way to get js code to dynamically read the values entered into the form.
Any suggestions of how to do this would be much appreciated. I'm new to web2py but have spent quite a while trying to figure out how to get this working
Thanks!
1.) web2py likes you to define forms in the controller which generates to form code automatically - I don't see a way to add extra elements in the middle of the form by editing the html page.
Regarding the above, letting web2py generate the form HTML is an optional convenience. If you need custom markup, you can do that as you normally would. There are also ways to add form elements to web2py's server-side DOM representation of the form.
See:
http://web2py.com/books/default/chapter/29/07/forms-and-validators#More-about-manipulation-of-FORMs
http://web2py.com/books/default/chapter/29/07/forms-and-validators#Adding-extra-form-elements-to-SQLFORM
http://web2py.com/books/default/chapter/29/07/forms-and-validators#SQLFORM-in-HTML
http://web2py.com/books/default/chapter/29/07/forms-and-validators#Custom-forms

How to pre-fill a form using jquery/javascript

I have to pre-fill a form on this page that I open using javascript. The best code I have managed to come up with thus far is
submitpage = window.open('http://localhost/bookmarks/submitbookmark');
submitpage.getElementsByName("title")[0].value="Good Luck";
I have no control over the page that opens. When I manually fill the form, it works fine and submits everything. Its when I pass variables in the url that it does not accept some. The problem is that none of the form elements on the third party page have id's, so i have to use the getElementsByName() function but the good thing is that there are only four elements, all with unique names so i can use the function like this getElementsByName()[0].
Now, I want to see the form pre-filled with values and leave the option of submitting to the user by clicking the submit/post button. Just for reference, the form method="POST".

Is there any danger to using input fields outside/without forms in HTML/Javascript pages?

Input fields are usually associated to forms, but I would like to use them in a simple Javascript/HTML page. I don't need the form. I see no issue with my HTML page, but is there any danger or bad practice I am not aware of? I just don't want my page to bug down the road.
(Basically, a field in my page can be Javascript enabled or disabled according to values in other fields)
The only real problem is if you want your page to function for users who have JavaScript disabled - if the inputs are actually for user input then placing them outside a form means that you'd need to use JavaScript (presumably with Ajax) to do anything with the values, whereas form fields can be submitted without JavaScript. If your page isn't intended to be submitted to the server anyway then you're dependent on JavaScript for interaction. If you've taken that into account and it doesn't matter for your scenario then go ahead.
P.S. I should've mentioned that as far as HTML standards go it is perfectly valid to have input elements that aren't in forms.
You should be fine AFAIK. It's ok in the HTML 4.01 standards anyway
http://www.w3.org/TR/html401/interact/forms.html#form-controls
The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces. This is discussed in the
section on intrinsic events. Note that controls outside a form cannot
be successful controls.
You can use an HTML validator (here, or on many other sites) to check this sort of thing. If it shows up legal, which I think it should in this case, as Ted pointed out, then you are probably good.

Zend Framework - Add new input element using javascript

I'm working on a project using Zend Framework.
I'm creating a form on which users can add a set of elements by pressing a + sign.
Zend framework uses subforms and decorators to get array of values from a form.
These will show when the page is displayed
How does the new fields created with Javascript integrate in that model?
The best demo of dynamically adding fields on the client to a Zend_Form with which I am familiar comes from Jeremy Kendall:
http://jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/
The upshot of the technique is to add/call a preValidation() method on the form to check the post for fields missing in the form. If it finds any such fields, then they are added to the form object. By the time isValid() and getValues() are called, all the Zend_Form_Element objects have already been attached to the form, so processing runs as normal.
One suggestion would be to define all input fields that you want to provide using zend form.
But when the form is displayed you could hide certain fields and make them visible by clicking on +.
I think this is the most simple approach because for adding decorators and stuff you would need to change php files on client side and this is not possible.
Another suggestion, you could define several forms. Clicking on + redirectes the user to another form with an added field.

Dynamic form submission using javascript - how to elegant code?

Here is the problem:
My page displays a set of items. Each item has a check box associated to it (which is part of a form). User might check any of these check boxes and press 'Delete' button. The same page also has a 'Upload' button which would upload an excel sheet of items.
At the moment, my form action sumbits to say : "xyzAction" and I have two different handlers (analogous to Struts Action) - one for deletion of stores and other for uploading stores.
I am told that the best way to do this is to rely on javascript by doing one of these:
1)) Switching form action on press of upload and delete buttons - there by invoke different actions.
2) Use a hidden variable "act" to set it to delete / upload and submit to a single form. The server side action would take care of identifying the act and forwarding to the corresponding action.
Approach (1) - seems very inelegant to me. Playing with form action seems unnecessary.
Approach (2) - would obviously not work if your javascript is turned off and is not very elegant either.
There must be a third way to doing this?, which would make me happy?
It sounds like you may need two different forms, for the two different actions.
You need to get the HTML correct first.
You have two different actions, so you should have two forms - a good rule of thumb is that each form should only have one submit button. This is the best practice for HTML and will ensure that the page works without JS or any other trickery.
Once you have the page working like this, use JS to manipulate the DOM to produce the UI that you need. This is using JS to add behvour to the UI and is best practice for unobtrusive JS.
(If you really want to conflate your actions in a single form, changing the action of the form with JS is the best course of action. But consider what would happen if a user checks a check box and then changes their mind and uploads a file leaving the checkbox checked. You should take care that this shouldn't delete anything.)

Categories

Resources