php - JavaScript function on onclick event of submit button not validating textbox - Stack Overflow

admin管理员组

文章数量:1389754

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.

Here’s the JavaScript:

<script type="text/javascript">
    function gSubmit()
    {
        if (document.getElementById("gname").value.length === 0)
        {
          alert("For pleting 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:

<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>

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.

Here’s the JavaScript:

<script type="text/javascript">
    function gSubmit()
    {
        if (document.getElementById("gname").value.length === 0)
        {
          alert("For pleting 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:

<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>

• php
• javascript
• html

Share Improve this question Follow edited Nov 29, 2013 at 8:27 Abbas 6,87444 gold badges3737 silver badges4949 bronze badges asked Jan 2, 2012 at 22:12 RfqkmlRfqkml 5111 gold badge22 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Change your gSubmit() function to this:

  if (document.getElementById("gname").value === "")
  {
      alert("For pleting 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()".

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

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

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 pleting 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="return gSubmit();" 

本文标签： phpJavaScript function on onclick event of submit button not validating textboxStack Overflow