Create a label for each input of type text using input attribute (id, name)

Question

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $("input").attr("id")).text($("input").attr("name"));
      $('input').append(label);
    }
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

I am trying to create label for each input of type text using its attribute name & Id using Jquery.

I have successfully created a label by using input attributes but failed to get its correct position.

If you're trying to get the name attribute of the input, you should use $(this).attr('name'). $(this).name will always return undefined in your case. — Hikarunomemory
– Hikarunomemory, Commented Apr 25, 2018 at 10:54

4b0 · Accepted Answer · 2018-04-25 11:31:06Z

1

You are using $('input') to append so all label are append in first input so use $(this) to append label in its correct position.

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $("input").attr("id")).text($("input").attr("name"));
      $(this).parent().append(label);
    }
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

edited Apr 25, 2018 at 11:31

answered Apr 25, 2018 at 10:53

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devayan Thakur Over a year ago

Thank you guys ! In my example append($(this).append(label);) cause some issue,it will append inside input.therefore not recognized by browser. <input><label..></input>.It should be in below format

<label style="display:none !important;" for="account_reference_textbox">account_reference_textbox</label> <input name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="" type="text">

Carsten Løvbo Andersen · Accepted Answer · 2018-04-25 10:54:03Z

I don't know where you want the labels to be placed, but this example will place them after each input:

also note that if you use $("input").attr("id") rather than $(this).attr("id") then you get the id of the first input

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $(this).attr("id")).text($(this).attr("name"));
      $(this).after(label);
    }
  });
});

Demo

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $(this).attr("id")).text($(this).attr("name"));
      $(this).after(label);
    }
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

Collectives™ on Stack Overflow

Create a label for each input of type text using input attribute (id, name)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related