How to prevent that a variable save data in it

Question

I'm having this problem I have an input that depending of a radio selection it changes into a type number or date also a have a select and all of this in my form with a submit button. The problem is that if a press the first radio and sends data, it works perfectly, but if I chance for the date type and go back to the number type , it saves the oldest data and also saves the select value, after submitting. Obsly I'm clearing the inputs after changing from the one tho the other

My view

<form class="form-horizontal" id="form_transferencias_enviadas">
  <fieldset>
    <legend>Parámetro de impresión</legend>
    <div class="form-group">

      <div class="col-xs-2">
        <input type="number" min="0" id="parametro_impresion" required>
      </div>
      <div class="col-xs-3" id="hasta_hidden" hidden>
        <span>Hasta:</span>
        <input type="date" id="parametro_impresion_hasta">
      </div>

    </div>
    <div class="form-group">
      <div class="col-xs-2" id="select_hidden" hidden>
        <select id="slc_transferencia_destino" class="form-control" style="width: 100%;">
                                            @foreach($empresas as $empresa)
                                                @if($empresa->nombre!=Auth::user()->activo()->pluck('nombre')->first())
                                                    <option value="{{$empresa->nombre}}">{{$empresa->nombre}}</option>
                                                @endif

                                            @endforeach
                                        </select>

      </div>
    </div>
    <div>
      <button type="submit" class="btn btn-primary">Buscar</button>
    </div>
  </fieldset>
</form>

My js

 //ocultar campos $(document).ready(function() { $('input[name="busqueda_radio"]').on('ifClicked', function(event) { var num = parseInt(this.value) switch (num) { case 1: $('#select_hidden').prop('hidden', true).prop('disabled', true) $('#hasta_hidden').prop('hidden', true).prop('disabled', true) $('#parametro_impresion').prop('type', 'number').val('').prop('hidden', false).prop('disabled', false) submit_buton(num) break case 2: $('#select_hidden').prop('hidden', true).prop('disabled', true) $('#parametro_impresion').prop('type', 'date').val('').prop('hidden', false).prop('disabled', false) $('#hasta_hidden').prop('hidden', false).prop('disabled', false) submit_buton(num) break case 3: $('#hasta_hidden').prop('hidden', true).prop('disabled', true) $('#parametro_impresion').prop('hidden', true).prop('disabled', true) $('#select_hidden').prop('hidden', false).prop('disabled', false) submit_buton(num) break } }) }) function por_numero(numero_transferencia) { console.log(numero_transferencia) } function por_fecha(desde, hasta) { console.log(desde + ' hasta ' + hasta) } function por_destino(destino) { console.log(destino) } function submit_buton(caso) { $('#form_transferencias_enviadas').submit(function(e) { e.preventDefault() switch (caso) { case 1: por_numero($('#parametro_impresion').val()) break case 2: por_fecha($('#parametro_impresion').val(), $('#parametro_impresion_hasta').val()) break case 3: por_destino($('#slc_transferencia_destino').val()) break } }) } 

Thanks for the help

Answer 1

Every time you call submit_buton you add a new submit handler to the form, but you don't remove the old one. So when you submit the form, it runs all the submit handlers that you attached.

You should remove the old handler before adding the new one:

$('#form_transferencias_enviadas').off("submit").submit(function(e) {
    ...
});