Validate select ajax

1

I am trying to validate that the select with ajax is not empty but I can not find the form, I have tried several ways but nothing.

            <form method="post" id="formulario">
                <div class="form-group">
                    <select class="form-control" name="form" id="form">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    </select>
                    <br>
                    <input type="button" id="options" value="enviar" class="btn btn-danger" />
                </div>
            </form>
<div id="resultado"></div>

    <script>
    $(document).on('ready',function(){

      $('#report').click(function(){
        var url = "documento.php";
if($("#form").val() == 0) {
    alert("Debe Seleccionar una opcion");
    return false;
}
        $.ajax({                        
           type: "POST",                 
           url: url,                    
           data: $("#formulario").serialize(),
           success: function(data)            
           {
             $("#formulario").hide();
             $('#resultado').html(data);           
           }
         });
      });
    });
    </script>  

Of the multiple forms the ajax ignores it and it realizes the request to me in empty.

    
asked by Vicente 04.11.2018 в 14:01
source

2 answers

0

I would propose a solution more or less like this:

  • We put in the select a first default value with a text that can be indicative of the action performed by that element.
  • We put the default send button off, so we avoid unnecessary user actions.
  • We hear the event change of select and activate the button only when the default option is not selected.
  • We also hear the clicks of the button.

It's an elegant solution. It's how most of the forms we use online tend to work and they do not let us send until we have completed everything that is required.

It must be said that this solution can also be implemented for groups of elements that are required in a form.

$('#mSelect').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value;
  var selectStatus = (valueSelected == 0) ? true : false;
  console.log(selectStatus);
  $('#options').prop('disabled', selectStatus);
});

$('#options').on('click', function(e) {
  e.preventDefault();
  console.log("Aquí todo el código que escucha los clicks del botón");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="formulario">
  <div class="form-group">
    <select class="form-control" name="form" id="mSelect">
      <option value="0">-Seleccione-</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <br>
    <input type="button" id="options" value="enviar" class="btn btn-danger" disabled/>
  </div>
</form>
    
answered by 04.11.2018 / 14:31
source
0

The value of the unselected select is "nothing" not 0, change that and try maybe it can be useful.

Something like asking if a value for the id "Form" comes.

    
answered by 04.11.2018 в 14:15