How to determine if the input is of array type in javascript?

Question

<input type="text" name="members[0].name"> <input type="text" name="members[0].address">

Javascript code :

              var input_text;
              var inputs=document.querySelectorAll("input[type=text],textarea, select");
                _.each(inputs, function(e, i) {
                    var keyName = $(e).attr("name");
                    if (typeof keyName != "undefined") {
                        var text = $(e).parent().find('label').text();

                        if ($(e).is('select')) {
                            input_text = input_text + "<tr><td>" + text + "</td><td>  " + $(e).find(':selected').text() + "</td></tr>";
                        }
                        else {
                             input_text = input_text + "<tr><td>" + text + "</td><td>  " + $(e).val() + "</td></tr>";
                        }
                    }

                });
                console.log(input_text);

As You can see, I m getting the values of all the inputs in $(e).val() except those above mentioned inputs.

Not really ... Sorry I really don't get what you want. If I only rely on your post name, then you can use if (typeof yourVariable === 'Array') — user4676340
– user4676340, Commented May 24, 2017 at 8:12
Thank You . I'll give it a try .I just want to read all the input fields and display the data that in a bootstrap model . — sang
– sang, Commented May 24, 2017 at 8:22

T.J. Crowder · Accepted Answer · 2017-05-24 08:27:00Z

Those inputs aren't an "array" in the browser. They just use a naming convention in their name which is used by some server-side handling (for instance, in PHP) to organize the form data for you when it's submitted.

I don't know what you mean by "previewing," but you can see the values of those elements by simply looping through the elements of your form (yourForm.elements), or by using yourForm.querySelectorAll("input[type=text]") (or $(yourForm).find("input[type=text]") using jQuery — I missed the jquery tag on your question at first).

Example of theForm.elements:

document.querySelector("form input[type=button]").addEventListener("click", function() {
  var form = document.getElementById("the-form");
  Array.prototype.forEach.call(form.elements, function(element) {
    if (element.type === "text") {
      console.log(element.name + " = " + element.value);
    }
  });
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>

Example of theForm.querySelectorAll:

document.querySelector("form input[type=button]").addEventListener("click", function() {
  var form = document.getElementById("the-form");
  Array.prototype.forEach.call(form.querySelectorAll("input[type=text]"), function(element) {
    console.log(element.name + " = " + element.value);
  });
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>

Example of $(theForm).find:

$("form input[type=button]").on("click", function() {
  var form = document.getElementById("the-form");
  $(form).find("input[type=text]").each(function() {
    console.log(this.name + " = " + this.value);
  });
  // Of course, we could have just used `$("#the-form input[type=text]").each`...
  // but I was assuming you'd already have `form`
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That really helps .Thank You ."Previewing" means I want display all the filled up data in a model before submitting.

Vinutha N · Accepted Answer · 2017-05-24 07:52:31Z

0

So many ways to get the input type values using formID

 $('#formId input, #formId select').each(
        function(index){  
            var input = $(this);
        }
    );

OR

var formElements = new Array();
$("form :input").each(function(){
    formElements.push($(this));
});

OR

var $form_elements = $("#form_id").find(":input");

hope it helps you.

answered May 24, 2017 at 7:52

Vinutha N

1666 bronze badges

Comments

Jack jdeoel · Accepted Answer · 2017-05-24 08:01:33Z

0

You can use serializeArray or serialize for it .

$("form").serializeArray();

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. Doc

answered May 24, 2017 at 8:01

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to determine if the input is of array type in javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related