javascript - commit() jquery 方法在 Firefox 中无法正常工作

Question

我有一个表单，在某些情况下，在提交之前我想修改输入的值。我使用 Jquery 执行此操作:

$('#form').submit(function (ev) {
        ev.preventDefault();

        if($("#img").val() != "")
        {                       
            basic.croppie('result', {
                type: 'base64',
                size: {
                    width: 809,
                    height: 500
                },
                format: 'jpeg',
                quality: 0.8
            }).then(function (resp) {
                $("#imgModified").val(resp); 
            });
        }

        this.submit();
});   

在服务器端，在 Chrome 中，我得到“imgModified”的值，并且得到了正确的值，正如预期的那样。但在 Firefox 中，我得到空字符串。

我有 Firefox 55.0.3 和 Jquery 3.2.1

Answer 1

这是正常行为。如果您想通过监听提交事件来更改表单的任何值，则必须停止默认浏览器行为，即发送对您定义的操作的请求。 (事实上​​，浏览器在执行代码之前发送请求)。

然后您可以做您的事情并使用 JavaScript 重新提交表单。

尝试做:

$('#form').submit(function (e) {
    e.preventDefault();

    
    if($("#input1").val() != "")
    {     
        basic.croppie('result', {
            type: 'base64',
            size: {
                width: 809,
                height: 500
            },
            format: 'jpeg',
            quality: 0.8
        }).then(function (resp) {
            $("#imgModified").val(resp); 
            $('#form').unbind().submit();
        });
    } else {
      $('#form').unbind().submit();
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="/test" method="get">
  <label for="input1">Input 1</label>
  <input id="input1" name="input1" type="text">
  <label for="imgModified">Input 2</label>
  <input id="imgModified" name="input2" type="text">
  <button type="submit">submit</button>
</form>

更新:

这是我通过运行上述代码片段在 Firefox 上得到的结果:我的请求包含带有“tets”的 input1 和带有“value”的 input2。检查您的服务器端是否有任何问题。