CODEWITHSUNDEEP
javascriptjquery
Utpal Sarkar
Utpal Sarkar

Reputation: 432

run keyup function() and change function() both for get one result

I am trying to create a selecting option and a input field. When user select option1 and input 2 the result : 10(change with option)*2=20 . And if user change the selected option the result will be changed . I am trying to adjust the script with keyup function() and change function() but the change function() don't work :

$("#mytextfield").on('keyup change', function() {
  let getValue;

  if ($("#totaldays").children(":selected").attr("id") == 'a') {
    getvalue = 10;
  }

  if ($("#totaldays").children(":selected").attr("id") == 'b') {
    getvalue = 20;
  }
  if ($("#totaldays").children(":selected").attr("id") == 'c') {
    getvalue = 30;
  }

  var total = getvalue * $(this).val()
  $(".total").html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="totaldays">
        <option id="a">option 1</option>
        <option id="b">option 2</option>
        <option id="c">option 3</option>
    </select>
<input type="text" name="per_day" id="mytextfield" value="" />
<p>Total: <span class="total"></span></p>

Upvotes: 1

Views: 2239

Answers (3)

Sushanth --
Sushanth --

Reputation: 55740

var $dropdown = $('#totaldays');
 var $input = $('#mytextfield');

$dropdown.on('change', calculateCount);

$input.on('keyup change', calculateCount);

function calculateCount() {
  var dropDownValue = $dropdown.find('option:selected').attr('id');
  var inputValue = parseInt($input.val(), 10);
  var getvalue = 10;

  if (dropDownValue === 'b') {
    getvalue = 20;
  } else if ( dropDownValue === 'c') {
    getvalue = 30;
  }

  var total = getvalue * inputValue;

  $(".total").html(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="totaldays">
        <option id="a">option 1</option>
        <option id="b">option 2</option>
        <option id="c">option 3</option>
    </select>
<input type="text" name="per_day" id="mytextfield" value="" />
<p>Total: <span class="total"></span></p>

Associate a change handler to the dropdown. Also in your case just wrap your code in document.ready handler to make sure the events are bound after the document is ready.

$(function() {

    // Your code here

});

Upvotes: 2

jidexl21
jidexl21

Reputation: 619

You can also trigger the change of the other element: 

 $("#totaldays").on("change", function(){$("#mytextfield").trigger("change")})

Upvotes: 1

fjc
fjc

Reputation: 5815

You simply didn't listen to the change event on your select, but only to a change event on your input field. I extracted the event handler into a separate function and use it for both events:

function doStuff() {
    let getValue;

    if ($("#totaldays").children(":selected").attr("id") == 'a') {
        getvalue = 10;
    }

    if ($("#totaldays").children(":selected").attr("id") == 'b') {
        getvalue = 20;
    }
    if ($("#totaldays").children(":selected").attr("id") == 'c') {
        getvalue = 30;
    }
    var total = getvalue * $('#mytextfield').val()
    $(".total").html(total);
}
$("#mytextfield").on('keyup', doStuff);
$("#totaldays").on('change', doStuff);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="totaldays">
    <option id="a">option 1</option>
    <option id="b">option 2</option>
    <option id="c">option 3</option>
</select>
<input type="text" name="per_day" id="mytextfield" value="" />
<p>Total: <span class="total"></span></p>

Upvotes: 1

Related Questions