Send form according to active tab

Navigation
0

How can I submit a form based on the active Bootstrap tab, ignoring the validation of the unselected tab?

Example: I have a tab "A" with an "A1" form and some fields with required , and a "B" tab with a form "B1" with other required fields.

When you select the "B" tab and send the form "B1", do not validate the form fields "A1", only form "B1", sending the form data.

I have tried in some ways, however, or it does not send any form, or it keeps validating the non-active form.

Follow the code below: 

<div class="tab-content">
        <div role='tabpanel' class='tab-pane active' id='produto'>
            <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>">
            <div class="form-group col-md-12">
                <label for="solicitante">Solicitante</label>
                <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>">
            </div>
            <div class="form-group col-md-6">
                <label for="setor">Centro de Custo</label>
                <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
            </div>
            <div class="form-group col-md-6">
                <label for="filial">Filial</label>
                <select class="form-control" name="filial" id="filial" required>
                    <option>Selecione a filial</option>
                    <option value="Componentes">Componentes</option>
                    <option value="Metais">Metais</option>
                    <option value="Sistemas">Sistemas</option>
                </select>               
            </div>
            <div class="form-group col-md-12">
                <label for="descricao_prod">Descrição</label>
                <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea>            
            </div>
            <div class="form-group col-md-6">
                <label for="tipo_prod">Tipo</label>
                <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto">
            </div>
            <div class="form-group col-md-6">
                <label for="finalidade_prod">Finalidade</label>
                <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto">
            </div>
            <div class="row"></div>
            <div class="form-group col-md-6">
                <label for="armazem">Armazém</label>
                <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém">
            </div>
            <div class="form-group col-md-6">
                <label for="ncm">NCM</label>
                <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM">
            </div>
            <div class="form-group col-md-3">
                <label for="mov_estoque">Movimenta estoque?</label>            
                <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label>
                <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label>        
            </div>
            </form>
        </div>
        <div role='tabpanel' class='tab-pane' id='fornecedor'>
            <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>">
            <div class="form-group col-md-12">
                <label for="solicitante">Solicitante</label>
                <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>">
            </div>
            <div class="form-group col-md-6">
                <label for="setor">Centro de Custo</label>
                <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
            </div>
            <div class="form-group col-md-6">
                <label for="filial">Filial</label>
                <select class="form-control" name="filial" id="filial" required>
                    <option>Selecione a filial</option>
                    <option value="Componentes">Componentes</option>
                    <option value="Metais">Metais</option>
                    <option value="Sistemas">Sistemas</option>
                </select>               
            </div>
            <div class="form-group col-md-6">
                <label for="razao_social_forn">Razão Social</label>
                <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="nome_fantasia_forn">Nome Fantasia</label>
                <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="cnpj_forn">CNPJ</label>
                <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor">
            </div>
            <div class="form-group col-md-6">
                <label for="ie_forn">Inscrição Estadual</label>
                <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="tipo_forn">Tipo</label>
                <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor">
            </div>
            <div class='row'></div>
            <div class="form-group col-md-8">
                <label for="endereco_forn">Endereço</label>
                <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="bairro_forn">Bairro</label>
                <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor">
            </div>
            <div class="form-group col-md-4">
                <label for="cidade_forn">Cidade</label>
                <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="estado_forn">Estado</label>
                <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="pais_forn">País</label>
                <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="cep_forn">CEP</label>
                <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="tel_forn">Telefone</label>
                <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor">
            </div>                
            <div class="form-group col-md-4">
                <label for="email_forn">E-mail</label>
                <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor">
            </div>  
            </form>
        </div>
    </div>
    <div class="modal-footer col-md-12">        
        <button type="submit" class="btn btn-primary">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
    </div>
    
asked by anonymous 25.07.2016 / 17:24

2 answers

0

