How can I avoid reloading my form when I send it to php using ajax?

Question

How can I avoid reloading my form when I send it to php using ajax?

Navigation

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

0

Hello, how can I avoid reloading the page, when I send a form to php using Ajax.

                $(document).ready(function(){

         $('#btn_login_detalles').click(function(){


          var error_nombre='';
          var apellido='';
          var error_calle = '';
          if($.trim($('#nombre').val()).length == 0)
          {
           error_nombre = 'Campo requerido';
           $('#error_nombre').text(error_nombre);
           $('#nombre').addClass('has-error');
          }

         if($.trim($('#apellido').val()).length == 0)
          {
           error_apellido = 'Campo requerido';
           $('#error_apellido').text(error_apellido);
           $('#apellido').addClass('has-error');
          }


          if($.trim($('#calle').val()).length == 0)
          {
           error_calle = 'requerido';
           $('#error_address').text(error_address);
           $('#address').addClass('has-error');
          }


          if(error_nombre != ''|| error_apellido != '' || error_calle != '' )

      {
       return false;
      }
          else{

            $("#register_form").submit();
         }  

     });

    });

jquery php ajax

asked by daniel 28.10.2018 в 18:09

source

3 answers

0

With PreventDefault (); you avoid sending the synchronous form

$(document).on("submit","#SELECTOR_DEL_FORM",function(e){
  e.preventDefault();
  /*Acá Puedes colocar toda las funciones asociadas a tu formulario.*/
});

answered by 29.10.2018 в 01:20

0

simply add

// Stop the browser from submitting the form.
event.preventDefault();

This will prevent you from reloading your page where you have the form

and of course also delete the action tag in your form.

 action="resultado.php"

because this will still issue a load on your page even adding the preventDefault()

$('#register_form').on('submit', function (event) {
        event.preventDefault();

       // tu metodo ajax
});

I hope I helped you Greetings!

answered by 29.10.2018 в 01:56

autoload with extended classes, inheritance Problem when using a singleton with an abstract factory

score 1 · Accepted Answer

