Html form not submitting data?

46,690

Solution 1

Change this line,

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

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

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 5

The valid attribute for the form is method not type

method = 'post'

Share:
46,690
AidanPT
Author by

AidanPT

Updated on July 05, 2022

Comments

  • AidanPT
    AidanPT almost 2 years

    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();
    
    })();
    
  • AidanPT
    AidanPT about 10 years
    Changed it yet its still not posting anything?
  • AidanPT
    AidanPT about 10 years
    Changed it but it's still not posting?
  • Harish Kanakarajan
    Harish Kanakarajan about 10 years
    When you type type="POST", its submitting as default method "GET". And when type as method ="POST" then its posting as POST data. Its working fine for me. Please check there may some other jquery or JS issue. Please check your console for viewing errors.
  • AidanPT
    AidanPT about 10 years
    Hmmm does the form actually submit?
  • Harish Kanakarajan
    Harish Kanakarajan about 10 years
    Yes the form is getting submitted.. And i am getting the values in the new php file.
  • Harish Kanakarajan
    Harish Kanakarajan about 10 years
    Or else please check whether the action="register.php" is located in correct path. the path of your contact form and register.php should be in same folder according to your code.
  • Harish Kanakarajan
    Harish Kanakarajan about 10 years
    Yes @ponciste. I have copied AidanPT's code. Its working for me when i changed the method="POST". I mean the form is submitting in my end. I think some JS is making the thing not working
  • AidanPT
    AidanPT about 10 years
    Just added the JS code, not sure what is actually wrong with it? I am not very good with JS scripting however I am using the same code for both the register form and the contact form?
  • AidanPT
    AidanPT about 10 years
    When I remove the JS script, the form works fine for me?
  • JohnDoe
    JohnDoe over 3 years
    This was the reason that my node express application was not getting it. Thank you!