2

No Meu projeto tenho três formularios sendo um independente do outro. O form1, form2 e form3. O form1 consta campos obrigátorios para ser preenchido, sendo que esses dados serão necessarios para gerar as informações dos outros dois forms. Portanto segue o meu problema, como posso fazer para verificar se o form1 foi preenchido na hora que eu faço o submit pelo form2 ou form3? Eu consegui tratar isso com PHP, na hora que chega na pagina PHP eu faço um isset no POST para ver se os dados do form1 veio também, só que preciso que esse trabalho seja realizado no lado do cliente.

<form class="form-horizontal" id="FormInfObg" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
    <input type="text" class="form-control" name="nome" placeholder='<?php if(isset($_POST['nome'])){$_SESSION['nome']=$_POST["nome"];echo $_SESSION['nome'];}else{ echo "Nome Completo";}?>'>
    <input type="text" class="form-control" name="cargo" placeholder='<?php if(isset($_POST['cargo'])){$_SESSION['cargo']=$_POST["cargo"];echo $_SESSION['cargo'];}else{ echo "Cargo";}?>'>
    <button class="btn btn-default" name="btnSalvar" value="btnSalvar">Salvar <span class="fa fa-floppy-o"></span></button>
</form>

 <form class="form-horizontal" id="Form2" action="proc.php" method="POST">
    <input type="text" class="form-control" name="filial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm2">Enviar</button>
</form>

<form class="form-horizontal" id="Form3" action="proc.php" method="POST">
    <input type="text" class="form-control" name="nSerial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm3">Enviar</button>
</form>
4
  • Pelo que você está dizendo, precisa fazer o POST dos FORMs via Ajax, mas para apresentar a melhor forma você precisa postar o conteúdo da sua página na pergunta... Commented 9/11/2016 às 13:11
  • Pronto, ve se ajuda.
    – lkzvieira
    Commented 9/11/2016 às 13:25
  • O primeiro form precisa ser salvo antes ou só preenchido e irá salvar de uma vez? Commented 9/11/2016 às 13:31
  • Precisa ser salvo antes. Para não ter situação de o usuario fazer o submit dos outros dois forms sem ter preenchido o form1
    – lkzvieira
    Commented 9/11/2016 às 13:48

3 Respostas 3

0

Bom se você tem 2 forms e eles dependem do form1, sugiro que coloque os dados do form1 em hidden fields nos 2 forms...

Imagino que o fluxo seja este...

1° usuário preenche os dados no form1

2° usuário clica *(em algum botão, para salvar no servidor ou para dar continuidade)

3° dependendo dos dados que foram inseridos o usuário é redirecionado para o form2 ou form3

4° os dados do form1 são setados em <input type="hidden" name="dado_do_form1"/> via javascript no form que foi redirecionado

5° usuário preenche os dados restantes do form2 ou form3 e envia para servidor

6° servidor verifica os dados recebidos

Se você tiver 2 forms e der submit em 1 deles, os dados do outro form não será enviado.

2
  • Já fiz esse tipo de verificação, quando ele chega na pagina PHP verifica se os dados do form1 foram enviados, se não retorna para o HTML. Só que quando ele retorna para o HTML, os dados preenchidos somem após o submit.
    – lkzvieira
    Commented 9/11/2016 às 13:45
  • Se você tiver 2 ou mais forms e der submit em 1 deles os dados dos outros forms não serão enviados. O que você precisa fazer é no form1 fazer 1 button normal e jogar uma acção no click dele para preencher os dados dos hidde camp no form seguinte. Commented 10/11/2016 às 16:38
0

Você pode validar no evento submit do formulário, e caso o usuário não tenha preenchido os valores do primeiro, o segundo não será submetido.

$("#form2").submit(function(event) {
  event.preventDefault();      

  if (!validarForm1())
    alert("Primeiro preencha o primeiro formulário");
  else {
    // post por ajax do segundo formulário
  }

});

$("#form3").submit(function(event) {
 // faca a mesma coisa 
});

