How to get the updated value of input field?

Question

I am trying to get the updated value of the input field. actually i am updating the value using keyup function of jquery. and trying to get it on button click. but not able to update please help.

$('#simple').keyup(function() {
   var keyed = $(this).val();
   $("#code").val(keyed);
 });

 var htmlString = $('#code').val();

   $(document).ready(function() {
      $("#snippet").click(function(){
          alert(htmlString);
      }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="simple"></textarea>

<input type="hidden" id="code" value="">

<button id="snippet">Click</button>

What do you mean you're 'updating the value using keyup' and then 'trying to get it back on click.' Do you mean you're changing the value on keyup, and then you want to alert the updated value on click? — Joel Hager
– Joel Hager, Commented May 5, 2020 at 5:17
javascript basics, var htmlString = $('#code').val(); is in global scope already evaluated at the beginning as empty. By the time you use it, its using the already empty value. Change scope or time of value invocation — Edward Manda
– Edward Manda, Commented Jul 4, 2022 at 19:28

Jesper Martinez · Accepted Answer · 2023-09-29 05:19:18Z

4

You need to put your holder variable htmlString inside to your onclick function so that you can get the updated value.

$('#simple').keyup(function() {
  var keyed = $(this).val();
  $("#code").val(keyed);
});


$(document).ready(function() {

  $("#snippet").click(function() {
    var htmlString = $('#code').val();
    alert(htmlString);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="hidden" id="code" value="">
<input type="text" id="simple" value="">
<button id="snippet">Click</button>

I hope this will help you. Thanks

edited Sep 29, 2023 at 5:19

answered May 5, 2020 at 5:18

Jesper Martinez

6415 silver badges16 bronze badges

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

Comments

Edward Manda · Accepted Answer · 2022-07-04 19:39:05Z

Scope is wrong. Global value htmlString is ""

Part one: Rewrite

$("#simple").keyup(function () {
  var keyed = $(this).val();
  $("#code").val(keyed);
});

$(document).ready(function () {
  $("#snippet").click(function () {
    alert($("#code").val());
  });
});

And

<textarea id="simple"></textarea>
<input type="hidden" id="code" value="" />
<button id="snippet">Click</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you understand whats going on, then just do this

$(document).ready(function () {
  $("#snippet").click(function () {
    alert($("#simple").val());
  });
});

AND

<textarea id="simple"></textarea>
<button id="snippet">Click</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

How to get the updated value of input field?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related