CODEWITHSUNDEEP
javascriptjquery
ubuntujavy
ubuntujavy

Reputation: 55

Change element value based on option select issue

I want to change the text of a div based on the option select of another div. The script that I have below doesn't work. Can anyone help?

<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text"/>
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

Script:

$("[name='form']").change(function(){ 
    if($(this).find('option:selected').text().trim() == 'Form 1') {
      $('#amount').text("450");
    }
    if($(this).find('option:selected').text().trim(); == 'Form 2') {
      $('#amount').text("400");
    }
    if($(this).find('option:selected').text().trim(); == 'Form 3') {
      $('#amount').text("900");
    }
});

Upvotes: 0

Views: 43

Answers (3)

baao
baao

Reputation: 73211

Give your options a value, then use that - there's no reason for a single if, nor for confusing code:

$('#selection').change(function() {
  $('#amount').text($(this).val());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selection" class="floatLabel" name="form">
    <option value="450">Form 1</option>
    <option value="400">Form 2</option>
    <option value="900">Form 3</option>
  </select>
<div id="amount">

</div>

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

instead of 

$(this).val()

use

$(this).find('option:selected').text();  
// you may need to use .trim to avoid white spacses
$(this).find('option:selected').text().trim();

Explanation

by using $(this).val() you will get the value of option that mean your code should be like this

<select class="floatLabel" name="form">
    <option value="Form 1">Form 1</option>
    <option value="Form 2">Form 2</option>
    <option value="Form 3">Form 3</option>
</select>

but while you didn't set the values for option you need to get the selected option text by using 

$(this).find('option:selected').text()

and for input you need to use .val() instead of .text() so you need to use 

$('#amount').val();

Demo 

$("[name='form']").change(function(){
    var option_text = $(this).find('option:selected').text().trim();
    if( option_text == 'Form 1') {
      $('#amount').val("450");
    }
    if( option_text == 'Form 2') {
      $('#amount').val("400");
    }
    if( option_text == 'Form 3') {
      $('#amount').val("900");
    }
}).change(); // use .change() if you need to run the change event on load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text"/>
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

Upvotes: 2

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

$("[name='form']").change(function() {
  if ($(this).val() == 'Form 1') {
    //$('#amount').text("450");
    $('#amount').val("450");

  }
  if ($(this).val() == 'Form 2') {
    //$('#amount').text("400");
    $('#amount').val("400");

  }
  if ($(this).val() == 'Form 3') {
    $('#amount').val("900");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-wrap">
  <input id="amount" class="floatLabel" name="amount" type="text" />
  <label for="amount">Fee</label>
</div>
<div class="field-wrap">
  <i class="fa fa-sort"></i>
  <select class="floatLabel" name="form">
    <option>Form 1</option>
    <option>Form 2</option>
    <option>Form 3</option>
  </select>
</div>

Instead of $('#amount').text("450");, use $('#amount').val("450");. Similarly do for other options.

Upvotes: 1

Related Questions