Change input value based on select input

Question

The following script should do:

When a value is entered in the input, the outcome (in an other div) should be multiplied with a number. This number changes, when other select option is chosen.

Code

$('#dePlooi').change(function(){
 if ($("#dePlooi").val() == "2") {
   $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 2.5;  
    $("#dom_element").text(valuemath);   
});
 } 
 else if ($("#dePlooi").val() == "3") {
   $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 3;  
   $("#dom_element").text(valuemath);    
   });
 } else if ($("#dePlooi").val() == "1") {
     $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 2;  
   $("#dom_element").text(valuemath);    
   });
 }
});

This works a little, but only if a select option is chosen and then the input is changed. I want it to happen this way but ALSO it needs to change the input on select option change. So for example:

How do I make it so that when the input or the select option is changed, the event fires?

Fiddle: http://jsfiddle.net/eJvMb/

Sam P · Accepted Answer · 2014-05-28 11:24:54Z

2

It is much easier to simply bind two events, one for on select change and one for on keyup.

var multiplier = 1;

// bind keyup
 $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * multiplier;  
    $("#dom_element").text(valuemath);   
});

$('#dePlooi').change(function(){
    multiplier = $(this).val();
    $("#txt_name").trigger("keyup");
});

Take a look at this JSFiddle.

answered May 28, 2014 at 11:24

Sam P

1,84114 silver badges27 bronze badges

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

Comments

Najib · Accepted Answer · 2014-05-28 11:46:36Z

1

try this

jQuery(document).ready(function ($) {
    var ploVal=0;
    var textVal=0;

    $('#dePlooi').change(function(){
     ploVal=this.value;
        calculate();
        //$("#dom_element").text(tot);
    });
     $("#txt_name").on("keyup change", function() {

         var textVal=this.value;

          calculate();
    });

    function calculate()
    {
        ploVal=$("#dePlooi").val();
    textVal=  $("#txt_name").val();  
          var tot=ploVal * textVal;
        $("#dom_element").text(tot);
        //alert($("#dePlooi").val());
    }

});

answered May 28, 2014 at 11:46

Najib

5302 silver badges8 bronze badges

Comments

Akhlesh · Accepted Answer · 2014-05-28 11:25:30Z

0

Use on event for this

 $(document).on("change","#dePlooi,#txt_name",function(){
    var value = $("#txt_name").val(),
    valuemath = value *  $("#dePlooi").val();  
    $("#dom_element").text(valuemath); 
 });

Jsfiddle

answered May 28, 2014 at 11:25

Akhlesh

2,3991 gold badge16 silver badges23 bronze badges

Comments

Tushar Dave · Accepted Answer · 2014-05-28 11:37:14Z

0

Why don`t You try this simple code:

<input type="text" id="txt_name"  class="testclass" />

<select id="dePlooi" name="dePlooi" class="testclass">
    <option value="0">Choose</option>
     <option value="1">x2</option>
     <option value="2">x2.5</option>
    <option value="3">x3</option>
</select>

<div id="dom_element">-</div>

Script:

$('.testclass').change(function(){
    if($('#dePlooi').val()=="0" ||$.trim($('#txt_name').val())==""){
        $('#dom_element').html("");
    }else{
        var valueToFill=parseInt($('#dePlooi').val())*parseInt($.trim($('#txt_name').val()));
        $('#dom_element').html(valueToFill);    
    }
});

JSFiddle

answered May 28, 2014 at 11:37

Tushar Dave

2201 silver badge5 bronze badges

Comments

Ishan Jain · Accepted Answer · 2014-05-28 11:47:54Z

No need to bind the keyup event every time when the drop-down options is changed.

You can achieve your goals, simply binding the keyup and change separately.

Try this:

// Bind "keyup" event on textbox
    $("#txt_name").on("keyup change", function() {      
       var value = this.value;
        var valuemath = 0;
        if($('#dePlooi').val() > 0){    
          value = value * parseFloat($("#dePlooi option:selected").text().replace("x",""));  
        }
        $("#dom_element").text(valuemath);   
    });

// Bind "change" event on textbox
    $('#dePlooi').change(function(){   
        if($("#txt_name").val().trim() != ""){
            var value = $("#txt_name").val().trim();
            var valuemath = 0;
            if($(this).val() > 0){ 
              value = value * parseFloat($("#dePlooi option:selected").text().replace("x",""));  
            }
            $("#dom_element").text(valuemath);
        }
    });

Working Example

Collectives™ on Stack Overflow

Change input value based on select input

Code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related