Adding text to an input

Question

I am not sure as to why I can't place the text in the input field.

$('#btn').on('click', () => {
  let result = $('.form-group input[type="text"]');
  for (i = 0; i < result.length; i++) {
    result[i].innerText = "Test";
    //result[i].text = "Test";
    //result[i].Value = "Test";
    //result[i].val("Test");
    //result[i].text("Test");
    console.log(result[i]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="txtBusinessName" class="control-label col-lg-3 col-sm-4">Business</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtBusinessName" class="form-control input-sm" name="BusinessName" type='text' placeholder="Business Name" style="max-width:75%;" />
  </div>
</div>

<div class="form-group">
  <label for="txtTenantID" class="control-label col-lg-3 col-sm-4">TenantID</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtTenantID" class="form-control input-sm" name="TenantID" placeholder="TenantID" style="max-width:75%;" type='text' />
  </div>
</div>

<div class="form-group">
  <label for="txtPrimaryPointOfContactEmail" class="control-label col-lg-3 col-sm-4" style="padding:7px 18px 0px 0px;">Contact Email</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtPrimaryPointOfContactEmail" name="PrimaryPointOfContactEmail" type='text' class="form-control input-sm" placeholder="Primary Point Of Contact Email" style="max-width:75%;" />
  </div>
</div>


<button id='btn' class='btn btn-success'>
Click Me
</button>

j08691 · Accepted Answer · 2018-08-31 16:24:30Z

2

.val() works but you need to wrap results in jQuery like $(result[i]).val("Test");. Plain JS works too but you can't capitalize value (i.e. result[i].value = "Test"; works too).

$('#btn').on('click', () => {
  let result = $('.form-group input[type="text"]');
  for (i = 0; i < result.length; i++) {
    $(result[i]).val("Test");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="txtBusinessName" class="control-label col-lg-3 col-sm-4">Business</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtBusinessName" class="form-control input-sm" name="BusinessName" type='text' placeholder="Business Name" style="max-width:75%;" />
  </div>
</div>

<div class="form-group">
  <label for="txtTenantID" class="control-label col-lg-3 col-sm-4">TenantID</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtTenantID" class="form-control input-sm" name="TenantID" placeholder="TenantID" style="max-width:75%;" type='text' />
  </div>
</div>

<div class="form-group">
  <label for="txtPrimaryPointOfContactEmail" class="control-label col-lg-3 col-sm-4" style="padding:7px 18px 0px 0px;">Contact Email</label>
  <div class="col-lg-9 col-sm-8">
    <input id="txtPrimaryPointOfContactEmail" name="PrimaryPointOfContactEmail" type='text' class="form-control input-sm" placeholder="Primary Point Of Contact Email" style="max-width:75%;" />
  </div>
</div>


<button id='btn' class='btn btn-success'>
Click Me
</button>

edited Aug 31, 2018 at 16:24

answered Aug 31, 2018 at 16:18

j08691

209k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Chris Over a year ago

Awesome, I did not know that. Can you explain why it needs to be done that way in jquery?

j08691 Over a year ago

@gaetanoM yes, however that would change all the inputs to the same value. If the OP wanted or needed to address each input individually, then the [] is needed, as well as the jQuery wrapper

Collectives™ on Stack Overflow

Adding text to an input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related