Thread

Using jQuery, anyone here know how I can rip a form and all of its inputs, labels and text?

I have tried the following selectors:

form, label, :input, :text

This one returns form items, THEN label items, THEN inputs, etc which is no good. Need them in the same order.

form > :input

This will only do inputs within a form, need form action/method too and labels.

form > :input, label, :text

This is a mixture problem of the first two. Still does it in order…

So you want to return an array of elements in the same order that they appear in the markup?

I don’t think you can do it with a straight CSS query - you’d probably have to loop through all the children of the form element and check their nodeName or something similar.

If you simply want the entire form you can use $(“form”).clone(), which will return a copy of the form exactly as you had it - including all child elements.

Thanks for the replies, got it eventually. Trying to do it purely via the selector was my real problem, this below seems to cover it.

// Load everything within a form tag from the returned HTML
$("#loaded_html").load($("#rip_url").val() + ' form');
            
// Take out anything that is not input field, text or label
$("#loaded_html").filter(":input, :text, label");

Ok this only works a bit. It seems that you can only do one or two modifications to the same DIV until it just wont let you do anymore… check the demo here. Basically I want it to load all the forms of another page (will be making a Server Side proxy to let it get remote pages via AJAX), then to strip out everything but form tags and certian contents.

I also want to wrap each form in the returned code with <fieldset> then try to dynamically work on the name based on header tags or form id/name.

Click the “Go” link repeatedly and you’ll see it is actually adding the fieldset, it just doesnt stay there. If I add an alert in before the fieldset adding loop then it works perfectly fine… Anyone know how to get round this?

You might try your question in the jQuery Group, them cats are fast as lightning:

jQuery

Phew, took a while, but the answer is quite simple.  Your ajax call is slower than the actual script.  You start the load call, the script tries to add the fieldset, and then your load returns the form.

Simple fix, just add everything to the ajax callback.

Why not grab the ID of the form and loop through its elements array? That’ll get you all the form elements that will be submitted to the server when the form submits. Labels is another matter, but it’s not clear how the form is structured. Labels can be arbtrarily distributed within a form, so long as they all have a for attribute, so it would be quite difficult to construct a relationship between labels and inputs without some work.