Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Html form not submitting data?

Does anyone have an idea of why my HTML form does not submit anything? Once I click the submit button it does nothing? No idea what is going on, have checked everything and can't get my head around it? If anyone might have an idea, it would be really helpful, thanks!

<div class="row">
<div class="col-md-6">

    <div class="alert alert-success hidden" id="contactSuccess">
        <strong>Success!</strong> Your message has been sent to us.
    </div>

    <div class="alert alert-danger hidden" id="contactError">
        <strong>Error!</strong> There was an error sending your message.
    </div>

    <form name="register" action="register.php" id="contactForm" type="POST">
        <div class="row">
            <div class="form-group">
                <div class="col-md-6">
                    <label>First name *</label>
                    <input type="text" value="" data-msg-required="Please enter your first name." maxlength="100" class="form-control" name="first_name" id="name">
                </div>
                <div class="col-md-6">
                    <label>Last name *</label>
                    <input type="text" value="" data-msg-required="Please enter your last name." maxlength="100" class="form-control" name="last_name" id="name">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-12">
                    <label>Your email address *</label>
                    <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email_address" id="email">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-6">
                    <label>Username *</label>
                    <input type="text" value="" data-msg-required="Please enter a valid username." maxlength="100" class="form-control" name="username" id="name">
                </div>
                <div class="col-md-6">
                    <label>Contact Number *</label>
                    <input type="number" value="" data-msg-required="Please enter your mobile number." maxlength="100" class="form-control" name="mobile" id="name">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-6">
                    <label>Date of birth *</label>
                    <br>
                    <fieldset class="date">
                        <select id="date1" name="date1" />
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                        </select>
                        <select id="date2" name="date2" />
                        <option>Jan</option>
                        <option>Feb</option>
                        <option>Mar</option>
                        <option>Apr</option>
                        <option>May</option>
                        <option>Jun</option>
                        <option>Jul</option>
                        <option>Aug</option>
                        <option>Sep</option>
                        <option>Oct</option>
                        <option>Nov</option>
                        <option>Dec</option>
                        </select>
                        <select id="date3" name="date3" />
                        <option>1905</option>
                        <option>1906</option>
                        <option>1907</option>
                        <option>1908</option>
                        <option>1909</option>
                        <option>1910</option>
                        <option>1911</option>
                        <option>1912</option>
                        <option>1913</option>
                        <option>1914</option>
                        <option>1915</option>
                        <option>1916</option>
                        <option>1917</option>
                        <option>1918</option>
                        <option>1919</option>
                        <option>1920</option>
                        <option>1921</option>
                        <option>1922</option>
                        <option>1923</option>
                        <option>1924</option>
                        <option>1925</option>
                        <option>1926</option>
                        <option>1927</option>
                        <option>1928</option>
                        <option>1929</option>
                        <option>1930</option>
                        <option>1931</option>
                        <option>1932</option>
                        <option>1933</option>
                        <option>1934</option>
                        <option>1935</option>
                        <option>1936</option>
                        <option>1937</option>
                        <option>1938</option>
                        <option>1939</option>
                        <option>1940</option>
                        <option>1941</option>
                        <option>1942</option>
                        <option>1943</option>
                        <option>1944</option>
                        <option>1945</option>
                        <option>1946</option>
                        <option>1947</option>
                        <option>1948</option>
                        <option>1949</option>
                        <option>1950</option>
                        <option>1951</option>
                        <option>1952</option>
                        <option>1953</option>
                        <option>1954</option>
                        <option>1955</option>
                        <option>1956</option>
                        <option>1957</option>
                        <option>1958</option>
                        <option>1959</option>
                        <option>1960</option>
                        <option>1961</option>
                        <option>1962</option>
                        <option>1963</option>
                        <option>1964</option>
                        <option>1965</option>
                        <option>1966</option>
                        <option>1967</option>
                        <option>1968</option>
                        <option>1969</option>
                        <option>1970</option>
                        <option>1971</option>
                        <option>1972</option>
                        <option>1973</option>
                        <option>1974</option>
                        <option>1975</option>
                        <option>1976</option>
                        <option>1977</option>
                        <option>1978</option>
                        <option>1979</option>
                        <option>1980</option>
                        <option>1981</option>
                        <option>1982</option>
                        <option>1983</option>
                        <option>1984</option>
                        <option>1985</option>
                        <option>1986</option>
                        <option>1987</option>
                        <option>1988</option>
                        <option>1989</option>
                        <option>1990</option>
                        <option>1991</option>
                        <option>1992</option>
                        <option>1993</option>
                        <option>1994</option>
                        <option>1995</option>
                        <option>1996</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                        <option>2006</option>
                        <option>2007</option>
                        <option>2008</option>
                        <option>2009</option>
                        <option>2010</option>
                        <option>2011</option>
                        <option>2012</option>
                        <option>2013</option>
                        <option>2014</option>
                        </select>
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <label>Contact Number *</label>
                    <input type="radio" name="gender" value="Male">Male
                    <input type="radio" name="gender" value="Female">Female
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="submit" name="Submit" value="Register" class="btn btn-lg btn-primary">
            </div>
        </div>
    </form>
