How to pass Bootstrap Modal form data to Spring Boot controller - mysql

Question

If I have a pop up, opened using Bootstrap Modal, and in this i have a form where i can put data, how can I pass this data to a Spring controller to update my sql DB?

Answer 1

I had the same issue and i find the solution using ajax, because every time you submit the values your page is refreshed and the modal is closed.
Here is my modal form:
<!-- Modal -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Iniciar sesion</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form id="login-form" action="${contextPath}/j_spring_security_check" method="POST" name="loginForm">
<div class="form-group">
<label for="usrname" ><span class="glyphicon glyphicon-user"></span> Correo</label>
<input type="text" class="form-control" name="correo" id="correo">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Contraseña</label>
<input type="password" class="form-control" name="password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<div class="form-group">
<button type="submit" id="loginBtn" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Iniciar sesion </button>
</div>
</form>
<hr/>
<div id="errorMsg">${error}</div>
</div>
<div class="modal-footer">
<p>¿No tenes cuenta? Registrate</p>
<p>Olvidates tu contraseña?</p>
</div>
</div>
</div>
</div>
Ajax call:
$('#login-form').on('submit', function(event){
var self = this;
var form = $(this);
var errorMsg = $('#errorMsg');
if (form.data('requestRunning')) {
return;
}
form.data('requestRunning', true);
event.preventDefault();
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
data: form.serialize(),
success: function(result){
console.log(result.login);
if(result.login == undefined){
self.submit();
}else{
errorMsg.text(result.login.FAILURE).addClass("alert alert-danger");
agitar('#errorMsg');
}
},
complete: function (e) {
form.data('requestRunning', false);
}
});
});
Here i'm using spring-security to validate my user login, but if you only want to update your DB, in the form action you can put the url that you want to use to call your controller i.e: "/updateDB" and declare a controller i.e:
#RequestMapping("/updateDB", method=RequestMethod.POST)
public String updateDB(#ModelAttribute("dataToUpdate")DataToUpdate dataToUpdate){
//do whathever you want
}
Hope this help!