0

Hola como puedo evitar que se me recarge la pagina, cuando envio un formulario a php usando 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();
         }  

     });

    });

3 respuestas 3

1

Lo unico que debes hacer es capturar el submit agregando $(form).submit(function(event) {... y luego evitar que el navegador envié los datos al servidor con event.preventDefault(); Luego simplemente haces la llamada Ajax tomando los datos del formulario. En el success realizas las acciones pertinentes y en el error lo mismo. Tu código debería quedar así:

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

Espero haber sido claro y que te sirva. Saludos!

0

Con PreventDefault(); evitas que envíe el formulario sícrono

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

simplemente agrega

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

Esto evitara que se recargue tu pagina en donde tienes el formulario

y claro tambien elimina el tag de action en tu formulario.

 action="resultado.php"

porque esto aun emitira una carga en tu pagina aun agregando el preventDefault()

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

       // tu metodo ajax
});

espero haberte ayudado saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.