Form Issue

mikebrowntsbod · September 20, 2017

I have a form here

https://github.com/mikebrowntsbod/HOAPackage/blob/develop/violations/boardHearings/request.php

but when I submit it and print out the $_POST variable nothing is shown it is all blank. What am i missing?

https://github.com/mikebrowntsbod/HOAPackage/blob/develop/violations/boardHearings/request1.php

Barand · September 20, 2017

I have a paranoid aversion to downloading files (especially from a first-time post). Post the relevant code, inside code tags.

ginerjm · September 20, 2017

Is your form specifying the method being used? Is it POST?

mikebrowntsbod · September 20, 2017

I have a paranoid aversion to downloading files (especially from a first-time post). Post the relevant code, inside code tags.

I had another account on here but I forgot the e-mail it was attached two.

Is your form specifying the method being used? Is it POST?

It is using POST

mikebrowntsbod · September 20, 2017

Request.php

<?php require "../../login/loginheader.php"; ?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Request a Board Hearing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../../css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="../../css/main.css" rel="stylesheet" media="screen">
	   <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
   	<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
   	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	  
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
	.bs-example{
    	margin: 20px;
    }
</style>
	  <style>
		  /*Contact sectiom*/
.content-header{
  font-family: 'Oleo Script', cursive;
  color:#fcc500;
  font-size: 45px;
}

.section-content{
  text-align: center; 

}
#contact{
    
    font-family: 'Teko', sans-serif;
  padding-top: 60px;
  width: 100%;
  height: 550px;
  background: #3a6186; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color : #fff;    
}
.contact-section{
  padding-top: 40px;
}
.contact-section .col-md-6{
  width: 50%;
}

.form-line{
  border-right: 1px solid #B29999;
}

.form-group{
  margin-top: 10px;
}
label{
  font-size: 1.3em;
  line-height: 1em;
  font-weight: normal;
}
.form-control{
  font-size: 1.3em;
  color: #080808;
}
textarea.form-control {
    height: 135px;
   /* margin-top: px;*/
}

.submit{
  font-size: 1.1em;
  float: right;
  width: 150px;
  background-color: transparent;
  color: #fff;

}
	  </style>
	  
	  <script>
		  var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
	  </script>
  </head>
  <body>
    <?php include "../../includes/menu.php"; ?>
	  <!--<a class="navbar-brand" href="#"><strong>Home</strong></a>-->
	  <p class="navbar-brand"><strong>Home</strong></p>
	  <?php include "../../includes/lowermenu.php"; ?>

	     
<section id="contact">
			<div class="section-content">
				<h1 class="section-header">Request a  <span class="content-header wow fadeIn "data-wow-delay="0.2s" data-wow-duration="2s">
					Board Hearing</span></h1>
				<h3>Please submit the following information to officially request a board hearing</h3>
			</div>
			<div class="contact-section">
			<div class="container">
				<form action="request1.php" method="POST" id="boardhearing">
					<div class="col-md-6 form-line">
			  			<div class="form-group">
			  				<label for="exampleInputUsername">Your name</label>
					    	<input type="text" class="form-control" id="" placeholder=" Enter Name">
				  		</div>
						<div class="form-group">
			  				<label for="exampleInputUsername">Address</label>
							 <input id="autocomplete" placeholder="Enter your address"
      onFocus="geolocate()" type="text" class="form-control">
				  		</div>
				  		<div class="form-group">
					    	<label for="exampleInputEmail">Email Address</label>
					    	<input type="email" class="form-control" id="exampleInputEmail" placeholder=" Enter Email id">
					  	</div>	
					  	<div class="form-group">
					    	<label for="telephone">Phone Number</label>
					    	<input type="tel" class="form-control" id="telephone" placeholder=" Enter 10-digit number">
			  			</div>
			  		</div>
			  		<div class="col-md-6">
			  			<div class="form-group">
			  				<label for ="description"> Message</label>
			  			 	<textarea  class="form-control" id="description" placeholder="Enter Your Message"></textarea>
			  			</div>
			  			<div>

			  				<button type="submit" 
								form="boardhearing"
								class="btn btn-default submit">
								
								<i class="fa fa-paper-plane" aria-hidden="true"></i>  
								Send Request</button>
			  			</div>
			  			
					</div>
				</form>
			</div>
		</section>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkYuBKzIvPZwk0sikIN8GKzQQT8qJ48cw&libraries=places&callback=initAutocomplete" async defer></script>  
  </body>
