Commit only one element of two with the same name

Asked

Viewed 133 times

2

I have a form, and in this I have to inform the neighborhood, however the element that stores the neighborhood information may vary according to the value of the city selected previously.

Example:

If the city is "main" should change I should change the neighborhood countryside of a input for a select. I managed to make the trade like this:

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";
    }
});

But when will I send the form in the request the bairro is always with the content of input, even if selecting a bairro in the select this takes the value of input.

The code I made leaves the div just hides the element. How could you do so that only the value that is displayed is submitted?

php html jquery

  • You could edit the question and include the code of how you do the request, because each element has a name, how do you validate which one to use in PHP?

  • @Caiqueromero sorry I was doing a test and I didn’t even see it was the wrong code

  • The point is that the two have the same name, I made a Gambi that I send with different names and check in the controller which is not null, but I believe that there must be some better way

  • @Caiqueromero but then I won’t be able to use ?

  • See if my answer helps you.

  • Test however the code does not work to leave the field disabled

  • 1

    I got it, the problem is that the id there was the div, I had to assign the select and of input really, but thanks really helped a lot

Show 2 more comments

2 answers

3


Add the property disabled in one of them before Submit.

Follow similar example to your:

$("#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

You can remove the attribute name hidden element, so PHP will not confuse the two elements with the same name, because only one or the other will have the attribute name="bairro".

Example:

$("#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>

Browser other questions tagged php html jquery

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