O
O
okovalev2018-09-04 21:23:53
JavaScript
okovalev, 2018-09-04 21:23:53

AJAX form. How to remove an element from a specific form?

The problem is that I hook the handler on class myForm, and the event is deleted on submit.attr("style", "display: none !important");
Form A, and it turns out that the button disappears in both forms. It shouldn't be like this..

<form class="booking-form myForm" id="" action="form.php">
  <div class="row">
    <div class="col-lg-12 d-flex flex-column">
    <input name="name" placeholder="Имя" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Ваше имя'" class="form-control mt-20" required="" type="text" required>
    </div>
    <div class="col-lg-12 d-flex flex-column">
    <input name="phone" placeholder="Телефон" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Телефон'" class="form-control mt-20" required="" type="text" required>
    </div>
    <div class="col-lg-12 flex-column">
    <textarea class="form-control mt-20" name="textclaim" placeholder="Сообщение" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Текст'" required=""></textarea>
    </div>
    <div class="col-lg-12 d-flex justify-content-end send-btn">
    <button class="submit-btn primary-btn mt-20 text-uppercase ">Подать в суд<span class="lnr lnr-arrow-right"></span></button>
    </div>
    <div class="alert-msg"></div>
</div>
</form>


$(document).ready(function() {
            var form = $('.myForm'); // contact form
            var submit = $('.submit-btn'); // submit button
            var alert = $('.alert-msg'); // alert div for show alert message

            // form submit event
            form.on('submit', function(e) {
                e.preventDefault(); // prevent default form submit

                $.ajax({
                    url: 'form.php', // form action url
                    type: 'POST', // form submit method get/post
                    dataType: 'html', // request type html/json/xml
                    data: form.serialize(), // serialize form data
                    beforeSend: function() {
                        alert.fadeOut();
                        submit.html('Отправка....'); // change submit button text
                    },
                    success: function(data) {
                        alert.html(data).fadeIn(); // fade in response data
                        form.trigger('reset'); // reset form
                        submit.attr("style", "display: none !important");; // reset submit button text
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });
        });

Answer the question

In order to leave comments, you need to log in

2 answer(s)
T
tyzberd, 2018-09-04
@tyzberd

on submit write This will be your form and then
that.find('.submit-btn');

L
Lander, 2018-09-05
@usdglander

$(document).ready(function() {
            var form = $('.myForm'); // contact form
            var submit = $('.submit-btn'); // submit button
            var alert = $('.alert-msg'); // alert div for show alert message
            var self = $( this );

            // form submit event
            form.on('submit', function(e) {
                e.preventDefault(); // prevent default form submit

                $.ajax({
                    url: 'form.php', // form action url
                    type: 'POST', // form submit method get/post
                    dataType: 'html', // request type html/json/xml
                    data: form.serialize(), // serialize form data
                    beforeSend: function() {
                        alert.fadeOut();
                        submit.html('Отправка....'); // change submit button text
                    },
                    success: function(data) {
                        alert.html(data).fadeIn(); // fade in response data
                        form.trigger('reset'); // reset form
                        self.find('.submit-btn').hide(); // reset submit button text
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });
        });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question