</div>

I am using a copy of the contact form on my site for the registration form as it looks so much better, maybe this is one of the reasons ?

Register.php as requested:

<?

include 'core/init.php';

// Define post fields into simple variables
$first_name = mysql_real_escape_string($_POST['first_name']);
$last_name = mysql_real_escape_string($_POST['last_name']);
$email_address = mysql_real_escape_string($_POST['email_address']);
$username = mysql_real_escape_string($_POST['username']);
$mobile = $_POST['mobile'];
$gender = $_POST['gender'];
$date1 = $_POST['date1'];
$date2 = $_POST['date2'];
$date3 = $_POST['date3'];

/* Let's strip some slashes in case the user entered
any escaped characters. */

$first_name = stripslashes($first_name);
$last_name = stripslashes($last_name);
$email_address = stripslashes($email_address);
$username = stripslashes($username);
$gender = stripslashes($gender);




/* Do some error checking on the form posted fields */

if((!$first_name) || (!$last_name) || (!$email_address) || (!$gender) || (!$username)){
    if(!$first_name){
        header('Location: signup.php?signuperror=2');
    }
    if(!$last_name){
        header('Location: signup.php?signuperror=3');
    }
    if(!$email_address){
        header('Location: signup.php?signuperror=4');
    }
    if(!$username){
        header('Location: signup.php?signuperror=5');
    }
    if(!$gender){
        header('Location: signup.php?signuperror=6');
    }
    include "signup.php"; // Show the form again!
    /* End the error checking and if everything is ok, we'll move on to
     creating the user account */
    exit(); // if the error checking has failed, we'll exit the script!
}

/* Let's do some checking and ensure that the user's email address or username
 does not exist in the database */

 $sql_email_check = mysql_query("SELECT email_address FROM users WHERE email_address='$email_address'");
 $sql_username_check = mysql_query("SELECT username FROM users WHERE username='$username'");

 $email_check = mysql_num_rows($sql_email_check);
 $username_check = mysql_num_rows($sql_username_check);

 if(($email_check > 0) || ($username_check > 0)){
    if($email_check > 0){
        header('Location: signup.php?signuperror=7');
        unset($email_address);
    }
    if($username_check > 0){
        header('Location: signup.php?signuperror=8');
        unset($username);
    }
    include 'signup.php'; // Show the form again!
    exit();  // exit the script so that we do not create this account!
 }

/* Everything has passed both error checks that we have done.
It's time to create the account! */

/* Random Password generator. 
http://www.phpfreaks.com/quickcode/Random_Password_Generator/56.php

We'll generate a random password for the
user and encrypt it, email it and then enter it into the db.
*/

function makeRandomPassword() {
  $salt = "abchefghjkmnpqrstuvwxyz0123456789";
  srand((double)microtime()*1000000); 
    $i = 0;
    while ($i <= 7) {
            $num = rand() % 33;
            $tmp = substr($salt, $num, 1);
            $pass = $pass . $tmp;
            $i++;
    }
    return $pass;
}

$random_password = makeRandomPassword();

$db_password = md5($random_password);

