Question

我正在尝试实现简单的数据流，但必须有一些我没有得到的东西。

我有一个有n行的表。
每一行都有自己的表单，其中包含提交按钮和隐藏输入。
我希望用户点击按钮并显示提示。
在此提示中，他可以插入日期。
插入日期后，隐藏的输入值为所选日期，表格已提交。

这是我使用的代码没有任何成功：

<td>
    <form id="form_{{ document.id }}" class="form-fattura-saldata" action="my-file.php" method="post">
        <input type="hidden" class="data-pagamento" name="data-pagamento" value="">
        <button class="btn btn-default fattura_saldata" type="submit">Saldata</button>
    </form>
</td>

和jquery代码：

var saldataFatturaChange = function(event) {
    event.preventDefault();
    var prompt = bootbox.prompt("Confermare la data di pagamento", function(result) {
        if (result === null) {
        } else {
            $('.data-pagamento').val(result);
        }
    });
    $('.bootbox-input').daterangepicker({
        startDate: new Date(),
        format: 'DD/MM/YYYY',
        singleDatePicker: true
    });
};

$('.form-fattura-saldata').each(function() {
    $(this).on('submit', saldataFatturaChange);
});

主要问题是我可以阻止提交操作，但后来我不知道如何重新汇总该表单。我不知道在用户选择日期后如何分配该表单隐藏输入的值。

非常感谢任何帮助。

P.S。我正在使用bootstrap，但这根本不相关。

Answer 1

这就是我解决问题的方法：

var saldataFatturaChange = function(event) {
    event.preventDefault();
    var currentTarget = event.target;
    var prompt = bootbox.prompt("Confermare la data di pagamento", function(result) {
        if (result === null) {
        } else {
            $(currentTarget).find('.data-pagamento').val(result);
            currentTarget.submit();
        }
    });
    $('.bootbox-input').daterangepicker({
        startDate: new Date(),
        format: 'DD/MM/YYYY',
        singleDatePicker: true
    });
};

$('.form-fattura-saldata').each(function() {
    $(this).on('submit', saldataFatturaChange);
});

简单地说，该事件有一个event.target，它是被触发事件的目标。这很容易实现。

Answer 2

要发送数据，请使用ajax：

$.ajax({
url: "script.php",
type: "POST",
data: $("#myForm").serialize(),
success: function(){
    alert('success');
  }
});

在event.preventDefault之后恢复提交

2 个答案: