How to fill an input text box with a value instead of using a span?

Question

I have three td's in a table. Two of which are inputs which I multiply and spit out the answer to the third td. I initially had a span in that td, but I need an input box instead. With the span it works great, but once I put the input in it doesn't.

How can I use this small Jquery function to display the result in the input versus the span?

Here's the td:

 <td> @* 11 *@
   <span class="mcalPremium"></span> //Multiplied answer goes here, but want it in the TB instead
     @*<input type="number"  class="form-control mcalPremium" />*@//Commented out to try both.
 </td>

Here is the function:

$("#alSublineValSubmitTBL").on('input', 'td:nth-child(11)', function () {
  var td = $(this);
  var input1 = +td.find('input').val() || 0;
  var input2 = +td.parent().find("td:nth-child(9) input").val() || 0;

  var exp = parseInt(input1);
  var rate = parseFloat(input2);
  var premium = rate * exp;

  //display premium in premium field
  td.parent().find('.mcalPremium').text('$' + premium).digits();
  //td.parent().find('.mcalPremium').val('$' + premium).digits();
});

EDIT and UPDATE: The error was hidden among many other console.out pieces that I just simply missed. .val does actually function how I thought it did, but I had that dollar sign in the val() "val('$' + premium)" causing the error. Removing it resolved the issue and it works as needed.

Does this answer your question? [How to set value of input text using jQuery](https://stackoverflow.com/questions/10611170/how-to-set-value-of-input-text-using-jquery) — EGC, Nov 20 '19 at 22:36
@Marc.. nope.. no it's not. That wasn't the culprit though. I fixed it to accurately reflect what it looks like on my end — swapmeet_Lou, Nov 20 '19 at 22:37
Okay. Setting the value of a specific element based on its class-- which is usually shared by many elements-- is probably asking for trouble too. I think if you made a JSFiddle example, it would be a lot easier to see where you errors are. For both you and us. — Marc, Nov 20 '19 at 22:38
For inputs, use `.val(yourValue)` instead of `.text(yourValue)` — Rylee, Nov 20 '19 at 22:39
@Marc I'll have to set up the fiddle. I hadn't done it before, so it may take me sometime. What I can specifically tell you for sure. With a span and using this: td.parent().find('.mcalPremium').text('$' + premium).digits();, it works perfect. Same class name.. ect. When I use this: td.parent().find('.mcalPremium').val('$' + premium).digits(); it doesn't. Nothing displays. — swapmeet_Lou, Nov 20 '19 at 22:41
@Dohab sure it is https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event — Nick, Nov 20 '19 at 22:42
@Rylee I've tried using .val(). Doesn't work. I have it listed up there.. Just commented out. Hence the reason I came here.. I couldn't see why val wouldn't work based on what I've found — swapmeet_Lou, Nov 20 '19 at 22:42
You potentially have console errors which are causing unexpected results. `Val` should work as it's the accessor for `input`'s. Please setup a fiddle or fix your above code so we can replicate a result without sifting through the above invalid code. — EGC, Nov 20 '19 at 22:44
@EGC you were absolutely right. I checked my console.. I had bunch of console items displaying and I missed the error. I'll edit and explain in the post. As you said val is the accessor for inputs.. I had text in the val.. you can see it in the commented out td.parent().find('.mcalPremium').val('$' + premium).digits(); Dollar sign screwed it.. — swapmeet_Lou, Nov 20 '19 at 22:55
Rather than hiding the answer in an ‘update’, post the answer in the answer space as an answer. That way you can - after two days - accept that answer and the system will recognise the question as ‘answered’. — David Thomas, Nov 20 '19 at 23:02

LeGEC · Answer 1 · 2019-11-20T22:47:43.243

0

The value in an <input> node is accessed through its value attribute, not through its content (as in a <span> or a <div>).

The corresponding jQuery method is .val().

edited Nov 20 '19 at 22:47

answered Nov 20 '19 at 22:38

LeGEC

46,477
5
57
104

Libra · Answer 2 · 2019-11-20T22:56:09.423

Use .val in jQuery to both access and write to an input, as such:

$( document ).ready(function(){
  $('.print').click(function(){
    $('#display').append($('input').val()+"<br>");
  });
  $('.add').click(function(){
    $('input').val('set content')
  });
});

div{
  border: 1px solid black;
  display: inline-block;
  cursor: pointer;
  padding: 2px;
}

#display{
  margin-top: 2px;
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <input></input>
  <div class="button add">Set Text</div>
  <div class="button print">Print Text</div><br>
  <div id="display"></div>
</body>

score 0 · Answer 3 · answered Nov 20 '19 at 23:10

While all of you were correct in saying .val() is the correct resource to use, it was @EGC who pushed me in the right direction. Greatly appreciated. I was using .val, but I had some incorrect text within it that caused an error that got buried within a many other console.log() I was using.

The fixed answer:

<td> @* 11 *@
 <input type="number"  class="form-control mcalPremium" />
</td>

$("#alSublineValSubmitTBL").on('input', 'td:nth-child(11)', function () {
  var td = $(this);
  var input1 = +td.find('input').val() || 0;
  var input2 = +td.parent().find("td:nth-child(9) input").val() || 0;

  var exp = parseInt(input1);
  var rate = parseFloat(input2);
  var premium = rate * exp;

 //display premium in premium field
  td.parent().find('.mcalPremium').val(premium).digits();//Fix
});

How to fill an input text box with a value instead of using a span?

3 Answers3