bind value from input text to button value jquery

Question

How to bind button values from input text box. when we click on the button, button value will be shown in text box, if we change value from input text box have to change selected button value too ..

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
$( "button" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>

if we change value from input text box have to change selected button value too how would you differentiate between selected and unselected button? — gurvinder372
– gurvinder372, Commented Feb 4, 2016 at 7:50

mylee · Accepted Answer · 2016-02-04 07:49:56Z

2

Try this

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
var button = $();
$( "button" ).click(function() {
  button = $(this);
  var text = $( this ).text();
  $( "input" ).val( text );
});
$("input").on("input", function(){
    button.html($(this).val());
});
</script>
 
</body>
</html>

answered Feb 4, 2016 at 7:49

mylee

1,3531 gold badge9 silver badges14 bronze badges

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

2 Comments

Vijju Sena Over a year ago

@mylee if 'ínput' is in a page and 'buttons' are in another page.. where binding is not working between them,, then how can we solve this ??

mylee Over a year ago

by another page do you mean in frames or iframes?

Joel Jaun · Accepted Answer · 2016-02-04 07:52:58Z

1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
var actualButton;
$( "button" ).click(function() {
  actualButton = $(this);
  var text = $( this ).text();
  $( "input" ).val( text );
});
$("input").on('keyup', function(e){
  if(actualButton === undefined)
    return;

  actualButton.text($(this).val());
});
</script>
 
</body>
</html>

Edit: Ohh someone was faster ;)

answered Feb 4, 2016 at 7:52

Joel Jaun

665 bronze badges

4 Comments

Vijju Sena Over a year ago

if 'ínput' is in a page and 'buttons' are in another page.. where binding is not working between them,, then how can we solve this ??

Vijju Sena Over a year ago

yeah sure,, thanx in advance

Vijju Sena Over a year ago

sorry,, the two pages added with php,, i con't send with jsfiddle.. is then any hint to bind between one page to another page ??

Joel Jaun Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

bind value from input text to button value jquery

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related