Modal window.Jquery is not showing on fadeIn()

Question

I am trying to create a feedback form. All inputs and textareas are not empty and the user has clicked on the checkbox which says I am not a robot, then the button Send (отправить)　becomes active and I want to say Thank you,we will contact with you soon! in a popup window after form submission.

But..what is wrong?

$(document).on('change', '.main-pc input:checkbox', function() {
    if($(this).is(':checked')){
        $(".main-pc input[type=submit]").removeAttr('disabled');
        $('.main-pc input[type=hidden].valTrFal').val('valTrFal_true');
    }
    else {
        $(".main-pc input[type=submit]").attr('disabled','disabled');
        $('.main-pc input[type=hidden].valTrFal').val('valTrFal_disabled');
    }
});

$(".main-pc").ready(function() {
    $('.main-pc').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
        if (document.form.input.value == '') {
           valid = false;
           return valid;
        }
        $.ajax({
           type: "POST",
           url: "/app.mail.php",
           data: $(this).serialize()
       }).done(function() {
           $('.js-overlay-thank-you').fadeIn();
           $(this).find('input').val('');
           $('.main-pc').trigger('reset');
       });
       return false;
    });
});


$('.js-close-thank-you').click(function() { // по клику на крестик
 $('.js-overlay-thank-you').fadeOut();
});

$(document).mouseup(function (e) { // по клику вне попапа
    var popup = $('.popup');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.js-overlay-thank-you').fadeOut();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-writetous">
    <form class="main-pc" id="form" >
        <input type="text" required="" placeholder="Имя" name="txtname" required>
        <input type="email" placeholder="Email" name="txtemail" required>
        <textarea name="txtmessage" placeholder="Введите сообщение.." rows="5" required></textarea>
        <label><input type="checkbox">Я не робот</label>
        <input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
        <input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
    </form>
</div>

<div class="overlay js-overlay-thank-you">
    <div class="popup js-thank-you">
        <h5>Сообщение отправлено!</h5>
        <p><strong>Наши администраторы свяжутся с вами в ближайшее время!</strong></p>
        <hr>
        <div class="close-popup js-close-thank-you">x</div>
    </div>
</div>

are you getting any errors in your console? Hard to debug without the ajax backend's response — Mathieu de Lorimier, Mar 31 '18 at 11:22
No,just I can't see popup window then I click on 'Send' button. — mex111, Mar 31 '18 at 11:30

score 0 · Answer 1 · answered Mar 31 '18 at 11:17

document.form.input.value

Above line is creating issue in your code As you wrote in your question that you are using this for safari browser, May be it will work on safari but will not work on chrome or Mozilla so check browser like this

var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

and then put your code in if conditon

if(is_safari){
    if (document.form.input.value == '') {
        valid = false;
        return valid;
    }
}

And you can also check other example for form validation in safari.

Required Attribute Not work in Safari Browser

Modal window.Jquery is not showing on fadeIn()

1 Answers1