// Enter info into the Database.
$info2 = htmlspecialchars($info);
$sql = mysql_query("INSERT INTO users (first_name, last_name, email_address, username, password, gender, date1, date2, date3, signup_date, mobile)
        VALUES('$first_name', '$last_name', '$email_address', '$username', '$db_password', '$gender', '$date1', '$date2', '$date3', now(), '$mobile')") or die (mysql_error());

if(!$sql){
    header('Location: signup.php?signuperror=9');
} else {
    $userid = mysql_insert_id();
    // Let's mail the user!
    $subject = "BaseCentre Members";
    $message = "Dear $first_name $last_name,
    Thank you for registering at BaseCentre, http://www.basecentre.co.uk/

    You are two steps away from logging in and accessing our exclusive entertainment.

    To activate your membership, please click here: http://www.basecentre.co.uk/activate.php?id=$userid&code=$db_password

    Once you activate your memebership, you will be able to login with the following information:
    Username: $username
    Password: $random_password

    Thanks!
    Base Admin Team.

    This is an automated response, please do not reply!";

    mail($email_address, $subject, $message, "From: BaseCentre Members<[email protected]>\nX-Mailer: PHP/" . phpversion());
    ////// MAIL ADMIN
    $subject2 = "BaseCentre New User!";
    $message2 = "Dear Admin,
    This is a message to alert you that a new user has signed up to BaseCentre.

    You can view all details of the new member and all other members direct from the admin control panel at http://basecentre.co.uk/admin.php

    Here are the details of the new registered user:
    Username: $username
    Email Address: $email_address

    Thanks!
    BaseCentre Automation.

    This is an automated response, please do not reply!";

    mail('[email protected]', $subject2, $message2, "From: BaseCentre Members<[email protected]>\nX-Mailer: PHP/" . phpversion());
    header('Location: login.php?loginerror=6');
include 'login.php';
}

?>

JS Script for reference:

/*
Name:           View - Contact
Written by:     Okler Themes - (http://www.okler.net)
Version:        2.0
*/

(function() {

    "use strict";

    var Contact = {

        initialized: false,

        initialize: function() {

            if (this.initialized) return;
            this.initialized = true;

            this.build();
            this.events();

        },

        build: function() {

            this.validations();

        },

        events: function() {



        },

        validations: function() {

            $("#contactForm").validate({
                submitHandler: function(form) {

                    // Loading State
                    var submitButton = $(this.submitButton);
                    submitButton.button("loading");

                    // Ajax Submit
                    $.ajax({
                        type: "POST",
                        url: "php/contact-form.php",
                        data: {
                            "name": $("#contactForm #name").val(),
                            "email": $("#contactForm #email").val(),
                            "subject": $("#contactForm #subject").val(),
                            "message": $("#contactForm #message").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.response == "success") {

                                $("#contactSuccess").removeClass("hidden");
                                $("#contactError").addClass("hidden");

                                // Reset Form
                                $("#contactForm .form-control")
                                    .val("")
                                    .blur()
                                    .parent()
                                    .removeClass("has-success")
                                    .removeClass("has-error")
                                    .find("label.error")
                                    .remove();

                                if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){
                                    $("html, body").animate({
                                         scrollTop: $("#contactSuccess").offset().top - 80
                                    }, 300);
                                }

                            } else {

                                $("#contactError").removeClass("hidden");
                                $("#contactSuccess").addClass("hidden");

                                if(($("#contactError").position().top - 80) < $(window).scrollTop()){
                                    $("html, body").animate({
                                         scrollTop: $("#contactError").offset().top - 80
                                    }, 300);
                                }

                            }
                        },
                        complete: function () {
                            submitButton.button("reset");
                        }
                    });
                },
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    subject: {
                        required: true
                    },
                    message: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-success")
                        .addClass("has-error");
                },
                success: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-error")
                        .addClass("has-success")
                        .find("label.error")
                        .remove();
                }
            });

        }

    };

    Contact.initialize();

})();
like image 911
AidanPT Avatar asked Mar 31 '14 12:03

AidanPT


4 Answers

As well as the post method, input fields should also have a name attribute.

like image 191
Ro Mc Avatar answered Oct 04 '22 22:10

Ro Mc


Change this line,

<form name="register" action="register.php" id="contactForm" method="POST">

you must use method="POST" instead of type="POST"

like image 41
Harish Kanakarajan Avatar answered Oct 04 '22 22:10

Harish Kanakarajan


Make sure you submit button is of type submit rather than type button.

like image 26
ziggurism Avatar answered Oct 04 '22 20:10

ziggurism


If your form is not submitting and you have checked the suggestions in the previous answers then its probably that you have multiple form ending tags, overlapping form tags or incorrectly closed divs.

Here's a checklist for you which are standard and not php purely based, something you could have a look at in case you still experience this issue:

  1. Check you have a valid action element in your form tag eg: action="/subjects"

  2. Check you have a valid method element (not a type element) eg: method="post"

  3. Opening and closing <form> tags and a submit button placed within these tags. Make sure that there are no extra divs causing incorrect closing of elements. - DOUBLE CHECK THIS AS IT IS THE MOST COMMON CAUSE OF MANY HEADACHES

  4. Overlapping Form tags. (Make sure that you don't have multiple form closing tags, etc)

  5. post is being sent but there is an error in the backend/server/api which is not returning an error or success message to the browser? (Check Network section or browser after pressing F12)

If your problem still happens then consider trying to use javascript instead of html form submission for instance. By adding an onclick event to a button and writing the form.submit function.

I've never heard of any different form submit errors which are not logged in the console or which you can see in the Network section of your browsers development toolbar. Curious to know of your problem in the end.

like image 30
geostima Avatar answered Oct 04 '22 20:10

geostima