Two textbox same value in jquery?

Question

I have select box and two (2) textboxes.

I want the value of select box that displays on the first textbox and whatever the value of the first textbox it display also in the second box.

select box = first textbox first textbox = second textbox

Buy the way my first textbox is readonly so there is no way to trigger the input, keyup, keydown event. I want my two (2) textbox the same value every time.

I have the html code.

<select id="selectbox">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>


<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">

If the first textbox is readonly, how does it change? Just change that code so it updates both textboxes. I don't think there's a way to make that happen automatically. — Barmar, Aug 27 '15 at 00:54
I can use input[type=hidden] also as my first textbox. What I really want is the two textbox same value everytime without typing on it. I want to detect changes on the first textbox to displays the value on the second textbox — Rafael Topasi, Aug 27 '15 at 01:02
I also used this code $("#first-textbox").on("input propertychange") but that works when you type on the textbox — Rafael Topasi, Aug 27 '15 at 01:05

score 1 · Answer 1 · answered Aug 27 '15 at 01:51

I want the value of select box that displays on the first textbox and whatever the value of the first textbox it display also in the second box.

select box = first textbox first textbox = second textbox

Try utilizing selector $("#selectbox, :text:not([readonly])") ; input , change event ; .val() to set both input type="text" values

$("#selectbox, :text:not([readonly])").on("input change", function(e) {
  $(":text").val(this.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="selectbox">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>


<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">

PeterKA · Answer 2 · 2015-08-27T06:30:04.127

First change:

<input id="second-textbox type="text">

To:

<input id="second-textbox" type="text">

Then use the following to accomplish your goal:

$('#selectbox, #second-textbox').on('change input', function() {
    var sel = $(this).is('#selectbox') ? '#first-textbox' : '#first-textbox,#second-textbox';
    $( sel ).val( this.value );
})
.filter('#selectbox').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>


<input id="first-textbox" type="text" readonly>
<input id="second-textbox" type="text">

is there's a way the value of second textbox not depends on any changes in select box? I mean whatever changes in first textbox displays in second textbox. — Rafael Topasi, Aug 27 '15 at 06:19

score 0 · Answer 3 · answered Aug 27 '15 at 01:21

Solution 1 (best fits my eyes)

HTML

<select id="selectbox">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

JavaScript

$('#selectbox').on('change', function() {
    $("#first-textbox").val($(this).val());
    $("#second-textbox").val($(this).val());
});

fiddle here

Solution 2 (Best fits the question):

$('#selectbox').on('change', function() {
    $("#first-textbox").val($(this).val()).trigger('keyup');
});

$('#first-textbox').on('keyup', function() {
    $("#second-textbox").val($(this).val());
});

fiddle here

score 0 · Answer 4 · answered Aug 27 '15 at 01:28

You can set the text on change:

$(function() {
  var tbs = $('input[id$=-textbox]'); //cache all
  $('#selectbox').on('change', function(e) {
    tbs.val(this.value); //set text box value
  }).trigger('change'); // force value on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectbox">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>


<input id="first-textbox" type="text" readonly='' />
<input id="second-textbox" type="text" />

score 0 · Answer 5 · answered Aug 27 '15 at 01:31

I built upon @Rafael Topasi's solution posted in the comment above in his jsFiddle. All I did was add the functionality that you outlined in your question, which was to disable the first text input field and make it so that second input field is equal to the first input field when the select option changes.

jsFiddle Example

//StackOverflow Solution: http://stackoverflow.com/questions/32238975/two-textbox-same-value-in-jquery
//Disable Input: http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery
//Source: http://jsfiddle.net/nafnR/727/ by Rafael Topasi
//08-26-2015
$(document).ready(function() {
  $("input#first-textbox").prop('disabled', true);
  //$("input").prop('disabled', false);
  $("#selectbox option").filter(function() {
    return $(this).val() == $("#first-textbox").val();
  }).attr('selected', true);

  $("#selectbox").on("propertychange change", function() {

    $("#first-textbox").val($(this).find("option:selected").attr("value"));
    $("#second-textbox").val($(this).find("option:selected").attr("value"));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="selectbox" name="name">
  <option value="">Please select...</option>
  <option value="Elvis">Elvis</option>
  <option value="Frank">Frank</option>
  <option value="Jim">Jim</option>
</select>
<input type="text" id="first-textbox" name="firstname" value="Elvis" oninput="document.getElementById('second-textbox').value=this.value">
<input id="second-textbox" type="text" name="firstname" value="">

Two textbox same value in jquery?

5 Answers5