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?
name
, como você valida qual deve utilizar noPHP
?div
, tive que atribuir o doselect
e doinput
mesmo, mas valeu mesmo ajudou muito