CODEWITHSUNDEEP
javascriptjquery
Clementine
Clementine

Reputation: 131

Change (immediatly) submit button text if any form input change [JS]

How can I change immediately the submit button text if any form input change?

//This applies to whole form
$('#test').change(function() {
  $("#send").prop("value","Change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1" />
  <input id="Input2" value="Input2" />
  <input type="submit" id="send" value="Send" />
</form>

Here, the button text change after the cursor leave the input.

Live example : http://jsfiddle.net/rgg3A/56/

Upvotes: 0

Views: 139

Answers (5)

TylerY86
TylerY86

Reputation: 3792

As your original question did not mention JQuery directly except by it's use as a selector, this one left me hanging for a proper JavaScript answer.

So this answer is the same as the other examples, but using just plain ol' JavaScript. Uses the input event, just as the other answers do.

document.getElementById('test').addEventListener('input', function(e) {
  document.getElementById('send').value = e.target.value;
});
<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

The difference here is that it is listening for bubbled events on the form element proper, registers an event listener only once (instead of applying the same event listener to multiple elements), and using the Event.target property to figure out which element was modified.

Upvotes: 0

Ayaz Ali Shah
Ayaz Ali Shah

Reputation: 3541

You can do it by using jquery input event and selector.

$('input').on("keydown", function() {
      $('#send').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
    <input id="Input1" value="Input1">
    <input id="Input2" value="Input2">
    <input type="submit" id="send" value="Send">
</form>

Upvotes: 0

Sam Anderson
Sam Anderson

Reputation: 300

A solution requiring minimal change would be to use the keyup event. I.e.

$('#test').keyup(function() {
   send.value = "Change";
});

This way, typing in any of the input fields within the #test parent will trigger the event.

Upvotes: 0

Rayon
Rayon

Reputation: 36599

$('#test').find(':input').on('input', function() {
  document.getElementById('send').value = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

Upvotes: 6

Gofilord
Gofilord

Reputation: 6641

You need to put the listener on the inputs themselves, in this case attach it to the onKeyDown event:

$('input').on("keydown", function() {
  send.value = "Change";
});

Updated Fiddle

Upvotes: 1

Related Questions