There are multiple form on one html page which is created dynamically using ckeditor.
The requirement is to get total number of form and its name and also, in each form all the element name.
using that data, i have to call some API call with that name.
all using jquery or javascript.
USING JQUERY
$("form").each(function() {
// apply logic here to find name etc
}
Number of iterations here means number of forms in your page
USING JAVASCRIPT ONLY
var list=document.getElementsByTagName("form")
for(i=0;i<list.length;i++){
//logic here
}
You could use document.getElementsByTagName("form"); to get all forms. With each form you could then just get the name attribute.
Related
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"]');
I have a Javascript calculator inside a form, that computes some simple Math formulas based on some values filled in the form and displays some results inside html tags with different IDs.
When clicking on SUBMIT button, an e-mail is sent with data that has been filled in the input fields and the computed results.
I have no problem regarding the standard form fields (input, select) but the computed values. Those values are in html tags with IDs, and I am trying to POST those IDs but I get nothing.
How can I read and send via POST to a mail function some texts and values that are modified on the fly by a javascript?
You have 3 options
1.Use JS for performing request. For example in jQuery you can do it like that:
$.post('/your-url', {some_value: $('#your-field-id').val()}, function (data) {
// some code after submitting
});
2.Add some hidden fields with proper names and fill them with JS.
The thing is that when you submitting form only inputs with name are sent.
$('#hidden_field_with_name').val($('#your-id').val());
3.If those values are filled by JS in fields like: input/textarea or another input fields you can just add name property to them and then you'll get it on server side.
You can read more about submitting forms here: https://www.w3schools.com/html/html_forms.asp
If you already know the id's of the elements you want, simply using getElementById you can get the content inside of it. eg:
var someText = document.getElementById('yourElementId').text
and depending on what do you want, you could use .text or .innerHTML
var someHtml = document.getElementById('yourElementId').innerHTML
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 have several dynamically created hidden input fields. Most of which have a name formatted as array[]
Question 1:
How can I use jQuery .ajax() or .post() to get the values from every field named array[] and pass them so they'll be retrievable as $_POST['array'] in my PHP page?
Question 2:
Hypothetically speaking. Let's say that I don't know the name of said field but only the name of the form. How can I still do the same thing as in Question 1?
I found .serializeArray() in the jQuery documentation, but I have no idea what I'm doing with that and I'm not even certain if that applies to my situation of not knowing the field names.
Thanks in advance.
You want to use .serialize() on the form. This will make a query string of all form elements (including 'name[]' ones).
$.post('/url/to/post', $('#form').serialize(), function(data){
alert('POSTed');
});
You'll want to use jQuery's .serialize() method.
Check it out