0

Есть форма: введите сюда описание изображения

мне нужно ввести телефон, для отправки смс сообщения, я нажимаю на кнопку отправить, но нечего не происходит, почему не срабатывает кнопка отправить?

код формы

 <div class="main">

        <div class="container">
            <form method="POST" id="signup-form" class="signup-form" enctype="multipart/form-data">
                <h3>
                    Номер телефона
                </h3>

                <fieldset>
                    <form >
                    <h2>Получение электронной карты</h2>
                    <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>


                <h3>
                    Код сообщения
                </h3>

                <fieldset>
                    <h2>Введите код сообщения</h2>
                    <div class="form-group">
                        <input type="text" name="socials_twitter" id="socials_twitter" placeholder="Код сообщения"/>
                    </div>
                </fieldset>

                <h3>
                    Персональные данные
                </h3>
                <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>

    </div>

ajax скрипт отправки

<script>
$(document).ready(function() {
        $("form").next(function() { //Change
            var th = $(this);
            $.ajax({
                type: "POST",
                url: "sms.php", //Change
                data: th.serialize()
            }).done(function() {
                alert("Ваше сообщение отправлено");
                setTimeout(function() {
                    // Done Functions
                    th.trigger("reset");
                }, 1000);
            });
            return false;
        });

    });
</script>

скрипт формы(далее, назад)

(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);
10
  • $('#signup-form').on('submit', (e) => { - Так попробуйте. 25 ноя 2019 в 13:05
  • А что это за событие next? 25 ноя 2019 в 13:05
  • Ну и var th = $('#signup-form').serialize(); И ее передаете. 25 ноя 2019 в 13:07
  • @NikolayGabaraev не сработало(
    – fermeg
    25 ноя 2019 в 13:12
  • @StepanKasyanenko выше добавил скрипт
    – fermeg
    25 ноя 2019 в 13:12

1 ответ 1

1

next не является событием. Fieldsets не привязаны к форме. метод next проходится по всем экземплярам указанного селектора, но это вам не нужно, вам просто нужно вызвать сериалайз у главной формы, он соберет в кучу все ваши формы.

console.log($("form").serialize());

Можете попробовать это, чтобы убедиться.

    function SendForm(){

         $.ajax({
                type: "POST",
                url: "sms.php", //Change
                data: $('form').serialize()
            }).done(function() {
                alert("Ваше сообщение отправлено");
                setTimeout(function() {
                    // Done Functions
                    $('form').trigger("reset");
                }, 1000);
            });
       }
       $('ваш сабмит').click(function(){SendForm()});
4
  • Ваша функция next не находит формы, вот и вся беда. Если я правильно понял, что вы хотели, этот код вам подойдет.
    – Mrage
    25 ноя 2019 в 14:20
  • а мне, необразованному, подскажите: если мы таким образом отправим POST запрос, как мы его поймаем в скрипте, если явно не указали его имя? 25 ноя 2019 в 14:30
  • 1
    serialize формирует строчный запрос к серверу вида nameofinput=''&nameofinput=''
    – Mrage
    25 ноя 2019 в 14:36
  • чтобы поймать достаточно $_POST['nameofyourinput']
    – Mrage
    25 ноя 2019 в 14:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.