Bootstrap Form Not Posting Data to PHP Variables

MattCroft
September 1, 2023
133 views
0 votes
2 Answers

I have a form embedded on a website project which uses Bootstrap and CSS. The issue I am encountering is that the form data is not being stored in $_POST variables when the Submit button is clicked. I have a custom javascript to validate the information entered and a custom CSS file. The page is only refreshing and removing the data. Please provide any suggestions you may have. Please see the included snippets for each file below.

PHP(HTML)

<?php $page_title = 'Crypt Registration'; ?>

<?php require_once ('../inc/header.php'); ?>

<?php

if(isset($_POST['submit']))
{

    $first_name = $_POST['firstname'];
    $last_name = $_POST['lastname'];

    echo '
    alert("Submitted");
    ';
}

?>

<div id="content" id="content-container" class="container-fluid content-container">
    <div class="row">
        <div class="col-md-2">
                <section id="page-sidebar-left">
                    Test
                </section>
        </div>
        <div class="col-md-8">
            <section id="page-content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12"></div>
                            <div class="page-intro-text">
                                <h1 class="page-title-text">
                                    Become a Crypt Member
                                </h1>
                            </div>
                        </div>
                        <div class="col-12 page-intro-description">
                            <h3 class="page-intro-description-text">
                                Provide the following information to begin the profile creation process.  One of our team will review your details and follow up by email as soon as possible.  We are dying for you to join us!
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row my-10 justify-content-center">
                        <div class="col-md-8">
                            <div class="card page-content-card">
                                <form class="page-form was-validated" action="" method="post" novalidate>
                                    <div class="row">
                                        <div class="col-md-12 page-form-section">
                                            <h4 class="page-form-section-text">Personal Info</h5>
                                        </div>
                                    </div>
                                    <div class="row pb-4">
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="firstname" placeholder="First Name" minlength="2" required>
                                                <label for="firstname">First Name</label>
                                                <div class="invalid-feedback">
                                                    First name must include at least two characters.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="lastname" placeholder="Last Name" minlength="3" required>
                                                <label for="lastname">Last Name</label>
                                                <div class="invalid-feedback">
                                                    Last name must include at least three characters.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row pb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating has-validation">
                                                <input type="email" class="form-control" id="email" placeholder="Email" required>
                                                <label for="email">Email</label>
                                                    <div class="invalid-feedback">
                                                        Email address must be in format <span class="fst-italic">[email protected]</span>.
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 page-form-section">
                                            <h4 class="page-form-section-text">Profile Information</h5>
                                        </div>
                                    </div>
                                    <div class="row pb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="username" placeholder="User Name" minlength="5" required>
                                                <label for="username">User Name</label>
                                                <div class="invalid-feedback">
                                                    User name must contain at least five characters.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row pb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="password" class="form-control" id="password" placeholder="Password" onkeypress="ValidatePassword()" required>
                                                <label for="password">Password</label>
                                                <div class="invalid-feedback">
                                                    Password must contain at least seven characters.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row pb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="password" class="form-control" id="confirmpassword" placeholder="Confirm Password" onkeypress="ValidatePassword()" required>
                                                <label for="password">Confirm Password</label>
                                            </div>
                                            <div class="invalid-feedback">
                                                    Passwords do not match.
                                                </div>
                                        </div>
                                    </div>
                                    <div class="row pb-3">
                                        <div class="col-md-12">
                                            <button class="btn btn-warning" type="submit" id="submit">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-2">
            <section id="page-sidebar-right">
                
            </section>
        </div>
    </div>
</div>       

<?php /* require_once ('../inc/footer.php'); */ ?>

Custom CSS

 /* Import site font */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200;10..48,300;10..48,400;10..48,500;10..48,600;10..48,700;10..48,800&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/*Import Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

:root {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px;  
}

body {
    background: #ffab88;
}

.a {
    color: #f64;
}

/* Header */

.header-container {
    background: #ffab88;
}

.header-logo img {
    display: block;
    max-width: 100%;
    width: 62%;
    margin: auto 0;
}

.header-userinfo {
    margin-top: 10px;
}

.nav-top {
    box-shadow: 0 1px 8px #f65;
}

.navbar-nav a.nav-link {
    margin-left: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #f65;
}

