CODEWITHSUNDEEP
javascriptjqueryhtml
JMA
JMA

Reputation: 994

How to get all labels and its input elements in javascript

I would like to get all labels and its input elements using Javascript. I have also radio, checkboxes and textarea elements. Then I want to put it in an array of objects.

This is what I have done,

var html = data;
var array = [];
for(var i=0;i<$("input").length;i++){
    array[i] = {label:"",val:$("input").eq(i).val()};
}
console.log(array);

By the way, doesn't have for attributes and also their next sibling is not always the input/radio/checkbox/textarea element. Sometimes,the structures are,

<label>Something:</label><Br/ ><input type="text" />

How can I do what I want in this situation?

Upvotes: 1

Views: 10270

Answers (5)

Chris Sprance
Chris Sprance

Reputation: 302

You're using labels wrong so I'm going to assume what you really want is just some identifying attribute of the text field checkbox etc to associate with the value.

Here is my go https://jsfiddle.net/1akh5qg9/

HTML

<form id="test-form">
  <label>Label1:</label>
  <input class="get-value" name="input1" type="text" />
  <br>
  <label>Label2:</label>
  <input class="get-value" name="input2" type="text" />
  <br>
  <label>Label3:</label>
  <input class="get-value" type="checkbox" name="checkbox1">I have a bike
  <br>
  <br>
  <button id="submit-button">Get Values</button>
</form>

Javascript

let btn = document.getElementById('submit-button');
let form = document.forms['test-form'].getElementsByClassName('get-value');
let valueArr = [];

// attach onclick handler
btn.onclick = function(e) {
  e.preventDefault();
  getFormValues();
}

// getFormValues
function getFormValues() {
 for (var x of form){
  valueArr.push({label:x.name ,value:x.value})
 }
 console.log(valueArr);
}

Results

[
 {label:"input1", value:"test1"}, 
 {label:"input2", value:"test1"}, 
 {label:"checkbox1", value:"on"}
]

Upvotes: 1

Peace Akinola
Peace Akinola

Reputation: 31

For you to get the label tags in your HTML form you first have to get the label tag from the DOM and follow up with the code below:

// get array of label tags in the DOM
const label = document.getElementsByTagName("label")
for (k = 0; k < label.length; k++){
    const labelText = Array.prototype.filter
    .call(label[k].childNodes, x => x.nodeName === "#text")
    .map(x => x.textContent)
    console.log(labelText)
}

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can use map() method to generate the array and use prevAll() method with jQuery :first pseudo-class selector to get the label(you can't use prev() method since there is a br tag in between).

var array = $("input").map(function(){
  return { 
    label : $(this).prevAll('label:first').text(),
    val:$(this).val()
  };
}).get();

console.log(array);

FYI : If the input is wrapped by label in some case then you can use closest() method to get the wrapped element. Although you can use :input to select all form elements.

var array = $(":input").map(function() {
  return {
    label: $(this).prevAll('label:first').text(),
    val: $(this).val()
  };
}).get();

console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some</label>
<Br/>
<input type="text" value="1" />
<label>Some1</label>
<Br/>
<input type="text" value="11" />
<label>Some2</label>
<Br/>
<input type="text" value="2" />
<label>Some3</label>
<Br/>
<input type="text" value="4" />
<label>Some4</label>
<Br/>
<input type="text" value="3" />

<label>Some422</label>
<Br/>
<select><option value="1"></option><select>

Upvotes: 3

Mike Wodarczyk
Mike Wodarczyk

Reputation: 1273

I would recommend doing something up-front in the HTML to mark the items you want to get.

You could put the label and input pairs in a DIV to indicate that they go together and then give the DIV a class that you could filter and loop on.

You could also use data-tag attributes to name the pairs. Say give all the labels and inputs the attribute data-LabelInp="NameA". Then you can select all labels with attribute data-LabelInp, get the value of the attribute and find the matching input with data-LabelInp === that value.

Upvotes: -1

serenedog7
serenedog7

Reputation: 44

If you want to select all elements (labels, inputs) into a single array, try using a custom attribute and use a selector like this $('*[data-all-labels-inputs]');

Upvotes: -1

Related Questions