There is a form and function of validation. Upon confirmation of the form, onclick="validation_form" is triggered and a window is displayed with a message about the successful submission of the form. In this box, the "OK" button. By clicking on it, this window should disappear and the form will reappear. The window is displayed, but back when you click on "OK" does not close. The click is processed by console.log() . But the desired result is not.

Code:

 function validation_form() { if (($('#feedback input[name="name"] value') !== '') && ($('#feedback input[name="mail"] value') !== '') && ($('#feedback textarea') !== '')) { $(this).click(function() { $('#feedback form').hide(); $('#feedback-message').show(); }); } } $('.ok-btn').click(function() { $('#feedback form').show(); $('#feedback-message').hide(); console.log('ok-btn pressed'); }); 
 <div id="feedback"> <h1>Обратная связь</h1> <div class="white-border"></div> <form action=""> <input type="text" name="name" placeholder="Введите имя..." required> <input type="text" name="mail" placeholder="Введите эл. почту..." required> <textarea cols="38" rows="6" name="message" placeholder="Введите сообщение..." required></textarea> <img src="../assets/img/reCAPTCHA.png" alt="reCAPTCHA" style="width: 100%;"> <div class="orange-btn" onclick="validation_form()"> <p style="margin: 0;">Отправить</p> </div> </form> <div id="feedback-message"> <img src="../assets/img/success-icon.png" alt="success"> <div class="text-message"> <p class="green-text">Сообщение успешно отправлено!</p> <p>Спасибо за Ваше обращение.</p> </div> <button class="ok-btn"> <p class="green-text">Ок</p> </button> </div> </div>

  • Add the necessary markup to the snippet so that you can reproduce the problem. But I can assume that instead of calling the handler, you put another one, and it should have been $(this).click() - Grundy
  • I recommend checking all selectors for correctness. In general, yes, add markup. - Ivan Frolov
  • added markup - zh-mskl9

1 answer 1

Your callback function works fine when you click on a button, and the show and hide calls work fine every time .

What really happens?

When you call a function in isolation from the context, the this variable refers to the global window object. (By the way, this happens only outside of strict mode .) As a result, in the function validation_form you bind the form hiding by clicking on the window .

When you click on the .ok-btn form is shown again, but the event continues to pop up in the DOM tree until it reaches the window object. And the click event is bound to him by hiding the form.

As a result, the form is shown and immediately hidden. A similar picture is observed for the #feedback-message element.

What to do?

You do not need to bind the hide and show calls in the validation_form function to the click. This makes no sense. And if you still want to use the click event, use the sensible object, not this .

The correct code might look something like this:

 function validation_form() { if (($('#feedback input[name="name"] value') !== '') && ($('#feedback input[name="mail"] value') !== '') && ($('#feedback textarea') !== '')) { $('#feedback form').hide(); $('#feedback-message').show(); } }

Jsfiddle

Comment:

The condition in the if construct does not make sense. Totally. But with this problem, I suggest you understand it yourself ;-)