The only thing you should do is capture the submit by adding $(form).submit(function(event) {... and then prevent the browser from sending the data to the server with event.preventDefault(); Then you simply make the Ajax call taking the form data. In the success you perform the relevant actions and in the same error. Your code should look like this:

        $(document).ready(function(){

         $('#btn_login_details').click(function(){


          var error_nombre='';
          var apellido = '';
          var empresa = '';
          var cargo = '';
          var error_address = '';
           var error_mobile_no = '';
          var mobile_validation = /^\d{10}$/;
          var error_telefono = '';
           var error_email = '';
           var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;



          if($.trim($('#nombre').val()).length == 0)
          {
           error_nombre = 'Campo requerido';
           $('#error_nombre').text(error_nombre);
           $('#nombre').addClass('has-error');
          }
          else
          {
           error_nombre = '';
           $('#error_nombre').text(error_nombre);
           $('#nombre').removeClass('has-error');
          }

         if($.trim($('#apellido').val()).length == 0)
          {
           error_apellido = 'Campo requerido';
           $('#error_apellido').text(error_apellido);
           $('#apellido').addClass('has-error');
          }
          else
          {
           error_apellido = '';
           $('#error_apellido').text(error_apellido);
           $('#apellido').removeClass('has-error');
          }

          if($.trim($('#empresa').val()).length == 0)
          {
           error_empresa = 'Campo requerido';
           $('#error_empresa').text(error_empresa);
           $('#empresa').addClass('has-error');
          }
          else
          {
           error_empresa = '';
           $('#error_empresa').text(error_empresa);
           $('#empresa').removeClass('has-error');
          }

          if($.trim($('#cargo').val()).length == 0)
          {
           error_cargo = 'Campo requerido';
           $('#error_cargo').text(error_cargo);
           $('#cargo').addClass('has-error');
          }
          else
          {
           error_cargo = '';
           $('#error_cargo').text(error_cargo);
           $('#cargo').removeClass('has-error');
          }

          if($.trim($('#address').val()).length == 0)
          {
           error_address = 'Address is required';
           $('#error_address').text(error_address);
           $('#address').addClass('has-error');
          }
          else
          {
           error_address = '';
           $('#error_address').text(error_address);
           $('#address').removeClass('has-error');
          }




         if($.trim($('#mobile_no').val()).length == 0)
          {
           error_mobile_no = 'Mobile Number is required';
           $('#error_mobile_no').text(error_mobile_no);
           $('#mobile_no').addClass('has-error');
          }
          else
          {
           if (!mobile_validation.test($('#mobile_no').val()))
           {
            error_mobile_no = 'Invalid Mobile Number';
            $('#error_mobile_no').text(error_mobile_no);
            $('#mobile_no').addClass('has-error');
           }
           else
           {
            error_mobile_no = '';
            $('#error_mobile_no').text(error_mobile_no);
            $('#mobile_no').removeClass('has-error');
           }
          }

        if($.trim($('#telefono').val()).length == 0)
          {
           error_telefono = 'campo requerido';
           $('#error_telefono').text(error_telefono);
           $('#telefono').addClass('has-error');
          }
          else
          {
           error_telefono = '';
           $('#error_telefono').text(error_telefono);
           $('#telefono').removeClass('has-error');
          }







           if($.trim($('#email').val()).length == 0)
          {
           error_email = 'Email is required';
           $('#error_email').text(error_email);
           $('#email').addClass('has-error');
          }
          else
          {
           if (!filter.test($('#email').val()))
           {
            error_email = 'Invalid Email';
            $('#error_email').text(error_email);
            $('#email').addClass('has-error');
           }
           else
           {
            error_email = '';
            $('#error_email').text(error_email);
            $('#email').removeClass('has-error');
           }
          }









          if(error_nombre != ''|| error_apellido != '' || error_empresa != '' || error_cargo != '' || error_address != '' || error_mobile_no != '' || error_telefono != '' || error_email != '')

      {
       return false;
      }
      else
      {
       $('#list_login_details').removeClass('active active_tab1');
       $('#list_login_details').removeAttr('href data-toggle');
       $('#login_details').removeClass('active');
       $('#list_login_details').addClass('inactive_tab1');
       $('#list_personal_details').removeClass('inactive_tab1');
       $('#list_personal_details').addClass('active_tab1 active');
       $('#list_personal_details').attr('href', '#personal_details');
       $('#list_personal_details').attr('data-toggle', 'tab');
       $('#personal_details').addClass('active in');
      }
     });

     $('#previous_btn_personal_details').click(function(){
      $('#list_personal_details').removeClass('active active_tab1');
      $('#list_personal_details').removeAttr('href data-toggle');
      $('#personal_details').removeClass('active in');
      $('#list_personal_details').addClass('inactive_tab1');
      $('#list_login_details').removeClass('inactive_tab1');
      $('#list_login_details').addClass('active_tab1 active');
      $('#list_login_details').attr('href', '#login_details');
      $('#list_login_details').attr('data-toggle', 'tab');
      $('#login_details').addClass('active in');
     });

     $('#btn_personal_details').click(function(){
      var error_first_name = '';
      var error_last_name = '';

      if($.trim($('#first_name').val()).length == 0)
      {
       error_first_name = 'First Name is required';
       $('#error_first_name').text(error_first_name);
       $('#first_name').addClass('has-error');
      }
      else
      {
       error_first_name = '';
       $('#error_first_name').text(error_first_name);
       $('#first_name').removeClass('has-error');
      }

      if($.trim($('#last_name').val()).length == 0)
      {
       error_last_name = 'Last Name is required';
       $('#error_last_name').text(error_last_name);
       $('#last_name').addClass('has-error');
      }
      else
      {
       error_last_name = '';
       $('#error_last_name').text(error_last_name);
       $('#last_name').removeClass('has-error');
      }

      if(error_first_name != '' || error_last_name != '' )
   {
   return false;
  }
  else{

      $('#btn_personal_details').attr("disabled", "disabled");
       $(document).css('cursor', 'prgress');
       $("#register_form").submit();
       
         }  

     });

    });
    
// Get the form.
    var form = $('#register_form');
    
$(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();
    var formData = $(form).serialize();
     $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
            success: function (data) {
                alert('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                alert('An error occurred.');
                console.log(data);
            },
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form method="post" id="register_form" action="resultado.php">
                <ul class="nav nav-tabs">
                 <li class="nav-item">
                  <a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Datos personales</a>
                 </li>
                 <li class="nav-item">
                  <a class="nav-link inactive_tab1 " id="list_personal_details" style="border:1px solid #ccc">Su necesidad</a>
                 </li>

                </ul>
                <div class="tab-content" style="margin-top:16px;">
                 <div class="tab-pane active" id="login_details">
                  <div class="panel panel-default">
                   <div class="panel-heading">Datos personales</div>
                   <div class="panel-body">







                    <div class="col-md-6" align="center"> 
                   <div class="form-group">
                     <label>Nombre</label>
                     <input type="text" name="nombre" id="nombre" class="form-control"  placeholder="NOMBRE" />
                     <span id="error_nombre" class="text-danger"></span>
                    </div>
                  </div>


                      <div class="col-md-6" align="center"> 
                     <div class="form-group">
                     <label>Apellido</label>
                     <input type="text" name="apellido" id="apellido" class="form-control" placeholder="APELLIDO" />
                     <span id="error_apellido" class="text-danger"></span>
                    </div>
                     </div>

                     <div class="col-md-6" align="center">
                     <div class="form-group">
                     <label>Empresa/Dependencia</label>
                     <input type="text" name="empresa" id="empresa" class="form-control"  placeholder="EMPRESA/DEPENDENCIA"/>
                     <span id="error_empresa" class="text-danger"></span>
                    </div>
                     </div>



                      <div class="col-md-6" align="center">
                     <div class="form-group">
                     <label>Cargo</label>
                     <input type="text" name="cargo" id="cargo" class="form-control" placeholder="CARGO"/>
                     <span id="error_cargo" class="text-danger"></span>
                    </div>
                      </div>




                     <div class="form-group" align="center">
                     <label>Dirección</label>
                     <textarea name="address" id="address" class="form-control" placeholder="DIRECCION"></textarea>
                     <span id="error_address" class="text-danger"></span>
                    </div>

                      <div class="col-md-6" align="center">
                    <div class="form-group">
                     <label>Celular</label>
                     <input type="text" name="mobile_no" id="mobile_no" class="form-control" placeholder="CELULAR"/>
                     <span id="error_mobile_no" class="text-danger"></span>
                    </div>
                  </div>

                     <div class="col-md-6" align="center">
                    <div class="form-group">
                     <label>Telefono</label>
                     <input type="text" name="telefono" id="telefono" class="form-control" placeholder="TELEFONO OFICINA" />
                     <span id="error_telefono" class="text-danger"></span>
                    </div>
                  </div>


                  <div align="center" >
                    <div  class="form-group">
                    <label>Correo</label>
                     <input type="text" name="email" id="email" class="form-control" placeholder="CORREO"/>
                     <span id="error_email" class="text-danger"></span>
                    </div>
                  </div>


                    <br />
                    <div align="center">
                     <button type="button" name="btn_login_details" id="btn_login_details" class="btn btn-info btn-lg">siguiente</button>
                    </div>
                    <br />
                   </div>
                  </div>
                 </div>
                 <div class="tab-pane fade" id="personal_details">
                  <div class="panel panel-default">
                   <div class="panel-heading">Su necesidad</div>
                   <div class="panel-body">

                    <div align="center">
                    <div class="form-group">
                     <label>Describa su necesidad</label>
                     <input type="text" name="first_name" id="first_name" class="form-control" />
                     <span id="error_first_name" class="text-danger"></span>
                    </div>
                  </div>

                    <div class="form-group">                  
                      <SELECT   class="form-control"  NAME="inmueble"> 
                         <OPTION  VALUE="industrial" SELECTED>INDUSTRIAL</OPTION> 
                         <OPTION  VALUE="comercial" >COMERCIAL</OPTION> 
                         <OPTION  VALUE="vivienda" >VIVIENDA  </OPTION>
                         <OPTION  VALUE="otro" >OTRO </OPTION>

                      </SELECT>     
                  </div> 

                     <div align="center">
                    <div class="form-group">
                     <label>Metros</label>
                     <input type="text" name="last_name" id="last_name" class="form-control" />
                     <span id="error_last_name" class="text-danger"></span>
                    </div>
                  </div>
                    <div class="form-group">
                     <label>obra</label>
                     <label class="radio-inline">
                      <input type="radio" name="gender" value="male" checked> Publica
                     </label>
                     <label class="radio-inline">
                      <input type="radio" name="gender" value="female"> Privada
                     </label>
                    </div>
         <br />
                <div align="center">
                 <button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Anterior</button>
                 <button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-success btn-lg">Enviar</button>
                </div>
                <br />
               </div>
              </div>
             </div>    
            </div>

I hope I have been clear and that it serves you. Greetings!