Send form as active tab

Asked

Viewed 422 times

0

How I could submit a form according to the active Bootstrap tab, ignoring the validation of the unselected tab?

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

When selecting the "B" tab and submitting the form "B1", do not validate the fields of the form "A1", only of the form "B1", sending the data of the respective form.

I tried a few ways though, either it does not send any form, or it is validating the form not active.

Follows code:

<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>
javascript bootstrap

  • Post what you already have Thiago. What is the possibility of making 2 form ?

  • Lock the Ubmit button ?

  • Ready...button also added to the above code.

2 answers

0


Here is a solution to your problem.
I added a small script to know which form we are giving submit.
We could force the submission via javascript but this would ignore its validation via HTML5 Follows 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>
<link rel="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 doubt give a touch here.
Just to remind you that if you put one button for each form already solves the problem.
I hope I’ve helped.

0

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

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

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

});

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

But the form contains the prefix cad_ in the value of name. Therefore the variable modo inserts the cad_, turning into cad_produto, for example, then send the form using the .submit().

Demonstration:

An alert() 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>
<link rel="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>

Browser other questions tagged javascript bootstrap

You are not signed in. Login or sign up in order to post.