CODEWITHSUNDEEP
javascriptjquery
Niek95
Niek95

Reputation: 53

Change input value based on select input

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/

Upvotes: 0

Views: 2304

Answers (5)

Ishan Jain
Ishan Jain

Reputation: 8161

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

Upvotes: 0

Najib
Najib

Reputation: 510

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());
    }

});

Upvotes: 1

Tushar Dave
Tushar Dave

Reputation: 220

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

Upvotes: 0

Akhlesh
Akhlesh

Reputation: 2399

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

Upvotes: 0

Sam P
Sam P

Reputation: 1841

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.

Upvotes: 2

Related Questions