.navbar-nav a.nav-link:first {
    margin-left: 0;
}

.navbar-nav a.active {
    color: #fff !important;
}

.navbar-nav a.nav-link:hover {
    font-weight: bolder;
    color: #08f;
}

.nav-link-icon {
    margin-right: 8px;
}

.nav-bottom {
    box-shadow: 0 -1px 8px #f65;
}

.navbar-nav a.nav-link-bottom {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

@media (min-width: 768px) {


    .header-logo .display-3 {
        line-height: 1.5;
    }

    .header-tagline h3 {
        line-height: 3.75;
    }

    .header-userinfo {
        margin: 0;
    }

    .header-userinfo-icon .fs-2,
    .header-userinfo-greeting .fs-2  {
        line-height: 3;
    }
}

/* Content */

#content {
    padding-bottom: 125px;
}

.content-container {
    margin-top: 250px;
    padding-bottom: 35px !important;
}

@media (min-width: 768px) {
    #content {
        padding-bottom: 0;
    }
}

#page-content {
    margin-top: 20px;
}

@media (min-width: 768px) {
    #page-content {
        margin: 0;
    }
}

.page-intro-text {
    margin: 0 10px 35px 10px;
}

.page-intro-text h1,
.page-intro-text h2,
.page-intro-text h3 {
    word-spacing: 0.5rem;
    text-shadow: 0 1px #666;
    color: #fff;
}

.page-intro-text h1.page-title-text,
.page-intro-text h2.page-title-text {
    text-align: center;
    font-variant: small-caps;
}

.page-intro-description {
    margin: 8px 0 35px 0;
}

h3.page-intro-description-text {
    color: #fff;
    text-align: center;
}

.page-content-card {
    box-shadow: 0 1px 8px rgb(190,190,190);
    background: rgba(190,190,190,0.9);
}

.page-content-card .card-body {
    position:relative;
    top: -8px;
}

.card .display-6 {
    text-transform: uppercase;
    text-align: center;
}

.page-content-card .card-body-subtitle {
    letter-spacing: 2px;
    text-align: center;
}

.page-content-card .card-body-text {
    margin: 1.75rem 0.8rem 0 0.8rem;
    line-height: 1.5;
}

.headline-container {
    padding: 20px 0.8rem;
    border-top: 1px #fff solid !important;
}

.headline-container:first-of-type {
    border: none;
}

h5.headline-category {
    position: relative;
    top: -18px;
    left: -15px;
    padding: 4px;
    font-variant: small-caps;
}

h4.headline-title {
    font-variant: small-caps;
}

h6.publish-date {
    position: relative;
    top: -35px;
    right: -15px;
    padding: 4px;
}

.page-form {
    margin: 8px 0px;
    padding: 20px;

}

.page-form-section {

    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px #000 solid;
}

.page-form-section:first-child {

    margin-top: 0;
}

h4.page-form-section-text {
    text-transform: uppercase;
}

/* Sidebar */

.sidebar-content-card {
    margin-top: 10px;
    box-shadow: 0 1px 8px rgb(190,190,190);
    background: rgba(2, 0, 133, 0.9);
}

ul.sidebar-nav {
    padding-left: 3px;;
}

li.sidebar-nav-item {
    list-style: none;
}

a.sidebar-nav-link {
    text-decoration: none;
    color: #ff0;
}

/* Footer */

.footer-text {
    z-index: 100;
}

.site-copyright {
    font-size: 0.75rem;
}

/* Modals */

h1.modal-title {
    text-align: center !important;
}

JSS

 (function() {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

Answers

- Ronin0822
- September 1, 2023 at 6:58 am
- 0 votes
0
Try adding the name attribute to the inputs and button.

name=“firstname”

name=“lastname”

name=“submit”

A control’s "control name" is given by its name attribute.

Login or Signup to reply.

- Greenreader9
- September 1, 2023 at 3:14 pm
- 0 votes
0
You need to use the "name" attribute on the forum fields to send the data to PHP when the forum is submitted.

For Example:
```
<input type="text" class="form-control" id="firstname" placeholder="First Name" minlength="2" name="firstname" required>
```
```
<input type="text" class="form-control" id="lastname" placeholder="Last Name" minlength="3" name="lastname" required>
```
The name attribute must be unique (Just like the id attribute)
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.