Javascript активировать всплывающее окно после проверки формы - PullRequest
Новая
       0

Javascript активировать всплывающее окно после проверки формы

0 голосов
/ 02 февраля 2019

Я хочу, чтобы всплывающее окно появлялось после проверки HTML-формы с помощью кнопки отправки формы.Я написал немного JavaScript, и форма была проверена, но всплывающее окно не появляется или, по крайней мере, оно появляется, но сразу исчезает.Ниже приведены HTML и JavaScript. Во-первых, поля в форме проверяются, и если true, всплывающее окно активируется .:

HTML 

<body>
    <div class="container">
        <div class="req_form" style="margin-top:40px">
            <form name="req_book">
                <table width= "450px">
                    <tr>
                        <td>
                            <label for="book_title">Book Title</label>
                        </td>
                        <td>
                            <input type="text" name="book_title" maxlength="175" size="50" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="author">Full author's name</label>
                        </td>
                        <td>
                            <input type="text" name="author" maxlength="225" size="50" required>
                        </td>                       
                    </tr>                   
                </table>
           <hr>
            <p>Requested by:</p>
                <table width= "450px">
                    <tr>
                        <td>
                            <label for="first_name">First name </label>
                        </td>
                        <td>
                            <input type="text" name="first_name" maxlength="175" size="50" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="last_name">Last name</label>
                        </td>
                    <tr>
                        <td>
                            <input type="submit" id="popupLink" value="Submit"> 
                        </td>                       
                    </tr>                    
                </table>
            </form>
        </div>

        <!-- POPUP BOX -->
        <div id="popupBox" class="popup">
            <!-- Popup content -->
            <div class="popup-content">
                <div class="popup-head">
                    <span class="close">close</span>
                    <h2>Your request for {BOOK_TITLE} has been processed.</h2>
                </div>
                <div class="popup-main">
                    <p>Succes!</p>
                    <p>Your request has been submitted to our library.</p>
                </div>
                <div class="popup-foot">
                    <p><a href="printer_version.html" target="_blank">click here </a>for a printable version on-screen (opens in new tab)</p>
                </div>
            </div>
        </div>
    </div>
</body>

Javascript: 

var btn = document.getElementById('popupLink');

function popUp() {
   var popup = document.getElementById('popupBox');

   // get the close action element
   var close = document.getElementsByClassName("close")[0];

   popup.style.display = "block";

   // close the Popup once close element is clicked
   close.onclick = function() {
       popup.style.display = "none";
   }

   // close the Popup when user clicks outside of the box
   window.onclick = function(event) {
       if (event.target == popup) {
           popup.style.display = "none";
       }        
   }
}

btn.addEventListener('click',function validateForm() {
     var isValid = true;
     var htmlFormFieldTitle = document.forms["req_book"]["book_title"].value;
     var htmlFormFieldAuthor = document.forms["req_book"]["author"].value;
     var htmlFormFieldFirst_name = document.forms["req_book"]["first_name"].value;
     var htmlFormFieldLast_name = document.forms["req_book"]["last_name"].value;

     if (htmlFormFieldTitle == "" && htmlFormFieldAuthor =="" && htmlFormFieldFirst_name =="" && htmlFormFieldLast_name =="") {
           alert('some fields are mandatory')
            isValid= false;
                    }
      if (isValid = True){
        popUp();
        }
     });

Почему мое всплывающее окно сразу исчезает и как я могу это исправить?Тестовая страница только с всплывающим кодом работает.Любая помощь приветствуется!

Ответы [ 4 ]

0 голосов
/ 02 февраля 2019

Я обнаружил некоторые проблемы:

1 - Когда есть форма и кнопка с типом «отправить», язык разметки пытается опубликовать после нажатия кнопки, включив данные в URL.

URL Before Click: https://foobar.com/index.html
URL After Click: https://foobar.com/index.html?book_title=a&author=a&first_name=a&last_name=a

Итак, как предотвратить это?

Вы можете вызвать метод protectDefault по параметру события: 

btn.addEventListener('click',function validateForm(e) {
    e.preventDefault();
    // ...
});

или также можете добавить javascript void (0)Действие функции как атрибут формы: 

<form name="req_book" action="javascript:void(0)">
<!-- ... -->
</form>

2 - Отсутствует ввод фамилии, вам нужно добавить следующее: 

<td>
    <input type="text" name="last_name" maxlength="175" size="50" required/>
</td>

3 - Javascript чувствителен к регистру, поэтому давайте исправим его: 

btn.addEventListener('click',function validateForm() {
    // ...
    if (isValid == true) {
        popUp();
    }
}
0 голосов
/ 02 февраля 2019

В дополнение к тому, что сказал Фил, в вашем коде есть три ошибки.Вы забыли включить элемент ввода HMTL для last_name, и у вас есть два опечатки в вашем сравнении.Исправьте это: 

if (isValid = True){
    popUp();
}

к этому: 

if (isValid == true){
    popUp();
}

Значение JavaScript true всегда в нижнем регистре.Кроме того, один = используется для назначений, а не сравнений.

Вы можете сами увидеть ошибки JavaScript, открыв консоль вашего веб-браузера.

0 голосов
/ 02 февраля 2019

С уважением, Когда вы используете кнопку отправки с формой, когда вы нажимаете кнопку отправки, она будет отправлять форму.Поэтому при отправке формы она должна вызывать ссылку действия.Но если у него нет действия, страница ссылки будет перезагружена.

Вы можете сделать два способа, 01. Чтобы избежать перезагрузки страницы, вы можете использовать, 

e.preventDefault()

Внутри вашего btn.Функция щелчка.

Или

02 Для загрузки страницы avoud вы можете использовать тип кнопки в качестве кнопки.Так что измените тип кнопки с кнопки «Отправить».Из-за вы используете метод нажатия кнопки.

Изменение: 

<input type="submit" />

       To

<input type="button"  />

Вы можете использовать тип кнопки только при захвате события щелчка.Если вы используете событие отправки, вы должны использовать тип отправки в качестве типа ввода.

Вы можете сделать несколько таких вещей.

0 голосов
/ 02 февраля 2019

Вы перезагружаете страницу, когда нажимаете на кнопку.Чтобы предотвратить это, добавьте e.preventDefault() и добавьте начало функции обратного вызова. 

  btn.addEventListener('click',function validateForm(e) {
    e.preventDefault();
    // ...
  });

Документы: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...