function validarForm1(){
    var form1Campo1 = $("#form1Campo1").val(),
        form1Campo2 = $("#form1Campo2").val();

    if (!form1Campo1 || !form1Campo2)
        return false;
    else
        return true;
}

JSFiddle: https://jsfiddle.net/lbclucascosta/xyLrx3eg/2/

3
  • Ai eu teria que fazer um evento desse para cada form? Por exemplo, $("#form3").submit(function(event) { ..}); Isso?
    – lkzvieira
    Commented 9/11/2016 às 13:50
  • mas eu chamo aonde essa função? No botão ou no formulario? Por exemplo, <form onsubmit="return validarForm1()"> ou <button class="btn btn-default" onclick="validarForm1()">
    – lkzvieira
    Commented 9/11/2016 às 14:04
  • Eu coloquei ela dentro do evento submit, aqui: if (!validarForm1()). Note que ali ela está sendo invocada.
    – BrTkCa
    Commented 9/11/2016 às 14:08
0

Para não ter situação de o usuário fazer o submit dos outros dois forms sem ter preenchido o form1

validação com Jquery - realizado no lado do cliente

Faça que todos os buttons com a classe btn disparem um evento.

OBS: coloque ids nos inputs do primeiro formulario txt_1 e txt_2

$(document).ready(function(){
    $(".btn").click(function(e) {
        if($("#txt_1").val()== "" || $("#txt_2").val() ==""){

            //aqui você decide, pode ser um alerta, mudar a cor de fundo dos inputs, as bordas etc..
            alert('Campos vazios');  
            if($("#txt_1").val()== ""){
                $('#txt_1').css("background-color", "#FA8258");
            }else{
                $('#txt_1').css("background-color", "Aquamarine");
            }
            if($("#txt_2").val()== ""){
                $('#txt_2').css("background-color", "#FA8258");
            }else{
                $('#txt_2').css("background-color", "Aquamarine");
            }

            e.preventDefault();//evito o submit do form ao apertar o enter..    
            return false;
        }
    });

});

Exemplo completo para quando retornar para o HTML, os dados preenchidos NÃO sumirem após o submit. Comentários no código

<?php
session_start();

//cria as sessions para preencher os values dos inputs no submit do form
if(isset($_POST['nome'])){
    $_SESSION['nome']=$_POST["nome"];
}
if(isset($_POST['cargo'])){
    $_SESSION['cargo']=$_POST["cargo"];
}

?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(e) {
        if($("#txt_1").val()== "" || $("#txt_2").val() ==""){

            //aqui você decide, pode ser um alerta, mudar a cor de fundo dos inputs, as bordas etc..
            alert('Campos vazios');  
            if($("#txt_1").val()== ""){
                $('#txt_1').css("background-color", "#FA8258");
            }else{
                $('#txt_1').css("background-color", "Aquamarine");
            }
            if($("#txt_2").val()== ""){
                $('#txt_2').css("background-color", "#FA8258");
            }else{
                $('#txt_2').css("background-color", "Aquamarine");
            }

            e.preventDefault();//evitar o submit do form ao apertar o enter..    
            return false;
        }
    });

});
</script>

<!-- ##  Você deve usar o atributo value para definir o valor enviado pelos inputs e ao retornar preenche-lo com o valor da session ## -->

<form class="form-horizontal" id="FormInfObg" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
    <input type="text" class="form-control" name="nome" id="txt_1" value='<?php  echo $_SESSION['nome'] ?>' placeholder='Nome Completo'>
    <input type="text" class="form-control" name="cargo" id="txt_2" value='<?php  echo $_SESSION['cargo'] ?>' placeholder='Cargo'>
    <button class="btn btn-default" name="btnSalvar" value="btnSalvar">Salvar <span class="fa fa-floppy-o"></span></button>
</form>

 <form class="form-horizontal" id="Form2" action="proc.php" method="POST">
    <input type="text" class="form-control" name="filial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm2">Enviar</button>
</form> 

<form class="form-horizontal" id="Form3" action="proc.php" method="POST">
    <input type="text" class="form-control" name="nSerial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm3">Enviar</button>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .