提交按钮的onclick事件上的JavaScript函数未验证文本框

I wrote this code (which posts to a PHP page) so that if guests do not input their name, it would pop out an alert box. However, Even when I put something in the name textbox and submit it, the alert box still pop out and it would submit the $_POST['gname'] to the server.

我写了这段代码(发布到PHP页面),这样如果客人没有输入他们的名字,就会弹出一个警告框。但是,即使我在名称文本框中放了一些东西并提交它,警告框仍会弹出,它会将$ _POST ['gname']提交给服务器。

Here’s the JavaScript:

这是JavaScript:

<script type="text/javascript">
    function gSubmit()
    {
        if (document.getElementById("gname").value.length === 0)
        {
          alert("For completing the form, it requires you to input a Name");
          return false;
        }
        else
        {
          document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
          window.location = "guestbook.php";
          return true;
        }
    }
</script>

Here’s the HTML:

这是HTML:

<form id="guestbook" name="guestbook" method="post" action="guestbook.php">
    <center>
        <table border="0px">
            <tr>
                <td>      
                    <p align="right">Name :</p></td><td> <input type="text" name="gname" id="gname" />
                </td>
            </tr>
            <tr>
                <td>
                    <p align="right">E-mail :</p></td><td><input type="text" name="gemail" />
                </td>
            </tr>
            <tr>
                <td>
                    <p align="right">Telephone No :</p>
                </td>
                <td>
                    <input type="text" name="gtpn" />
                </td>
            </tr>
            <tr>
                <td>
                    <p align="right">Product Order / Comment / Messages :</p>
                </td>
                <td>
                    <textarea name="gtxtfld" id="gtxtfld" cols="32"></textarea>
                </td>
            </tr>
        </table>

    <br /><br />

    <input type="submit" value="submit" name="submit" onclick="gSubmit();" />
    <input type="reset" value="reset" name="reset" />
</form>

2 个解决方案

#1

Change your gSubmit() function to this:

将gSubmit()函数更改为:

  if (document.getElementById("gname").value === "")
  {
      alert("For completing the form, it requires you to input a Name");
      return false;
  }
  else
  {
      document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
      return true;
  }

In your html, change onclick="gsubmit()" to onclick="return gsubmit()".

在你的html中,将onclick =“gsubmit()”更改为onclick =“return gsubmit()”。

Note that your message in the else clause will not be displayed because the form would have submitted by then.

请注意,不会显示else子句中的消息,因为那时表单已提交。

Also, you have to compare the value of gname field, not it's innerHTML. And it has to be compared to empty string (""), not space (" ").

此外,您必须比较gname字段的值,而不是它的innerHTML。它必须与空字符串(“”)进行比较,而不是空格(“”)。

#2

To check if the textbox has a value in it, you can use something like this:

要检查文本框中是否包含值,您可以使用以下内容:

 if (document.getElementById("gname").value.length > 0)
 {
     alert("For completing the form, it requires you to input a Name");
     //by returning false, you stop the submission from happening
     return false;
 }
 else
 {
     document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
     return true; //allow the submission to go through
 }

And in you're onclick event:

在你的onclick事件中:

onclick="return gSubmit();"

#1