Multiply Every Input value Inside Form by 7 using JavaScript

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