CODEWITHSUNDEEP
jqueryhtml
Chris
Chris

Reputation: 3129

Adding text to an input

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>

Upvotes: 0

Views: 40

Answers (1)

j08691
j08691

Reputation: 207861

.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>

Upvotes: 2

Related Questions