CODEWITHSUNDEEP
javascriptjquery
R.R.C.
R.R.C.

Reputation: 6711

How to get a list containing all input labels available in a form

I want a list containing all labels avaliable in a form, or just a way to loop through them all, and then check the text of one-by-one.

I tried first:

$('label').each(function() {
    console.log(this); // this was to test :/
});

and later some variations: $('input').labels().each(function() { ... }); $('label').siblings().each(function() { ... });

None worked on this form:

<form class="form-group">
    <label for="id_name">Name:</label>
    <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

    <label for="id_cnpj">Cnpj:</label>
    <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

    <label for="id_cpf">Cpf:</label>
    <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

    <label for="id_rg">Rg:</label>
    <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

    <label for="id_federation_unity">Federation unity:</label>
    <select name="federation_unity" class="form-control" required="" id="id_federation_unity">

    and much more ....

</form>

references: .labels(), .siblings()

How could I do it?

EDIT I commited a big noob fault here and I'm sorry. I found out what was going wrong. I should have put the entire code like this in first place:

<!doctype html>
<html>
<body>
<form class="form-group">
    <label for="id_name">Name:</label>
    <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

    <label for="id_cnpj">Cnpj:</label>
    <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

    <label for="id_cpf">Cpf:</label>
    <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

    <label for="id_rg">Rg:</label>
    <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

    <label for="id_federation_unity">Federation unity:</label>
    <select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</form>

<script src="jquery-3.2.1.min.js" rel="javascript"></script>
<script type="javascript">
    $('label').each(function() {
        console.log(this);
    });
</script>
</body>
</html>

THE PROBLEM

I changed <script type="javascript">jquery code here</script> by removing the type="javascript" attribute and it worked. I think the usage of type="javascript" is viable only when the <script>tag is defined inside <head> tag.

Another thing: I tested the version $('label').siblings().each(function() { ... }); and it worked as well.

I'm greatful for the time and effort you all had in helping me out with the first problem submitted.

Upvotes: 1

Views: 399

Answers (2)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

Maybe you were not able to do that because you had an unclosed select tag, as what I understood you want to iterate through all the labels in the form and want to access the siblings of the label too, i have added a code below see if that is what you wanted. I am printing the label text and the id of the next element to the label i.e input 

$(document).ready(function() {
  var labels = $("form label");
  labels.each(function() {
    console.log("Label Text " + $(this).text() + " ", "Next element id =" + $(this).next().attr('id'));
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
  <label for="id_name">Name:</label>
  <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

  <label for="id_cnpj">Cnpj:</label>
  <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

  <label for="id_cpf">Cpf:</label>
  <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

  <label for="id_rg">Rg:</label>
  <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

  <label for="id_federation_unity">Federation unity:</label>
  <select name="federation_unity" class="form-control" required="" id="id_federation_unity">
  </select>

  and much more ....

</form>

Upvotes: 1

brk
brk

Reputation: 50291

Select the form-group class and label and iterate using each , .text() method will return the text content of the label. trim() to remove any white space

$(".form-group label").each(function(i, v) {
  console.log($(v).text().trim())


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
  <label for="id_name">Name:</label>
  <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

  <label for="id_cnpj">Cnpj:</label>
  <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

  <label for="id_cpf">Cpf:</label>
  <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

  <label for="id_rg">Rg:</label>
  <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

  <label for="id_federation_unity">Federation unity:</label>
  <select name="federation_unity" class="form-control" required="" id="id_federation_unity"></select>

</form>

Upvotes: 1

Related Questions