使用 JavaScript 将表单内的每个输入值乘以 7

Posted 2023-05-09

【中文标题】使用 JavaScript 将表单内的每个输入值乘以 7

【英文标题】：Multiply Every Input value Inside Form by 7 using JavaScript

【发布时间】：2021-05-22 02:21:59

【问题描述】：

我正在尝试将 Form 中的每个 Input 值乘以 7 以使其成为 weekly 数据和 30 以使其成为 select 上的月度数据。

我的表格很大，一张一张做不出来。

<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>

我试过了：

<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>

我也不想每次用户每周选择时都乘以 7。如何在Form中实现呢？

【问题讨论】：

当然 - 7 * 0 = 0 -- 都是相同的值。您没有在输入上设置任何值，也没有对每个输入进行迭代。

【参考方案1】：

您可以使用each 循环遍历输入，仅从特定输入中获取值并在那里进行更改。

演示代码：

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>

【参考方案2】：

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>