JavaScript function on onclick event of submit button not validating textbox

Question

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

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

Solution 1

Change your gSubmit() function to this:

  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()".

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

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 (" ").

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

Comments

[Rfqkml]

tried this, and the worst is that the form changed into "Thank you for submitting the Guestbook" but inputs didnt get submitted to mysql database

[Rfqkml]

i dont undesrtand your definition of stored but this is what happens: when user input their name in the textbox and submit it, it gets changed into $_POST['name'] and the database will save it.

[Rfqkml]

when the txtbox is empty, i'm glad that it pop out the alert. but when i submit it with having something typed in the textbox, it seems that the form doesnt get sent to the mysql database.

[keyboardP]

By stored, I mean saved in the database. Was the database saving the information correctly in your original code?

[Rfqkml]

yeah. i've tested it. it get stored in the database.

[keyboardP]

Not sure if it will make a difference in this case, but did you add the semi-colon at the end of gSubmit, like in my answer? (I added it after)

[keyboardP]

Hmm..not sure. The code above shouldn't change any PHP/MySQL related aspects, only the fact that the form shouldn't submit when the textbox is blank.

[Rfqkml]

its okay then. but can you teach me javascript command to redirect the page. basically if php "header('location:site.php')" or html <a href="site.html">. for javascript for redirecting?

[keyboardP]

Do you just want to redirect to another page in JS? An easy way would be to just use window.location = "http://www.example.com/. Put that inside any JS function and it will redirect to that page.

[Rfqkml]

just changed it to this too : document.getElementById("guestbook").innerHTML=("<p><b><cent‌​er>Thank you for submitting the Guestbook"); window.location = "guestbook.php"; return false; does not work like not a charm.

[keyboardP]

I think that's why it's not working. It should be return true; in the Thank you for submitting bit. The return false; should only be in the bit where they haven't entered anything.

[Rfqkml]

changed it to "return true;", the same thing happened. changed it to ".value.length === 0)" too, same.

[keyboardP]

Something's not right in the code and it's hard to tell what it is from the comments. You could edit your original question with the latest code you're having problems with.

[keyboardP]

It should be onclick="return gSubmit();" - you're missing the return bit.

[Rfqkml]

tried that one. not working. tried to change it a bit to expect different result. still failing.

[keyboardP]

Sorry, I'm not quite sure why it's not working. Maybe someone else will know :)

[keyboardP]

You're welcome! Hope someone else knows. I'll post if I can think of anything else.

[Rfqkml]

ooh okay.seeing that you`re good in javascript, can you recommend me any site that's good for javascript tutorials?

[keyboardP]

W3Schools is quite good. Should get you up and running on the basics: w3schools.com/js and this page should help: cs.brown.edu/courses/bridge/1998/res/javascript/…