提交时Javascript更改隐藏字段

Javascript change hidden field on submit

本文关键字：隐藏 字段 Javascript 提交      更新时间：2023-09-26

嗨，我正试图在我的网站上安装一个商家设施，它需要提交一个价值$vpc_Amount，这是以美分为单位购买的金额。

我需要做的是将用户输入的金额（$amount）乘以100，得到$vpc_amount。

我尝试了以下操作，但不起作用。

<input type="text" ID="A1" name="amount"onkeypress="process1()">
<input type="hidden" id="A2" name="vpc_Amount">

然后是javascript

function process1() {
    f1 = document.getElementById("A1").value;
    total = f1*1000;
    document.getElementById("A2").value = total;
}

现在的情况是，它偶尔会起作用，但大多数时候都不起作用。我知道剧本有问题，所以在这里询问。

尝试使用onkeyup函数-

<input type="text" id="A1" name="amount" value="" onkeyup="process1();" />
<input type="hidden" id="A2" name="vpc_Amount" />

javascript函数-

function process1() {
    var f1 = document.getElementById("A1").value;
    var total = (f1 * 100);
    document.getElementById("A2").value = total;
}

使用Jquery。http://jquery.com/

$(function() {
    $('#form_id').submit(function(){
        $('#form_id').find('#A2').val('New value');
        return true;
    });
});

您尝试过使用onkeyup事件吗？可能是在字符添加到文本字段之前触发了onkeypress事件。

<input type="text" ID="A1" name="amount" onkeyup="process1()">

此外，我建议您尝试将文本字段的值转换为integer，并添加其他输入处理。用户可能会在那里输入任何类型的数据，这可能会导致javascript代码崩溃。

此代码应该可以工作：

document
  .getElementById('A1')
  .addEventListener('keyup', function (e) {
    document.getElementById('A2').value = parseInt(this.value) * 1000;
  })

keypress事件在文本字段中的值更改之前触发，keyup事件在值更改之后触发。

基本上按顺序触发事件：

  • keydown（按下键）
  • keypress（按键）
  • keyup（打开键盘）

强制value为整数，否则在某些情况下会得到NaN。

如果不使用jquery，如果您想使用内置属性监听器，我建议使用onblur这是最好的方法。以下是示例：

  <!DOCTYPE html>
  <html>
  <body>
  Enter your name: <input type="text" id="fname" onblur="myFunction()">
  <p>When you leave the input field, a function is triggered which transforms the input             text to upper case.</p>
  <script>
  function myFunction() {
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();
  }
  </script>
  </body>
  </html>

w3学校示例的url：）http://www.w3schools.com/jsref/event_onblur.asp

首先，我认为应该使用onkeyup事件，而不是onkeypress

<input type="text" id="A1" name="amount" onkeyup="process1()" value="" />
<input type="hidden" id="A2" name="vpc_Amount" value="" />

Javascript代码-

function process1() {
    var f1 = parseFloat(document.getElementById("A1").value);
    var total = f1*100; //you said 100 so, I changed to 100
    document.getElementById("A2").value = total;
}

jQuery代码相同-

jQuery(document).ready(function($){
    $("#A1").keyup(function(){
     var total = parseFloat($("#A1").val()) * 100;
    $("#A2").val(total);
  });
});

您的代码可以通过以下事实来简化：表单控件可以作为表单名称的命名属性使用。这消除了向必须具有名称的表单控件添加ID的要求。

将引用传递到侦听器中的控件：

<input type="text" name="amount" onkeyup="process1(this)">
<input type="hidden" name="vpc_Amount">

然后使用传递的引用获取表单和其他控件：

function process1(element) {
    element.form.vpc_Amount.value = element.value * 100;
}

您可能希望使用更改事件来避免在用户键入时不必要地更新隐藏字段，并捕捉非基于按键的更改（例如从上下文菜单粘贴）。

您还应该对输入的值进行一些验证，这样用户就不会试图发送带有无效值的表单（请注意，您还必须在服务器上进行验证，因为客户端验证很有帮助，但完全不可靠）。

相关文章：