How to submit form data by JavaScript and redirect

1

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

link

    
asked by anonymous 22.08.2017 / 20:06

2 answers

2
The swal() method has an overload that gets a function , which executes the action after clicking the "Ok" button

Here's an example using the library you use, Sweet Alert

 setTimeout(function() {
            swal({
              title: "Sucesso!",
              text: "Alterações salvas com êxito",
              type: "success"
            }, function() {
              window.location = "redirectURL";
            });
          }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

Javascript:

$().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); } }

html:

<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>
    
22.08.2017 / 20:30
1

use the setTimeout function, the message will appear and after a while, in case 2 seconds (2000) will redirect to your page.

window.setTimeout("location.href='http://seusite.com'", 2000);
    
22.08.2017 / 20:24