CODEWITHSUNDEEP
javascripthtml
user3181077
user3181077

Reputation: 313

how can i display selected value in input text box

I used in the above code two Select drop down and i put value for both and it is different need to display both place different content. please help how do i get correct and i am ok with if it is display as div or input or in button format.

<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
  <option value="">Select</option>
  <option value="RUB Dollar">RUB</option>
  <option value="AFN Dinaar">AFN</option>
  <option value="EUR Dollar">EUR</option>
</select>

<script>
  var select = document.getElementById('rupeeitems');
  var input = document.getElementById('txtval');
  select.onchange = function () {
    input.value = select.value;
  }
</script>
<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
  <option value="">Select</option>
  <option value="USD Dollar">USD</option>
  <option value="Euro Dollar">EUR</option>
  <option value="Aud Dollar">AUD</option>
  <option value="Bahrien ">BHD</option>
</select>
<script>
  var select = document.getElementById('cmbitems');
  var input = document.getElementById('txtprice');
  select.onchange = function () {
    input.value = select.value;
  }
</script>

Upvotes: 0

Views: 1002

Answers (3)

rags2riches-prog
rags2riches-prog

Reputation: 1761

Please, use the proper indentation next time. The code is hard to read when it is not formatted properly.

This issue is very simple to solve and you should look into const, let and var and their respective differences.

<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
  <select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
     <option value="">Select</option>
     <option value="RUB Dollar">RUB</option>
     <option value="AFN Dinaar">AFN</option>
     <option value="EUR Dollar">EUR</option>
  </select>
                                        

<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
  <select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
   <option value="">Select</option>
   <option value="USD Dollar">USD</option>
   <option value="Euro Dollar">EUR</option>
   <option value="Aud Dollar">AUD</option>
   <option value="Bahrien ">BHD</option>
  </select>

// place your scripts here
<script>

  // use descriptive variable names

  const cmbItems = document.getElementById('cmbitems');
  const txtPrice = document.getElementById('txtprice');

  const rupeeItem = document.getElementById('rupeeitems');
  const txtVal =  document.getElementById('txtval');

  // since you are using anonimous functions
  // if you browser allows, use ES6 syntax

  cmbItems.onchange  = () => txtPrice.value = this.value;
  rupeeItem.onchange = () => txtPrice.value = this.value;

</script>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You should be more specific about the variable names. Also, you can use this keyword to refer the current select element inside the function. Not sure why you are using the in-line event handler:

<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
  <option value="">Select</option>
  <option value="RUB Dollar">RUB</option>
  <option value="AFN Dinaar">AFN</option>
  <option value="EUR Dollar">EUR</option>
</select>

<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
  <option value="">Select</option>
  <option value="USD Dollar">USD</option>
  <option value="Euro Dollar">EUR</option>
  <option value="Aud Dollar">AUD</option>
  <option value="Bahrien ">BHD</option>
</select>
<script>
  var selectRupee = document.getElementById('rupeeitems');
  var inputRupee = document.getElementById('txtval');
  selectRupee.onchange = function() {
    inputRupee.value = this.value;
  }

  var selectCmb = document.getElementById('cmbitems');
  var inputCmb = document.getElementById('txtprice');
  selectCmb.onchange = function() {
    inputCmb.value = this.value;
  }
</script>

Upvotes: 1

Fantantonio
Fantantonio

Reputation: 427

As mentioned before in the commets by @Gabriel Lupu it's better for you to write all js code inside one <script> tag at the end of the page before <body> tag.

This code is working:

<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
    <option value="">Select</option>
    <option value="RUB Dollar">RUB</option>
    <option value="AFN Dinaar">AFN</option>
    <option value="EUR Dollar">EUR</option>
</select>

<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
    <option value="">Select</option>
    <option value="USD Dollar">USD</option>
    <option value="Euro Dollar">EUR</option>
    <option value="Aud Dollar">AUD</option>
    <option value="Bahrien ">BHD</option>
</select>

<script>
    var select = document.getElementById('rupeeitems');
    var input = document.getElementById('txtval');
    select.onchange = function () {
        input.value = select.value;
    }
    var select2 = document.getElementById('cmbitems');
    var input2 = document.getElementById('txtprice');
    select2.onchange = function () {
        input2.value = select2.value;
    }
</script>

You've to close the </select> properly and you've to use different names for the variables otherwise you are reassigning their values.

Upvotes: 0

Related Questions