Here's a solution to your problem.
I added a small script to know which form we are giving submit . We could force submission via javascript but this would ignore its validation via HTML5 Here is the code: 

        var submit_master = "produduto";
        $("#nav-produto").click(function(){
            submit_master = "produduto";
        });
        $("#nav-fornecedor").click(function(){
            submit_master = "fornecedor";
        });

        $("#btn-master").click(function(){
            if (submit_master == "produduto") {
                $("#submit-produto").click();
            }else if(submit_master == "fornecedor"){
                $("#submit-fornecedor").click();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#produto" aria-controls="produto" role="tab" data-toggle="tab" id="nav-produto">produto</a></li>
        <li role="presentation"><a href="#fornecedor" aria-controls="fornecedor" role="tab" data-toggle="tab" id="nav-fornecedor">fornecedor</a></li>
    </ul>
    <div class="tab-content">
        <div role='tabpanel' class='tab-pane active' id='produto'>
            <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_solicitacao" value="">
                <div class="form-group col-md-12">
                    <label for="solicitante">Solicitante</label>
                    <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true">
                </div>
                <div class="form-group col-md-6">
                    <label for="setor">Centro de Custo</label>
                    <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
                </div>
                <div class="form-group col-md-6">
                    <label for="filial">Filial</label>
                    <select class="form-control" name="filial" id="filial" required>
                        <option>Selecione a filial</option>
                        <option value="Componentes">Componentes</option>
                        <option value="Metais">Metais</option>
                        <option value="Sistemas">Sistemas</option>
                    </select>               
                </div>
                <div class="form-group col-md-12">
                    <label for="descricao_prod">Descrição</label>
                    <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea>
                </div>
                <div class="form-group col-md-6">
                    <label for="tipo_prod">Tipo</label>
                    <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto">
                </div>
                <div class="form-group col-md-6">
                    <label for="finalidade_prod">Finalidade</label>
                    <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto">
                </div>
                <div class="row"></div>
                <div class="form-group col-md-6">
                    <label for="armazem">Armazém</label>
                    <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém">
                </div>
                <div class="form-group col-md-6">
                    <label for="ncm">NCM</label>
                    <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM">
                </div>
                <div class="form-group col-md-3">
                    <label for="mov_estoque">Movimenta estoque?</label>            
                    <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label>
                    <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label>        
                </div>
                <button id="submit-produto" class="hidden">ok</button>
            </form>
        </div>
        <div role='tabpanel' class='tab-pane' id='fornecedor'>
            <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_solicitacao" value="">
                <div class="form-group col-md-12">
                    <label for="solicitante">Solicitante</label>
                </div>
                <div class="form-group col-md-6">
                    <label for="setor">Centro de Custo</label>
                    <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante">
                </div>
                <div class="form-group col-md-6">
                    <label for="filial">Filial</label>
                    <select class="form-control" name="filial" id="filial" required>
                        <option>Selecione a filial</option>
                        <option value="Componentes">Componentes</option>
                        <option value="Metais">Metais</option>
                        <option value="Sistemas">Sistemas</option>
                    </select>               
                </div>
                <div class="form-group col-md-6">
                    <label for="razao_social_forn">Razão Social</label>
                    <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="nome_fantasia_forn">Nome Fantasia</label>
                    <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="cnpj_forn">CNPJ</label>
                    <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor">
                </div>
                <div class="form-group col-md-6">
                    <label for="ie_forn">Inscrição Estadual</label>
                    <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="tipo_forn">Tipo</label>
                    <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor">
                </div>
                <div class='row'></div>
                <div class="form-group col-md-8">
                    <label for="endereco_forn">Endereço</label>
                    <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="bairro_forn">Bairro</label>
                    <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor">
                </div>
                <div class="form-group col-md-4">
                    <label for="cidade_forn">Cidade</label>
                    <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="estado_forn">Estado</label>
                    <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="pais_forn">País</label>
                    <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="cep_forn">CEP</label>
                    <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="tel_forn">Telefone</label>
                    <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor">
                </div>                
                <div class="form-group col-md-4">
                    <label for="email_forn">E-mail</label>
                    <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor">
                </div> 
                <button id="submit-fornecedor" class="hidden"></button>
            </form>
        </div>
    </div>
    <div class="modal-footer col-md-12">        
        <button type="submit" class="btn btn-primary" id="btn-master">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
    </div>

I tested it here and it worked ok. Any doubts of a touch here.
Just to remember that if you put button for each form already solves the problem. I hope I have helped.

    
25.07.2016 / 18:00
0

When the tab is selected it contains tab-pane active instead of just tab-pane . So just do this: 

$('button[type="submit"]').on('click', function(){

    var modo = 'cad_'+$('.tab-content').find('.active').attr('id');
    $('form[name="'+modo+'"]').submit();

});

In this case when you click the button it will get the id of the element that contains active . The id will be produto , for example.

But the form contains the prefix cad_ in the value of name . So the variable modo inserts the cad_ , making cad_produto , for example, then it will send the form using .submit() .

Demonstration:

  

A alert() was entered for better viewing! 

$('button[type="submit"]').on('click', function(){

    var modo = 'cad_'+$('.tab-content').find('.active').attr('id');
    alert('Você enviou o formulário de ' + modo) 
    $('form[name="'+modo+'"]').submit();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav nav-tabs">
        <li class="col-xs-6 active"><a href="#produto" data-toggle="tab">Produto</a></li>
        <li class="col-xs-6"><a href="#fornecedor" data-toggle="tab">Fornecedor</a></li>
</ul>
          
<!-- SEU HTML : INALTERADO! -->
<div class="tab-content"> <div role='tabpanel' class='tab-pane active' id='produto'> <form action="form/acao_solicitacao.php?form=cad_produto" name="cad_produto" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>"> <div class="form-group col-md-12"> <label for="solicitante">Solicitante</label> <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>"> </div><div class="form-group col-md-6"> <label for="setor">Centro de Custo</label> <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante"> </div><div class="form-group col-md-6"> <label for="filial">Filial</label> <select class="form-control" name="filial" id="filial" required> <option>Selecione a filial</option> <option value="Componentes">Componentes</option> <option value="Metais">Metais</option> <option value="Sistemas">Sistemas</option> </select> </div><div class="form-group col-md-12"> <label for="descricao_prod">Descrição</label> <textarea class="form-control" name="descricao_prod" id="descricao_prod" required placeholder="Descrição do produto"></textarea> </div><div class="form-group col-md-6"> <label for="tipo_prod">Tipo</label> <input type="text" class="form-control" name="tipo_prod" id="tipo_prod" placeholder="Tipo do Produto"> </div><div class="form-group col-md-6"> <label for="finalidade_prod">Finalidade</label> <input type="text" class="form-control" name="finalidade_prod" id="finalidade_prod" placeholder="Finalidade do Produto"> </div><div class="row"></div><div class="form-group col-md-6"> <label for="armazem">Armazém</label> <input type="text" class="form-control" name="armazem" id="armazem" placeholder="Armazém"> </div><div class="form-group col-md-6"> <label for="ncm">NCM</label> <input type="number" class="form-control" name="ncm" id="ncm" required maxlength="8" placeholder="NCM"> </div><div class="form-group col-md-3"> <label for="mov_estoque">Movimenta estoque?</label> <label class="radio-inline"><input type="radio" id="mov_estoqueS" name="mov_estoque" value="S">Sim</label> <label class="radio-inline"><input type="radio" id="mov_estoqueN" name="mov_estoque" value="N">Não</label> </div></form> </div><div role='tabpanel' class='tab-pane' id='fornecedor'> <form action="form/acao_solicitacao.php?form=cad_fornecedor" name="cad_fornecedor" method="post" enctype="multipart/form-data"> <input type="hidden" name="id_solicitacao" value="<?php proximoIdSol(); ?>"> <div class="form-group col-md-12"> <label for="solicitante">Solicitante</label> <input type="text" class="form-control" name="solicitante" id="solicitante" readonly="true" value="<?php echo $_SESSION['nome_usuario'] ?>"> </div><div class="form-group col-md-6"> <label for="setor">Centro de Custo</label> <input type="text" class="form-control" name="setor" id="setor" required placeholder="Setor do solicitante"> </div><div class="form-group col-md-6"> <label for="filial">Filial</label> <select class="form-control" name="filial" id="filial" required> <option>Selecione a filial</option> <option value="Componentes">Componentes</option> <option value="Metais">Metais</option> <option value="Sistemas">Sistemas</option> </select> </div><div class="form-group col-md-6"> <label for="razao_social_forn">Razão Social</label> <input type="text" class="form-control" name="razao_social_forn" id="razao_social_forn" required placeholder="Razão Social do Fornecedor"> </div><div class="form-group col-md-6"> <label for="nome_fantasia_forn">Nome Fantasia</label> <input type="text" class="form-control" name="nome_fantasia_forn" id="nome_fantasia_forn" required placeholder="Nome Fantasia do Fornecedor"> </div><div class="form-group col-md-6"> <label for="cnpj_forn">CNPJ</label> <input type="text" class="form-control" name="cnpj_forn" id="cnpj_forn" required placeholder="CNPJ do Fornecedor"> </div><div class="form-group col-md-6"> <label for="ie_forn">Inscrição Estadual</label> <input type="text" class="form-control" name="ie_forn" id="ie_forn" required placeholder="Inscrição Estadual do Fornecedor"> </div><div class="form-group col-md-4"> <label for="tipo_forn">Tipo</label> <input type="text" class="form-control" name="tipo_forn" id="tipo_forn" required placeholder="Tipo do Fornecedor"> </div><div class='row'></div><div class="form-group col-md-8"> <label for="endereco_forn">Endereço</label> <input type="text" class="form-control" name="endereco_forn" id="endereco_forn" required placeholder="Endereço do Fornecedor"> </div><div class="form-group col-md-4"> <label for="bairro_forn">Bairro</label> <input type="text" class="form-control" name="bairro_forn" id="bairro_forn" required placeholder="Bairro do Fornecedor"> </div><div class="form-group col-md-4"> <label for="cidade_forn">Cidade</label> <input type="text" class="form-control" name="cidade_forn" id="cidade_forn" required placeholder="Cidade do Fornecedor"> </div><div class="form-group col-md-4"> <label for="estado_forn">Estado</label> <input type="text" class="form-control" name="estado_forn" id="estado_forn" required placeholder="Estado do Fornecedor"> </div><div class="form-group col-md-4"> <label for="pais_forn">País</label> <input type="text" class="form-control" name="pais_forn" id="pais_forn" required placeholder="País do Fornecedor"> </div><div class="form-group col-md-4"> <label for="cep_forn">CEP</label> <input type="text" class="form-control" name="cep_forn" id="cep_forn" required placeholder="CEP do Fornecedor"> </div><div class="form-group col-md-4"> <label for="tel_forn">Telefone</label> <input type="text" class="form-control" name="tel_forn" id="tel_forn" required placeholder="Telefone do Fornecedor"> </div><div class="form-group col-md-4"> <label for="email_forn">E-mail</label> <input type="email" class="form-control" name="email_forn" id="email_forn" required placeholder="E-mail do Fornecedor"> </div></form> </div></div><div class="modal-footer col-md-12"> <button type="submit" class="btn btn-primary">Salvar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> </div>
    
25.07.2016 / 19:29
Get IP through WinSock - Return correct IP - Delphi Redirect VPN or DNS to Proxy