I'm using Sweetalert2 to confirm and update some data. The style of the sweetalert combine with bootstrap v4 (alpha). The multiple form input is generated with HTML like this example. After getting input data, an ajax call is made to update it. Below is my example:
swal({
title: 'Submit to confirm',
html:
'<input id="swal-input1" placeholder="input1" class="form-control mb-1">' +
'<input id="swal-input2" placeholder="input2" class="form-control">',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
])
})
},
allowOutsideClick: false
}).then(function(email) {
$.ajax({
// ajax for post / get here to update current data with data from the input
});
}).catch(swal.noop)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/6.4.1/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.4.1/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
How to apply validations (empty form) with custom data and then make ajax call?