Get List of All Input Objects Using JavaScript, Without Accessing a Form Object

Get list of all input objects using JavaScript, without accessing a form object

(See update at end of answer.)

You can get a NodeList of all of the input elements via getElementsByTagName (DOM specification, MDC, MSDN), then simply loop through it:

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

There I've used it on the document, which will search the entire document. It also exists on individual elements (DOM specification), allowing you to search only their descendants rather than the whole document, e.g.:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

...but you've said you don't want to use the parent form, so the first example is more applicable to your question (the second is just there for completeness, in case someone else finding this answer needs to know).

---

Update: getElementsByTagName is an absolutely fine way to do the above, but what if you want to do something slightly more complicated, like just finding all of the checkboxes instead of all of the input elements?

That's where the useful querySelectorAll comes in: It lets us get a list of elements that match any CSS selector we want. So for our checkboxes example:

var checkboxes = document.querySelectorAll("input[type=checkbox]");

You can also use it at the element level. For instance, if we have a div element in our element variable, we can find all of the spans with the class foo that are inside that div like this:

var fooSpans = element.querySelectorAll("span.foo");

querySelectorAll and its cousin querySelector (which just finds the first matching element instead of giving you a list) are supported by all modern browsers, and also IE8.

get all the elements of a particular form

document.forms["form_name"].getElementsByTagName("input");

How can I get all a form's values that would be submitted without submitting

The jquery form plugin offers an easy way to iterate over your form elements and put them in a query string. It might also be useful for whatever else you need to do with these values.

var queryString = $('#myFormId').formSerialize();

From http://malsup.com/jquery/form

Or using straight jquery:

var queryString = $('#myFormId').serialize();

jquery get all input from specific form

To iterate through all the inputs in a form you can do this:

$("form#formID :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
});

This uses the jquery :input selector to get ALL types of inputs, if you just want text you can do :

$("form#formID input[type=text]")//...

etc.

How an I get all form elements (input, textarea & select) with jQuery?

Edit: As pointed out in comments (Mario Awad & Brock Hensley), use .find to get the children

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

forms also have an elements collection, sometimes this differs from children such as when the form tag is in a table and is not closed.

var summary = [];$('form').each(function () {    summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');    summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');});
$('#results').html(summary.join('<br />'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form id="A" style="display: none;">    <input type="text" />    <button>Submit</button></form><form id="B" style="display: none;">    <select><option>A</option></select>    <button>Submit</button></form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;"><tr><td colspan="2"><center><h1><i><b>LoginArea</b></i></h1></center></td></tr><tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><inputname="id" type="text"></td></tr><tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"type="password"></td></tr><tr><td><center><input type="button" value="Login"onClick="pasuser(this.form)"></center></td><td><center><br /><inputtype="Reset"></form></td></tr></table></center><div id="results"></div>

Get the form object without using name/ID

If you already have the input element you can get the form just by accessing the form property:

console.log(document.getElementsByTagName('input')[0].form);

<form>  <input type="text" /></form>

Displaying correct data from objects on form input

Change '=' with '=='

if(document.getElementById("cylEnter").value == "RD"){
    display.innerHTML=display.innerHTML + Object.values(RD);
   }
  else if(document.getElementById("cylEnter").value == "LD"){
    display.innerHTML=display.innerHTML + Object.values(LD);
   }

OR

if you want to check the type also than change '==' with '==='

How can access input value in django view through AJAX without form submission

You should change the format of data you have in a json format so that you can embed csrf_middleware_token into the POST :

$(document).ready(function () {
    $('#s_id > input').on('input',function(e){
        console.log(e);
        s_text = e.target.value;
        $.ajax({
            type: 'POST',
            url: "{% url 'create-studentpage' %}",
            data: {"text": s_text, 'X-CSRFToken': {{csrf_token}} },

            success: function (response) {
                console.log("response", response);
                
            },
            error: function (response) {
                console.log("error", response.responseJSON.error);
                
                
            }
        })
    });

And then in backend, you can access it by using request.POST["text"]

How to get all the values of input array element jquery

By Using map

var values = $("input[name='pname[]']")
              .map(function(){return $(this).val();}).get();

---

Related Topics