resume submit after event.preventDefault

Question

I'm trying to achieve a simple data-flow but there must be something I'm not getting.

• I have a table with n rows.
• Each row has its own form that where is a submit button and an hidden input.
• I want the user click on the button and a prompt is displayed.
• In this prompt he can insert a date.
• After he inserted the date, the hidden input value is the selected date and the form is submitted.

This is the code I'm using without any success:

<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>

and the jquery code:

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);
});

The main problem is that I can prevent submit action but then I don't know how to re-sumbit that form. And I don't know how to assign the value of the hidden input of that form after the user has choose the date.

Any help would be greatly appreciated.

p.s. I'm using bootstrap, but this not relevant at all.

Answer 1

that's how I resolved the question:

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);
});

Simply, the event has a event.target that is the target of the event that is fired. This was really simple to achieve.

Answer 2

To send the data use ajax:

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