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

【问题标题】：Multiply Every Input value Inside Form by 7 using JavaScript使用 JavaScript 将表单内的每个输入值乘以 7
【发布时间】：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 -- 都是相同的值。您没有在输入上设置任何值，也没有对每个输入进行迭代。

标签： javascript html jquery forms

【解决方案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>

【讨论】：