使用Bootstrap输入按钮不起作用

Question

I have been using Bootstrap 3 to develop a project im working on and so far it has worked wonders and cant really fault it. However I have now run into a problem that I cant seem to get my head around.

Problem: A basic input submit button not doing anything - but when run on its own page i.e. without bootstrap it runs fine.

Here is the code:

<section>
    <div class="container">
        <div class="col-md-6">

            <?php
                // define variables and set to empty values
                $name = $email = $gender = $comment = $website = "";

                if ($_SERVER["REQUEST_METHOD"] == "POST") {
                   $name = test_input($_POST["name"]);
                   $email = test_input($_POST["email"]);
                   $message = test_input($_POST["message"]);
                }

                function test_input($data) {
                   $data = trim($data);
                   $data = stripslashes($data);
                   $data = htmlspecialchars($data);
                   return $data;
                }
                ?>

                <h2>PHP Form Validation Example</h2>
                <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                   Name: <input type="text" name="name">
                   <br><br>
                   E-mail: <input type="text" name="email">
                   <br><br>
                   Comment: <br>
                    <textarea name="message" rows="5" cols="40"></textarea>
                   <br><br>
                   <input type="submit" name="submit" value="Submit">
                </form>

                <?php
                echo "<h2>Your Input:</h2>";
                echo $name;
                echo "<br>";
                echo $email;
                echo "<br>";
                echo $comment;
            ?>

        </div>
    </div>
</section>

If you need to have a look at it running on a page with other content you can do so here

Also I am planning to get this working as a contact form, but no matter what PHP code I put I still get this problem.

Answer 1

You have this code in your contact_me.js that's causing the issue:

8.   submitSuccess: function($form, event) {
9.     event.preventDefault(); // prevent default submit behaviour
10.    // get values from FORM
11.    var name = $("input#name").val();
...
15.    var firstName = name; // For Success/Failure Message
16.    // Check for white space in name for Success/Fail message
17.    if (firstName.indexOf(' ') >= 0) {
18.      firstName = name.split(' ').slice(0, -1).join(' ');
...

Console returns the error:

TypeError: firstName is undefined

I think you're selecting the name improperly. Try using:

var name = $("input[name=name]").val();