форма, не работает кнопка отправить

106

25 ноября 2021, 17:50

Есть форма:

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

код формы

 <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);

Answer 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()});