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

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.