Переход из одной формы в другую?

Question

[artds]

Есть три формы:
1.form1.php
В ней форма отправки данных(данные записываются в бд)
2. form2.php в ней кнопка подтверждения
в ней форма ввода кода для потверждения
3. form3.php
в ней форма регистрация

Подскажите пожалуйста как перейти из form1 в form2 после того как нажали кнопку отправить
данные передаются через ajax

Сделал в кнопку отправки ссылку:

<a href="form2.php"><input type="submit"  name="submit" value="Продолжить"  /></a>

Но переход не срабатывает

Comments

[Andrew]

form1, form2, form3 - это три разные страницы?

[artds]

Andrew, да
form1.php
form2.php
form3.php

Answer 1

[Andrew]

Пишите переход в коллбэк аякса(success), а не пытайтесь отправить форму.
Не знаю как вы там делаете запрос, но должно быть
что-то типа этого:

<a id="form-submitter" href="form2.php">Go to form 2</a>

$('#form-submitter').click(function(e){
e.preventDefault();
$.ajax({
  url: 'form1.php',
  success: function(){
    window.location.href = "form2.php";

  },
  error: function(){
    alert('failure');
  }
});
});

Можно вообще без аякса делать, пыхой всё, в одной странице.

Comments

[artds]

спасибо работает.

Имется ввиду все формы в одну сделать?

[Andrew]

artds, не, просто на одной странице и по полученным данным показывать по очереди их, в зависимости от ответа.

[artds]

я хотел так сделать через плагин steps:

<div class="container">
            <form method="POST" id="signup-form" class="signup-form" enctype="multipart/form-data">

                
                <fieldset>
                    <form >
                    <div class="form-group">
                        <input type="tel" name="tel" id="phone" placeholder="Ваш телефон" />
                    </div>
                    <input type="submit" name="submit" value="Отправить" class="btn btn-danger btn-rounded m-b-40" />
                    
                </fieldset>
                

                
                <fieldset>
                    <h2>Введите код сообщения</h2>
                    <div class="form-group">
                        <input type="text" name="socials_twitter" id="socials_twitter" placeholder="Код сообщения"/>
                    </div>
                </fieldset>
                
                <fieldset> 
                    <h2>Персональные данные</h2>
                    <div class="form-group">
                        <input type="text" name="your_name" id="your_name" placeholder="Your name"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="your_phone" id="your_phone" placeholder="Phone"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="your_addr" id="your_addr" placeholder="Address"/>
                    </div>
                </fieldset>
            </form>
        </div>

(function($) {

    var form = $("#signup-form");
    form.steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        labels: {
            previous : 'Назад',
            next : 'Вперед',
            finish : 'Отправить',
            current : ''
        },
        titleTemplate : '<div class="title"><span class="title-text">#title#</span><span class="title-number">0#index#</span></div>',
        onFinished: function (event, currentIndex)
        {
            alert('Sumited');
        }
    });
    
    
})(jQuery);

тут все идет через один скрипт вперед и назад, нет проверки, у меня не получилось(
по этому решил делать разные формы и переходить на них с помощью ссылок

[Andrew]

artds, разделение форм имеет смысл, если это разный функционал или возможны разные варианты развития дальше

[artds]

Andrew, как мне тогда сделать что бы это работало в одной форме?

[Andrew]

artds, в одной форме - никак, имелось в виду место хранения. Т.е. обрабатывается в томже файле и показывается тамже

[artds]

Andrew, как сделать что бы вместо url/form2 было url ?

[Andrew]

artds, не понял вас, если про отображение в одном то принцип такой:
1 файл , где все 3 формы.
По сабмиту - запрос идёт на сервер и смотрит если всё ок - получаем ответ, прячем первую форму - показываем вторую ну и т.д

[artds]

Andrew, у меня выходит ошибка failure и не переходит на другую страницу(

у меня первая форма ввод номера телефона

<form id="contactForm" method="post" class="m-b-30">
                <input type="tel" name="phone" placeholder="мобильный телефон" id="phone"  >
                <a id="form-submitter" href="form2.php"><input type="submit" name="submit" value="Продолжить" /></a>
            </form>

а ниже ajax
передает данные для записи в бд

$( document ).ready(function(){
        $('#contactForm').on("submit", function(event){
            event.preventDefault();
            $.ajax({
                url:"form2.php",
                dataType:"text",
                cache:false,
                method:"POST",
                data:$('#contactForm').serialize(),
                success:function(data){
                    console.log(data);
                }
            });

        })
    });

а этот ваш который должен открыть форму2.php

$('#form-submitter').click(function(e){
        e.preventDefault();
        $.ajax({
            url: 'form1.php',
            success: function(){
                window.location.href = "form2.php";
            },
            error: function(){
                alert('failure');
            }
        });
    });