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上获得的结果：我的请求包含input1我的“tets”和input2带有“value”。检查服务器端是否有任何问题。

Answer 2

问题是basic.croppie()会返回then()所指示的承诺。

Promise 异步。

在设置值

后，在then()内进行提交

$('#form').submit(function(ev) {
  ev.preventDefault();
  var form = this;
  if ($("#img").val() != "") {
    basic.croppie('result', {
      // options left out for clarity
    }).then(function(resp) {
      $("#imgModified").val(resp);
      // submit native method, will bypass jQuery submit listener
      form.submit();
    });
  }else{
    // submit without $("#img").val() ??
    form.submit();
  }
});

submit（）jquery方法在Firefox中无法正常工作

2 个答案: