0

Hola amigos quiero poder llenar un formulario en varias partes, los botones next y previous me funcionan perfectamente.

Lo que sucede es que al cargar el documento se muestran las 3 partes del formulario. Quisiera que solo me apareciera el primer Fieldset y hasta que presione los botones vaya mostrando los demas Fieldset.

Ya he intentado la funcion window.onload=function(){} pero me sigue mostrando lo mismo.

codigo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <h2>Example: for StackOverFlow</h2>

        <div class="alert alert-success hide"></div>
        <form id="register_form" novalidate action="form_action.php" method="post">
        
        <fieldset>
        <h2>Step 1: Add Account Details</h2>
        <div class="form-group">
        <label for="email">Email address*</label>
        <input type="email" class="form-control" required id="email" name="email" placeholder="Email">
        </div>
        <div class="form-group">
        <label for="password">Password*</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="Password">
        </div>
        <input type="button" class="next1 btn btn-info" value="Next" />
        </fieldset>

        <fieldset>
        <h2> Step 2: Add Personal Details</h2>
        <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
        </div>
        <div class="form-group">
        <label for="last_name">Last Name</label>
        <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
        </div>
        <input type="button" name="previous" class="previous-form btn btn-default" value="Previous" />
        <input type="button" name="next" class="next2 btn btn-info" value="Next" />
        </fieldset>

        <fieldset>
        <h2>Step 3: Add Contact Information</h2>
        <div class="form-group">
        <label for="mobile">Mobile*</label>
        <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Mobile Number">
        </div>
        <div class="form-group">
        <label for="address">Address</label>
        <textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
        </div>
        <input type="button" name="previous" class="previous-form btn btn-default" value="Previous" />
        <input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
        </fieldset>

        </form>
        </div>


        <script>

$(document).ready(function(){
var current = 1, current_step, next_step, steps;
steps = $("fieldset").length;

$(".next1").click(function(){

current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
});

$(".next2").click(function(){

current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
});

$(".previous-form").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();

});

// Handle form submit and validation
$( "#register_form" ).submit(function(event) {
var error_message = '';
if(!$("#email").val()) {
error_message+="Please Fill Email Address";
}
if(!$("#password").val()) {
error_message+="<br>Please Fill Password";
}
if(!$("#mobile").val()) {
error_message+="<br>Please Fill Mobile Number";
}
// Display error if any else submit form
if(error_message) {
$('.alert-success').removeClass('hide').html(error_message);
return false;
} else {
return true;
}
});
});
    </script>
    
</body>
</html>

Alguien me puede decir, porque me cargan los 3 Fieldset al mismo tiempo? y como evitar que aparezca todo mi formulario al cargar la ventana?

introducir la descripción de la imagen aquí

1
  • Te aparece todo porque los eventos donde ocultas están recién cuando haces click, puedes intentar al inicio ocultar con hide() los pasos 2 y 3, cuando presiona Next muestras el paso 2 con show() y ocultas los otros 2, y en el siguiente muestra el paso 3 y ocultas los otros 2.
    – Ange Reyna
    el 30 jul. 2020 a las 13:52

1 respuesta 1

2

He optimizado tu código un poco. Borrado de variables, solo una clase next, renombrado de alguna variable y la logica que te faltaba para ocultar los fieldsets.

Nada mas cargar el formulario, ocultas todos los fieldsets menos el primero. Con eso ya lo tienes.

$(document).ready(function() {
  let form = $('#register_form');
  let fieldsets = form.find('fieldset');

  for (i = 1; i < fieldsets.length; i++) {
    $(fieldsets[i]).hide();
  }

  $(".next").click(function() {

    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
  });

  $(".previous").click(function() {
    current_step = $(this).parent();
    prev_step = $(this).parent().prev();
    prev_step.show();
    current_step.hide();

  });

  // Handle form submit and validation
  $("#register_form").submit(function(event) {
    var error_message = '';
    if (!$("#email").val()) {
      error_message += "Please Fill Email Address";
    }
    if (!$("#password").val()) {
      error_message += "<br>Please Fill Password";
    }
    if (!$("#mobile").val()) {
      error_message += "<br>Please Fill Mobile Number";
    }
    // Display error if any else submit form
    if (error_message) {
      $('.alert-success').removeClass('hide').html(error_message);
      return false;
    } else {
      return true;
    }
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <h2>Example: for StackOverFlow</h2>

    <div class="alert alert-success hide"></div>
    <form id="register_form" novalidate action="form_action.php" method="post">

      <fieldset>
        <h2>Step 1: Add Account Details</h2>
        <div class="form-group">
          <label for="email">Email address*</label>
          <input type="email" class="form-control" required id="email" name="email" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="password">Password*</label>
          <input type="password" class="form-control" name="password" id="password" placeholder="Password">
        </div>
        <input type="button" class="next btn btn-info" value="Next" />
      </fieldset>

      <fieldset>
        <h2> Step 2: Add Personal Details</h2>
        <div class="form-group">
          <label for="first_name">First Name</label>
          <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
        </div>
        <div class="form-group">
          <label for="last_name">Last Name</label>
          <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
        </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="button" name="next" class="next btn btn-info" value="Next" />
      </fieldset>

      <fieldset>
        <h2>Step 3: Add Contact Information</h2>
        <div class="form-group">
          <label for="mobile">Mobile*</label>
          <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Mobile Number">
        </div>
        <div class="form-group">
          <label for="address">Address</label>
          <textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
        </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
      </fieldset>

    </form>
  </div>

</body>

</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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