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"]');
Related
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]
I am having problem with creating tool for my app as I have about 50 input fields. i have created a single html5 file in dreamweaver with phonegap build file is rendering on real device and emulator properly.
I have to do calculation from user input and display on the result page which is in same html5 file.
Problem is how do i do it i have created a java code for same but JAVASCRIPT code is new to me can any one tell me how do i get data out of input box and put data in respective div??
any tutorial will be really helpful.
In JAVASCRIPT you can get by input id or name. best choice is Id.
Get value from input document.getElementById('IdValue').value;
Assign value to HTML Element document.getElementById('IdValue').value = "new value"
Using input name
Get value from input document.getElementsByName('inputName').value
Assign value to HTML Element document.getElementsByName('inputName').value = "new value"
Or
You can use JQuery. In JQuery selector is using for getting and setting value
For getting value - $('selector').val()
For setting value - $('selector').val('new value')
More about selector
you can loop through all the input fields using jquery and append it to div
var test="";
$('input[type=text], textarea').each(function() {
alert($(this).val())
test+=$(this).val();
});
// your div
$('#divid').append(test);
I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.
First is I want to count the number of fields in the form using JQuery. I tried the following.
var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);
The form has one select box, 3 input fields and a textarea. But it was giving 0, instead of 5.(#fileUpload is the form id I want to submit)
How to get the exact number of fields?
Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.
I would recommend using each() function:
$("#fileUpload input,select,textarea").each(function(){
console.log(this);
}
Btw: don't use alert, use console.log() instead ;)
You need to make sure that the form is loaded before your js script is launched.
To do so, wrap it in document ready like so:
$(function () {
var ln = $('#fileUpload').find('input, select, textarea').length;
alert(ln);
});
There should no problem in your code
Check that you have added the jquery and add an attribute to your form
id="fileUpload" then check
Also, check you don't have any other element having id fileUpload
like input type="file"
In your page <form id='fileUpload' ... > must be unique
Fiddle http://jsfiddle.net/qUJZf/
I've tried all variations of the following:
$(this).("input[name='email']").val();
Assuming this is the form element, and you want to find input elements only with that form, you have a couple of options. You could use this as a context:
$("input[name='email']", this).val();
Or you could find the elements within this:
$(this).find("input[name='email']").val();
It depends on the context of this code, James has provided an answer for targeting inputs if you already have the desired form as your "context". But since there aren't a lot of ways to end up in that situation, and since you're looking for values I'm guessing that you're firing this code from a button inside the form, maybe a submit button?
In that case you'll have to traverse up the DOM before you can target your inputs and stay within the same form. Something like:
$(this).closest('form').find('input[name="email"]').val();
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')