Develop Reference

HTML5 / JavaScript / JQuery - Best way to get form associated with input

Before HTML5, I used to be able to easily find the form associated with an input using jQuery, because all inputs were contained within the form element.
For example, with jQuery I would do something like:
jQuery('.info-container input').closest('form')
I still would like to use jQuery because I use some features that are easier to implement in jQuery. But, with HTML5, inputs can be outside of the form element. For example the following can be anywhere in the HTML but still part of the form:
<input name='city' form='address_form'>
Is there any easy way in jQuery to get the form associated with a given input/button/select ?

You can get the form property to get the associated form.
$($('input[name=city]').prop('form'))
I believe this will work whether the input is inside a form or uses the form attribute to connect with a form.

How about just get list using this.
var inputs = $(document).find('input[form="address_form"]');
then you can find what input you want within form "address_form" using their name. But if you just need one element, just like this
var inputs = $(document).find('input[form="address_form"][name="city"]');

How to find form with two input using XPATH or javascript

Is there any way. how to find form with two input using xpath?
//form//input
works for X inputs, not for two.
Or, is there any way, how to do this using javascript?
Example
html page
form
input login
input psw
form
input finder
So, on my pseudo html page is two forms, one form contains TWO inputs and second form contains only one input. I want localize first form using xpath, because first form contains two input elements.
Somethink like this:
//form//*[local-name()='input' and #type='text'] (AND BUT NOT WORKING) [local-name()='input' and #type='password']

This should work:
//html/form[count(input)=2]

Generate input field using jQuery's append

Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks

You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo

In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.

I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.

Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Getting reference to form with no id or name

I am working on a project where I need to recall the fields entered in a form so I can repopulate them later. When a form has a name, I can remember it and then later use some JavaScript (document.getElementsByName(...)[0]) to access it. However, if there is no name...I'm at a loss for how to get a reference to it later.
I'm using jQuery, but am open to a JavaScript solution as well. One idea is to remember the index of the form. So, if it was document.forms[3] then later I can use the index. However, when someone submits a form, how do I know the index of the form that it is? (NOTE: I am blindly adding submit handlers to all forms when a page loads to capture the activity.)

Instead of attaching events to the submit buttons, attach it to the <form> elements directly, like this:
$("form").submit(function() {
//do something with this
//this == the form element being submitted
});
Or...in your current event handlers, use .closest() to get the closest parent <form> element:
$(":submit").click(function() {
var form = $(this).closest("form");
});

If you don't want to use an index on all form (flaky because someone may add a form in anywhere), you could use its surroundings as a reference... for example.
$('#content').parent().next().find('form')