0

My first post here @stackoverflow. Please bear with me.

Look at the code below. I want the javascript to post to an PHP (applybeta.php) document IF there is a '@' in the field with the name & id 'epost'. If there isn't a '@' in the field, a messagebox will pop up telling the user they entered an invalid e-mail address.

If you don't enter a '@' the message box shows up. But if you do enter a valid email it doesn't post to "applybeta.php", nothing happens at all. Anybody got an idea why? Sorry if the description is vague, hopefully you'll figure out what I mean :)

The e-post field got both an id and a name because I tried with both, none of them works.

<!DOCTYPE html>
<html>
    <head>
        <title>Binärklocka</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="index.css">
        <link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
        <!-- table font --> <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <script>
        function kollaepost() {
            var x = document.getElementById("email");

            if(x.value.indexOf('@') === -1) {
                alert("You didn't enter a valid E-mail address!");
            }
            else {
                document.getElementById("minForm");
                //z.submit();
                //alert("hej");
            }
         }
        </script>
        <div id="wrap">
            <div id="main">
                <br>
                <br>
                    <table id="nav">
                          <tr>
                            <td><a href="store.html">Store</a></td>
                            <td><a href="ourproducts.html">Our Products</a></td>
                            <td><a href="index.html"><img src="home.png" alt="hem" width="60" height="60"/></a></td>
                            <td><a href="aboutus.html">About Us</a></td>
                            <td><a href="contact.html">Contact</a></td>
                          </tr>
                    </table> 
                <hr id="linje1" />
            </div>
        </div>
        <p id="binaryclock"  onclick="showLink()">
            We are looking for beta testers for our newly created clock!<br />
            To participate, fill in the forms below with your real name</br />
            and a valid e-mail address and a download link will appear.
        </p>

            <!-- Form that I want to post -->
        <div id="applybeta">
            <form action="apply.php" method="post" id="minForm" name="minForm">
                <input type="text" placeholder="Full name" name="name" /><br />
                <!-- checking this field for '@' -->
                 <input type="text" placeholder="E-mail" id="email" /><br /><br />
                <!-- end of field -->
                <input onclick="kollaepost()" type="button" name="submit" value="Send" /><br />
            </form>
        </div>
            <!-- End of the form -->
        <div id="dlink">
            shdgfgh<a href="http://www.google.se">Click here to download</a>
        </div>
        <div id="bottomtext">
            <p>@ 2015 ClockMasters Elite</p>
        </div>
    </body>
</html>
orkapodbots
  • 1
  • 3

2 Answers2

0

Instead of having an input of type button, try submit. Your onclick-function can then serve as a validation function by returning true or false, and thus influence whether the form will be submitted. Something like this:

<input onclick="return kollaepost()" type="submit" name="submit" value="Send" />

and:

<script>
function kollaepost() {
    var x = document.getElementById("email");

    if(x.value.indexOf('@') === -1) {
        alert("You didn't enter a valid E-mail address!");
        return false;
    }
    return true;
}
</script>

Also see this question for a more detailed explanation on this method, in general.

Joost
  • 4,094
  • 3
  • 27
  • 58
0

You can submit your form using the .submit() method.

var fromElement = document.getElementById("minForm"); formElement.submit();

For further reference, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

rnli
  • 575
  • 8
  • 16