Question

在使用表单的“提交”按钮验证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();
        }
     });

为什么我的弹出窗口会立即消失，该如何解决？仅包含弹出代码的测试页即可工作。任何帮助表示赞赏！

Answer 1

当您单击按钮时，您将重新加载页面。为了防止这一点，添加e.preventDefault()添加回调函数的开始。

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

文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

我已经发现了一些问题：

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

那么，如何预防呢？

您可以通过事件参数调用preventDefault方法：

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-Java脚本区分大小写，因此请对其进行修复：

btn.addEventListener('click',function validateForm() {
    // ...
    if (isValid == true) {
        popUp();
    }
}

Answer 3

除了Phil所说的以外，您的代码中还存在三个错误。您忘记为last_name包括HMTL输入元素，并且在比较中有两个错别字。更正此错误：

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

对此：

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

JavaScript true值始终为小写。此外，单个=用于分配，而不用于比较。

通过打开Web浏览器的控制台，您可以自己查看JavaScript错误。

Answer 4

亲爱的，当您使用带有表单的提交按钮时，当您单击提交按钮时，它将提交表单。因此，提交表单时，必须调用操作链接。但是，如果没有操作，链接页面将重新加载。

您可以执行两种方法， 01.为避免重新加载页面，您可以使用

e.preventDefault()

在您的btn内部。点击功能。

或

02对于avoud重新加载页面，您可以使用您的按钮类型为按钮。因此，将按钮类型从提交更改为按钮。因为您正在使用按钮单击方法。

更改：

<input type="submit" />

       To

<input type="button"  />

仅在捕获单击事件时可以使用按钮类型。如果使用的是Submit事件，则必须使用Submit类型作为输入类型。

您可以执行类似的严厉措施。

表单验证后，JavaScript会弹出弹出窗口

4 个答案: