CODEWITHSUNDEEP
javascriptjqueryhtml
Rahul Lakhaney
Rahul Lakhaney

Reputation: 109

Update button text through inputfield

Is there a way to update button text dynamically while some value is being entered in an input field.

<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>

I would like to update the button text "Pay Now" with the value which is entered in the input field with id="amount-field"

I know I am supposed to use onKeyUp for this, but I am slighly clueless about how to write this code. Any help is highly appreciated.

Upvotes: 0

Views: 68

Answers (5)

AHJeebon
AHJeebon

Reputation: 1248

Are you looking for this:

If you want to append text then it is better to use anther inline tag like span.

$('#amount-field').keyup(function() {
    var keyed = $(this).val();
    $("#rzp-button1 span").text("- "+keyed); // you can remove "-" 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now <span></span></button>

Upvotes: 0

Jobelle
Jobelle

Reputation: 2834

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#amount-field").keyup(function(){
       $('#rzp-button1').text($(this).val());
    });
});
</script>
</head>
<body>

<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>
</body>
</html>

Upvotes: 0

Rani Moreles Rubillos
Rani Moreles Rubillos

Reputation: 1108

is this something you want done ?

$('.myName').keyup(function(){
  if ($(this).val()==""){
   $('button').text("Pay Now")
 }else{
   $('button').text($(this).val());
 }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="myName">
<button>sample</button>

Upvotes: 1

Samir
Samir

Reputation: 1368

Here it is,

$("#amount-field").keyup(function(){
   var value = $(this).val();

   $("#rzp-button1").text(value);
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337590

You're right, you can use the keyup event to achieve this.

document.getElementById('amount-field').addEventListener('keyup', function() {
  document.getElementById('rzp-button1').innerText = 'Pay Now ' + this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>

As you've tagged the question with jQuery, here's how to implement it using jQuery

$(function() {
  $('#amount-field').keyup(function() {
    $('#rzp-button1').text('Pay Now ' + this.value);
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>

Upvotes: 0

Related Questions