2

Tenho um form, e neste tenho que informar o bairro, porém o elemento que armazena a informação do bairro pode variar de acordo com o valor da cidade selecionada anteriormente.

Exemplo:

Se a cidade for "principal" deve mudar devo mudar o campo bairro de um input para um select. Consegui fazer a troca assim:

HTML:

<div class="form-group has-feedback {{ $errors->has('bairro') ? 'has-error' : '' }}">
    <label for="bairro" class="col-sm-2 control-label">Bairro</label>

    <div id="bairro-select" class="col-sm-10" hidden>
        <select class="form-control" name="bairro" id="bairro">
            <option value="" selected>--- Escolha um bairro ---</option>
            @foreach($bairros as $bairro)
                <option value="{{ $bairro->nome }}">{{$bairro->nome}}</option>
            @endforeach
        </select>
    </div>

    <div id="bairro-input" class="col-sm-10">
        <input type="text" class="form-control" name="bairro" id="bairro" placeholder="" minlength="3" maxlength="90">
    </div>

</div> 

JavaScript:

$("#cidade").on('change', function() {
    var cidade = $(this).find('option:selected').val();

    if(cidade == 'Principal') {
        bairroselect.style.display = "block";
        bairroinput.style.display = "none";
    }else {
        bairroselect.style.display = "none";
        bairroinput.style.display = "block";
    }
});

Porém quando vou enviar o form no request o bairro fica sempre com o conteúdo do input, mesmo que selecionando um bairro no select este pega o valor do input.

O código que fiz deixa a div apenas oculta o elemento. Como poderia fazer para que apenas o valor que é exibido seja submetido?

7
  • Poderia editar a pergunta e incluior o código de como você faz os request, pois cada elemento tem um name, como você valida qual deve utilizar no PHP? 12/04/2018 às 18:23
  • @CaiqueRomero desculpe estava fazendo um teste e nem vi que foi o código errado
    – Mateus
    12/04/2018 às 18:26
  • A questão é justamente os dois terem o mesmo nome, fiz uam gambi que mando com nomes diferentes e verifico no controller qual não é null, porém acredito que deva ter alguma forma melhor
    – Mateus
    12/04/2018 às 18:27
  • @CaiqueRomero mas dai não poderei usar ?
    – Mateus
    12/04/2018 às 18:35
  • 1
    Consegui, o problema é que o id ali era o da div, tive que atribuir o do select e do input mesmo, mas valeu mesmo ajudou muito
    – Mateus
    12/04/2018 às 18:59

2 Respostas 2

3

Adicione a propriedade disabled em um deles antes do submit.

Segue exemplo similar ao seu:

$("#cidade").on('change', function() {
    var cidade = $(this).find('option:selected').val();

    if(cidade == 'Principal') {
        $("#bairro-select").css("display","block");
        $("#bairro-select").prop("disabled", false);
        
        $("#bairro-input").css("display","none");
        $("#bairro-input").prop("disabled", true);
    }else {
        $("#bairro-select").css("display","none");
        $("#bairro-select").prop("disabled", true);
        
        $("#bairro-input").css("display","block");
        $("#bairro-input").prop("disabled", false);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label for="cidade" class="col-sm-2 control-label">
    Cidade
  </label>
  <div class="col-sm-10">
     <select class="form-control" name="cidade" id="cidade">
        <option value="" selected>Escolha a cidade</option>
        <option value="Cidade1">Cidade1</option>
        <option value="Principal">Principal</option>
     </select>
  </div>
  <label for="bairro-select" class="col-sm-2 control-label">
    Bairro
  </label>
  <div class="col-sm-10">
    <select class="form-control" name="bairro" id="bairro-select" style="display:none;">
       <option value="" selected>--- Escolha um bairro ---</option>
       <option value="Bairro1">Bairro 1</option>
       <option value="Bairro2">Bairro 2</option>
     </select>
  </div>
  <div class="col-sm-10">
     <input type="text" class="form-control" placeholder=""
            name="bairro" id="bairro-input"   minlength="3" maxlength="90" />
  </div>
</div>

1

Você pode remover o atributo name do elemento oculto, assim o PHP não vai confundir os dois elementos com o mesmo name, porque apenas um ou outro terá o atributo name="bairro".

Exemplo:

$("#cidade").on('change', function() {
    var cidade = $(this).val();
    if(cidade == 'Principal') {
        $("#bairro-select")
        .show()
        .find("select")
        .attr("name","bairro");

        $("#bairro-input")
        .hide()
        .find("input")
        .attr("name","");
    }else {
        $("#bairro-select")
        .hide()
        .find("select")
        .attr("name","");

        $("#bairro-input")
        .show()
        .find("input")
        .attr("name","bairro");
    }
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cidade">
   <option value="...">Selecione</option>
   <option value="Bairro">Bairro</option>
   <option value="Principal">Principal</option>
</select>
<div class="form-group has-feedback {{ $errors->has('bairro') ? 'has-error' : '' }}">
    <label for="bairro" class="col-sm-2 control-label">Bairro</label>

    <div id="bairro-select" class="col-sm-10" hidden>
        <select class="form-control" name="bairro" id="bairro">
            <option value="" selected>--- Escolha um bairro ---</option>
            @foreach($bairros as $bairro)
                <option value="{{ $bairro->nome }}">{{$bairro->nome}}</option>
            @endforeach
        </select>
    </div>

    <div id="bairro-input" class="col-sm-10">
        <input type="text" class="form-control" name="bairro" id="bairro" placeholder="" minlength="3" maxlength="90">
    </div>

</div> 

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 .