Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button>
<!-- Modal -->
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Adicionar dados</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="usersform" method="post">
<input type="text" name="nome" id="nome"/>
<input type="email" name="email" id="email"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button>
<button type="submit" class="btn btn-success" id="submit" >ADD USER</button>
</form>
</div>
</div>
</div>
</div>
Abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:
<script>
$(document).on('submit', '#usersform', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
alert("Cadastro realizado com sucesso!");
$("#usersform")[0].reset();
$("#dataModal").modal('hide');
}
});
});
</script>
E por fim, o código do arquivo insert.php:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "system";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$nome = $_POST['nome'];
$email = $_POST['email'];
$sql = "INSERT INTO users (nome,email)
VALUES ('$nome', '$email')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos input $("#usersform")[0].reset(); após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
success
e por consequencia nao esconder a modal.success
alert("Cadastro realizado com sucesso!");
alert
aparece, então não há nenhum problema de Boostrap ou jQuery. Se as linhas abaixo doalert
não estão funcionando, realmente é um mistério, pois deveriam funcionar. O que pode estar havendo é algum tipo de conflito com outro código. Tente removendo a linha$("#usersform")[0].reset();
para ver se a modal é fechada.