Multiply Every Input value Inside Form by 7 using JavaScript

by

I am trying to multiply every Input value inside Form by 7 to make it a weekly data and 30 to make it monthly data on select from drop down.

My form is very big so I can’t do it one by one.

<select name="result_time" class="custom-select type" id="result_time" onChange=selectChange(this.value)>
          <option class="daily" value="Daily" selected="selected">Daily</option>
          <option class="weekly" value="Weekly">Weekly</option>
          <option class="monthly" value="Monthly">Monthly</option>
</select>
<form>
    <input type="text" class="form-control" readonly/>
     <input type="text" class="form-control" readonly/>
     <input type="text" class="form-control" readonly/>
     <input type="text" class="form-control" readonly/>
     ........ 
</form>

I tried this:

<script>
    function selectChange(val) {
        if(val == 'Weekly'){
            /* multiply every input by 7 */
            $('input').val(parseInt('input').val() * 7)
            /* I know it's not right but it turns all my input to same value */
        }
    }
</script>

Also I don’t want to multiply 7 every time user select weekly. How can achieve it in Form?

2 thoughts on “Multiply Every Input value Inside Form by 7 using JavaScript”

  1. function selectChange(val) {

        if(val == 'Weekly'){
           $('input').each(function(){
           $(this).val(parseInt($(this).attr('data-oldVal'))*7);
            });
            
        }


       if(val == 'Monthly'){
           $('input').each(function(){
           $(this).val(parseInt($(this).attr('data-oldVal'))*30);
            });
            
        }
        
         if(val == 'Daily'){
           $('input').each(function(){
           $(this).val(parseInt($(this).attr('data-oldVal')));
            });
            
        }


    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="result_time" class="custom-select type" id="result_time" onChange=selectChange(this.value)>
          <option class="daily" value="Daily" selected="selected">Daily</option>
          <option class="weekly" value="Weekly">Weekly</option>
          <option class="monthly" value="Monthly">Monthly</option>
</select>
<form>
    <input type="text"  value='1' data-oldVal='1' class="form-control" readonly/>
     <input type="text" value='2' data-oldVal='2' class="form-control" readonly/>
     <input type="text" value='3' data-oldVal='3' class="form-control" readonly/>
     <input type="text" value='4' data-oldVal='4' class="form-control" readonly/>
     ........ 
</form>
    Reply

  2. You can use each loop to iterate through inputs and only get value from particular inputs and make changes there.

    Demo Code :

    function selectChange(val) {
  var value = 0
  if (val == 'Weekly') {
    value = 7
  } else if (val == 'Monthly') {
    value = 30
  } else {
    value = 1
  }
  //use each loop
  $("input").each(function() {
    //use data-old here 
    $(this).val(parseInt($(this).data('old')) * value)
  })
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="result_time" class="custom-select type" id="result_time" onChange=selectChange(this.value)>
  <option class="daily" value="Daily" selected="selected">Daily</option>
  <option class="weekly" value="Weekly">Weekly</option>
  <option class="monthly" value="Monthly">Monthly</option>
</select>
<form>
  <!--use data attr to save old values -->
  <input type="text" class="form-control" data-old="2" value="2" readonly/>
  <input type="text" class="form-control" data-old="4" value="4" readonly/>
  <input type="text" class="form-control" data-old="3" value="3" readonly/>
  <input type="text" class="form-control" data-old="2" value="2" readonly/>
</form>
    Reply

Leave a Comment