</html>

Request1.php

<?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?>

Edited September 20, 2017 by mikebrowntsbod

maxxd · September 20, 2017

I didn't read through all the code you posted, but you're missing the name attribute for all of your form elements. Add those and give it a shot.

mikebrowntsbod · September 20, 2017

I didn't read through all the code you posted, but you're missing the name attribute for all of your form elements. Add those and give it a shot.

Thanks maxxd. I will check this out and i will provide an update. If it is this which I think it is, I should have known it was something I was missing. I was getting frustrated last night as it was late.

Edited September 20, 2017 by mikebrowntsbod

cyberRobot · September 20, 2017

Side note: to simplify things, you could wrap the <label> tag around the form field. That way you wouldn't need the "for" and "id" attributes. :happy-04:

More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Simple_label_example

mikebrowntsbod · September 20, 2017

Still having the issues

 </head>
  <body>
    <?php include "../../includes/menu.php"; ?>
      <!--<a class="navbar-brand" href="#"><strong>Home</strong></a>-->
      <p class="navbar-brand"><strong>Home</strong></p>
      <?php include "../../includes/lowermenu.php"; ?>

         
<section id="contact">
            <div class="section-content">
                <h1 class="section-header">Request a  <span class="content-header wow fadeIn "data-wow-delay="0.2s" data-wow-duration="2s">
                    Board Hearing</span></h1>
                <h3>Please submit the following information to officially request a board hearing</h3>
            </div>
            <div class="contact-section">
            <div class="container">
                <form action="request1.php" method="POST" id="boardhearing">
                    <div class="col-md-6 form-line">
                          <div class="form-group">
                              <label for="exampleInputUsername">Your name</label>
                            <input name="name" id="name" type="text" class="form-control" id="name" placeholder=" Enter Name">
                          </div>
                        <div class="form-group">
                              <label for="exampleInputUsername">Address</label>
                             <input name="autocomplete" id="autocomplete" placeholder="Enter your address"
      onFocus="geolocate()" type="text" class="form-control">
                          </div>
                          <div class="form-group">
                            <label for="exampleInputEmail">Email Address</label>
                            <input name="email" type="email" class="form-control" id="exampleInputEmail" placeholder=" Enter Email id">
                          </div>    
                          <div class="form-group">
                            <label for="telephone">Phone Number</label>
                            <input name="telephone"type="tel" class="form-control" id="telephone" placeholder=" Enter 10-digit number">
                          </div>
                      </div>
                      <div class="col-md-6">
                          <div class="form-group">
                              <label for ="description"> Message</label>
                               <textarea  name="description" class="form-control" id="description" placeholder="Enter Your Message"></textarea>
                          </div>
                          <div>

                              <button type="submit"
                                form="boardhearing"
                                class="btn btn-default submit">
                                
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>  
                                Send Request</button>
                          </div>
                          
                    </div>
                </form>
            </div>
        </section>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkYuBKzIvPZwk0sikIN8GKzQQT8qJ48cw&libraries=places&callback=initAutocomplete" async defer></script>  
  </body>
</html>

mikebrowntsbod · September 20, 2017

Side note: to simplify things, you could wrap the <label> tag around the form field. That way you wouldn't need the "for" and "id" attributes.

More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Simple_label_example

Thanks cyberRobot. I will take that under advisement. I can only make "simple" quick changes from where I am at right now.

ginerjm · September 20, 2017

Try using an input element for your submit instead of the button one.

mikebrowntsbod · September 20, 2017

Try using an input element for your submit instead of the button one.

Grrr I thought I changed that all ready. That did it! Thank yo

Sign In

Form Issue

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information