Многошаговый пост с Php и Javascript?

У меня есть 4 шага формы, я сделал это как 4 страницы, например: формы: форма, форма, форма, форма, форма. Эти формы принадлежат различным таблицам в базе данных.

Я хочу сделать это как например; когда я отправляю первую форму, текущая страница не должна обновляться, а менять содержимое div и вызывать вторую форму с загрузкой изображения.. Я имею в виду

если первая форма опубликована успешно {вызвать вторую форму с загрузкой изображения в div.. }

если вторая форма опубликована успешно {вызвать третью форму с загрузкой изображения в div.. }

Как я должен это делать? какой лучший подход? извините за мой английский, и спасибо за вашу помощь

Источник

2 ответа

Вместо того, чтобы иметь несколько форм, используйте одну форму, в которой содержатся все поля ввода. В зависимости от того, на каком этапе вы находитесь, используйте CSS, чтобы скрыть элементы div, чтобы показать соответствующие входные данные для определенного набора параметров. На последнем шаге отправьте форму.

EG:

div 1 - > step 1 - > contains input 1,2,3
div 2 - > step 2 - > contains input 4,5,6
div 3 - > step 3 - > contains input 7,8,9
div 4 - > step 4 - > contains input 10,11,12 -> submit the form

Когда вы находитесь на шаге 1, покажите div 1 и скройте все остальные div. Точно так же вы можете продолжить.

CSS:

display : none; чтобы скрыть дивы.

Jquery:

в зависимости от шага добавьте специальный класс в div, чтобы отдельные div были скрыты.

Если вам нужна проверка, вы можете использовать jquery, чтобы сделать это.

на уровне PHP вы можете вставлять данные по мере необходимости в ваши разные таблицы.

Было бы неплохо иметь одну форму сообщения, а не обновлять страницу несколько раз.

Источник

Почему бы вам не попробовать AjaxForms: - http://jquery.malsup.com/form/

 <html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
 <script type="text/javascript">
 $(document).ready(function() { 
      $("#form2").fadeOut('slow',function(){
      $("#form2").css({"visibility":"hidden"});
      });
      $("#form3").fadeOut('slow',function(){
      $("#form3").css({"visibility":"hidden"});
      });
      $("#form4").fadeOut('slow',function(){
      $("#form4").css({"visibility":"hidden"});
      });

                  // bind 'myForm1' and provide a simple callback function 
        $('#myForm1').ajaxForm(function() { 
            $("#form1").fadeOut('slow',function(){
             $("#form2").fadeIn('slow',function(){
             $("#form1").css({"visibility":"hidden"});
             $("#form2").css({"visibility":"visible"});
             });
           });
            }); 

   $('#myForm2').ajaxForm(function() { 
            $("#form2").fadeOut('slow',function(){
              $("#form3").fadeIn('slow',function(){
             $("#form2").css({"visibility":"hidden"});
             $("#form3").css({"visibility":"visible"});
             });
           });
            }); 

  }); 
</script>
</head>
<body>
<div id="form1">
<form id="myForm1" action="formstep1.php" method="post"> 
Name: <input type="text" name="name" /> 
Comment: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Comment" /> 
</form>
</div>
<div id="form2">
<form id="myForm2" action="formstep2.php" method="post"> 
Likes: <input type="text" name="name" /> 
Adress: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Data" /> 
</form>
</div>
</body>
</html>

Я думаю, что это будет полезно для вас...

Источник
Другие вопросы по тегам