I need to have my form send data to another page of the server so that it inserts into MySQL but redirects the user to another page but before it receives a message of success. However, for some reason, the message is not appearing.
Form + JS:
$().ready(function() {
function onFinish() {
//here you can do something, sent the form to server via ajax and show a success message with swal
var nomep = $("#nome");
var descricao = $("#descricao");
var ponto_minimo = $("#ponto_minimo");
var ponto_maximo = $("#ponto_maximo");
var quantidade = $("#quantidade");
var localizacao = $("#localizacao");
var categoria_id = $("#categoria_id");
var usuario = $("#usuario");
var data = $("#data");
var justificativa = $("#justificativa");
$.post("assets/php/alterar-produto.php", {
nome: nomep,
descricao: descricao,
ponto_minimo: ponto_minimo,
ponto_maximo: ponto_maximo,
quantidade: quantidade,
localizacao: localizacao,
categoria_id: categoria_id,
usuario: usuario,
data: data,
justificativa: justificativa
});
setTimeout(function() {
swal({
title: "Sucesso!",
text: "Alterações salvas com êxito",
type: "success"
}, function() {
window.location = "redirectURL";
});
}, 1000);
}
}
<form method="POST" action="#">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label>Nome</label>
<input type="text" placeholder="Insira um nome" class="form-control" value="<?=utf8_encode($produto['nome'])?>" name="nome">
</div>
</div>
</div>
...Demais campos...
</form>
Full Form:
<div class="content">
<form>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label>Nome</label>
<input type="text" placeholder="Insira um nome" class="form-control" value="<?=utf8_encode($produto['nome'])?>" name="nome">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label for="descricao">Descrição</label>
<textarea class="form-control" placeholder="Insira a Descrição" rows="3" name="descricao"><?=utf8_encode($produto['descricao'])?></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group">
<label>Ponto mínimo</label>
<input type="number" placeholder="Insira o Ponto mínimo" class="form-control" value="<?=utf8_encode($produto['ponto_minimo'])?>" name="ponto_minimo">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Ponto máximo</label>
<input type="number" placeholder="Insira o Ponto máximo" class="form-control" value="<?=utf8_encode($produto['ponto_maximo'])?>" name="ponto_maximo">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label>Quantidade</label>
<input type="number" placeholder="Insira uma quantidade" class="form-control" value="<?=utf8_encode($produto['quantidade'])?>" name="quantidade">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label>Localização</label>
<input type="text" placeholder="Insira o Local" class="form-control" value="<?=utf8_encode($produto['localizacao'])?>" name="localizacao">
</div>
</div>
</div>
<?php $categorias = listaCategorias($conexao); ?>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<select name="categoria_id" class="selectpicker" data-title="Categoria" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
<?php foreach($categorias as $categoria) :
$essaEhACategoria = $produto['categoria_id'] == $categoria['id'];
$selecao = $essaEhACategoria ? "selected='selected'" : "";
?>
<option value="<?=$categoria['id']?>" <?=$selecao?>>
<?=utf8_encode($categoria['nome'])?>
</option>
<?php endforeach ?>
</select>
</div>
</div>
<br/>
<input type="hidden" name="usuario" value="<?=$usuario?>">
<input type="hidden" value="<?=$data = date('Y-m-d H:i'); ?>" name="data">
<input type="hidden" value="<?=$produto['id']?>" name="id">
<hr>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<label for="justificativa">Justificativa</label>
<textarea class="form-control" placeholder="Insira a Justificativa" rows="3" name="justificativa" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 ">
<button type="submit" class="btn btn-fill btn-info center-block" onclick="onFinish()">Enviar</button>
</div>
</div>
</form>
Adding SweetAlert
<!-- Sweet Alert 2 plugin -->
<script src="assets/js/sweetalert2.js"></script>
link to what's in the SweetL file