Submit only one element of two with same name

Question

Submit only one element of two with same name

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

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

Example:

If the city is "main" it should change I should change the neighborhood field from input to select . I was able to make the exchange 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 I send form to request , bairro is always with content input , even if selecting bairro in select this takes the value of input .

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

php html jquery

asked by anonymous 12.04.2018 / 20:19

2 answers

1

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

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><selectid="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>

12.04.2018 / 21:07

Placeholder color does not change when the mouse is over it in another theme Hide and reveal text using JavaScript [duplicate]

score 3 · Accepted Answer

Add the disabled property to one of them before submitting.

Here is an example similar to yours:

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