在更改时附加输入表单返回默认值

Posted 2023-05-09

【中文标题】在更改时附加输入表单返回默认值

【英文标题】：Append input form on change returns default value

【发布时间】：2021-06-17 21:08:57

【问题描述】：

我有一个单选框，在更改时会附加一个输入字段。但是即使在附加的输入框中输入内容，输入值也始终保持为 1000。请帮忙，过去两个小时我一直在努力解决这个问题。

$('.input-amount').change(function () 
            if ($(this).val() === "others") 
                var htmlInput = `<input type="number" class="form-control number-as" value="1000">`;
                $('.value-amount span').text('');
                $('.value-amount span').append(htmlInput);
            

  );

点击下面的按钮，我想加载输入字段中输入的数字，但它总是加载默认的 1000

  $('#srppaymenetbutton1').on('click', function()

    $(this).append('<div class="loader">Loading...</div>');
    var amount = $('.input-amount:checked').val();
    if (amount === "others") 
        amount = $(document).find('.number-as').val();
    

    alert(amount);
   .........

【问题讨论】：

无法复制：jsfiddle.net/RoryMcCrossan/fm1ud5ra。诚然，我根据所使用的 JS 方法对您的 HTML 做了一些假设。请编辑问题以包含该问题的工作示例。

同意@RoryMcCrossan，因为代码看起来不错......

@RoryMcCrossan 啊，我有你的结构。它对你有用，但对我不起作用：|

@pencil 为您的问题创建一个工作代码示例

还要检查 devtools 中的控制台是否有错误

【参考方案1】：

使用全局范围变量来存储最新插入的值。这里我使用了 input_amount

var input_amount = 1000
$('.input-amount').change(function() 
  if ($(this).val() === "others") 
    $('.value-amount span').html(`<input type="number" class="form-control number-as" value="$input_amount">`);
    listenValueChange();
  
);

function listenValueChange() 
  $(".number-as").change(function() 
    input_amount = $(this).val()
  )


$('#srppaymenetbutton1').on('click', function() 
  //$(this).append('<div class="loader">Loading...</div>');
  var amount = $('.input-amount:checked').val();
  if (amount === "others") 
    amount = $(document).find('.number-as').val();
  

  console.log(amount);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="radio" class="input-amount" name="amt" value="foo">foo
</label>
<label>
  <input type="radio" class="input-amount" name="amt" value="bar">bar
</label>
<label>
  <input type="radio" class="input-amount" name="amt" value="others">others
</label>

<div class="value-amount">
  <span></span>
</div>

<button id="srppaymenetbutton1">Payment</button>