Form not submitting after doing styling in CSS

johannesmoolman · April 2, 2019, 8:29am

Hi Guys
I have been running this form many times and it always submitted the information to the database. I now started in styling it with CSS and now when i submit it goes to the PHP file as needed but just blank I tried all SQL error checking and see nothing. I am pretty sure it must be to do with a DIV element or something like that.

Below a small snippet of the form with 2 fields that is sent to the DB

<form action="insert.php" method="post">
<div class="form-group">
            <label for="input" class="control-label"></label><i class="bar"></i>
           <textarea required="required"></textarea>
          <label for="textarea" class="control-label">Enter Short Description</label><i class="bar"></i>
</div>
           
    <div class="form-group">
       <input  type="text"   minlength="6" maxlength="6" name="door" value ="" required="required"/>  
   <label for="select" class="control-label">Enter Closest Door Number</label><i class="bar"></i>
            </div>
 <div class="button-container">
 <button type="submit" class="button" name ="submit"><span>Submit</span></button>
            </div>   
        </form>

Gandalf · April 2, 2019, 8:58am

I can’t imagine how adding CSS would stop your form from working (unless you are using it to hide an element). If you remove your added CSS does the form still work?

We would really need to see your CSS and insert.php script though.

johannesmoolman · April 2, 2019, 9:06am

I will post the info as requested,

johannesmoolman · April 2, 2019, 9:07am

//INSERT.PHP

<?php
session_start();
include('dbconnection.php');
error_reporting(E_ALL);
ini_set('display_errors', 1);
error_reporting(E_ALL);
 
  
$date = date("Y-m-d H:i:s");


$newtype='';
$status = "OPEN";

	if(isset($_POST['types'])&&isset($_POST['stypes'])&&isset($_POST['urgency'])&&isset($_POST['description'])&&isset($_POST['door'])&&isset($_POST['area'])&&isset($_POST['designation'])&&isset($_POST['reportedby'])&&isset($_POST['contactnumber'])){
		$types= mysqli_real_escape_string ($link6, $_REQUEST['types']);
        
		$stype= mysqli_real_escape_string($link6,$_REQUEST['stypes']);
		$urgency = mysqli_real_escape_string($link6,$_REQUEST['urgency']);
		$description = mysqli_real_escape_string($link6,$_REQUEST['description']);
		$door= mysqli_real_escape_string($link6,$_REQUEST['door']);
		$area= mysqli_real_escape_string($link6,$_REQUEST['area']);
		$designation = mysqli_real_escape_string($link6,$_REQUEST['designation']);
		$reportedby= mysqli_real_escape_string($link6,$_REQUEST['reportedby']);
		$contactnumber = mysqli_real_escape_string($link6,$_REQUEST['contactnumber']);
		
     if(!empty($types)&&!empty($stype)&&!empty($urgency)&&!empty($description)&&!empty($door)&&!empty($area)&&!empty($designation)&&!empty($reportedby)&&!empty($contactnumber)){	 
     
         if ($types == 1){
            $newtype = "Building";
        }
         if($types==2){
             $newtype = "Plumbing";
         }
          
         if($types==3){
                 $newtype="Electrical";
             }
         
        if($types==4){
          $newtype="Temperatures";
        }
        if($types==5){
            $newtype="New Project";
        }
        if($types==10){
            $newtype="Carpentry";
        }
        if($types==11){
            $newtype="Mechanical";
        }
    
		
         
         $sql ="INSERT INTO defects (type,dtype,urgency,descr,doornum,area,reportedby,namesurname,contact,date,status) VALUES 
        
      
        
       ('$newtype','$stype','$urgency','$description','$door','$area','$designation','$reportedby','$contactnumber','$date','$status')";
 
	

  if(mysqli_query($link6, $sql)){
    
      $last_id = mysqli_insert_id($link6);
      $_SESSION['last_id'] = $last_id;
      
   
      header("location:loader.php");
      
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link6);
}
     }else {
         echo 'Please enter Data';
     }
 }
 


 
?>

johannesmoolman · April 2, 2019, 9:07am

//THE COMPLETE FORM TO SUBMIT

<?php 
error_reporting(E_ALL); ini_set('display_errors', 1);
include ('dbconnection.php');
?>

<html>
    <head>
        <title></title>
    <link href="dstyle.css" rel="stylesheet" >
    <script type="text/javascript">
        //Function onchange to populate second dropdown
    function change_type()
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?catdd="+document.getElementById("catdd").value,false);
        xmlhttp.send(null);
        document.getElementById("stype").innerHTML=xmlhttp.responseText;
        
    }

</script>
        
      </head>
  
<body>
    
    <form action="insert.php" method="post">
        <div class="form-group">
            <select required="required" id="catdd" name="types" onChange="change_type()">
            <option disabled= "" selected= "" value= ""></option>
    <?php
        $query = "SELECT * FROM category"; 
        $result = mysqli_query($link,$query);
        mysqli_error($link);
        while($row=mysqli_fetch_array($result)){
   ?>   
        <option value= "<?php echo $row["id"];?>"><?php echo $row["type"];?></option>          
<?php
            
}
           
   ?>                  
</select>
        
        <label for="select" class="control-label">Please Select Trade Type Of The Defect</label><i class="bar"></i>
            </div>
            <!--Populated by Query seperate PHP file-->
            
<div  id="stype">
    
    <div class="form-group">
       
    <select required="required" name="stypes">
     
        <option></option>
        
    </select>
        
         <label for="select" class="control-label">Please Select </label><i class="bar"></i>
        
        </div>
    
            </div>
  
            
    <div class="form-group">
            
    <select required="required"name="urgency">
        
    <option disabled="" selected="" value=""></option>
        
   <?php
        
        $query2 = "SELECT * FROM urgent";
        $result2= mysqli_query($link2,$query2);
        $options2="";
        while($row2 =mysqli_fetch_array($result2)){
    
        $options2=$options2. "<option> $row2[0]</option>";
}
         echo $options2;
    ?>
        
    </select>
    <label for="select" class="control-label">Please Select The Urgency Of The Defect</label><i class="bar"></i>
            </div>
        
              <div class="form-group">
            <label for="input" class="control-label"></label><i class="bar"></i>
         <textarea required="required"></textarea>
      <label for="textarea" class="control-label">Enter Short Description</label><i class="bar"></i>
    </div>
        
          
    <div class="form-group">
       <input  type="text"   minlength="6" maxlength="6" name="door" value ="" required="required"/>  
   <label for="select" class="control-label">Enter Closest Door Number</label><i class="bar"></i>
            </div>
                      <div class="form-group">
            
        <select required="required" name="area">
            
        <option disabled="" selected="" value=""></option>
            
            <?php
                    $query3="SELECT * FROM areas";
                    $result3=mysqli_query($link3, $query3);
                    $options3="";
                    while($row3 =mysqli_fetch_array($result3)){
                    $options3=$options3. "<option> $row3[0]</option>";
}
             echo $options3;
        ?>
            
        </select>
                <label for="select" class="control-label">Specify the Area</label><i class="bar"></i>
            </div>  
           
     
    <div class="form-group">
       
            
        <select name="designation" required="required">
            
            <option disabled="" selected="" value="">-- Please Select Title -- </option>
            <?php
                 
                $query4 = "SELECT * FROM titletype";
                $result4=mysqli_query($link4,$query4);
                $options4="";
                while($row4 =mysqli_fetch_array($result4)){

                $options4=$options4. "<option> $row4[0]</option>";
}
                 echo $options4;
            ?>

    </select>
        <label for="select" class="control-label">Reported by</label><i class="bar"></i>
            </div>    
 
        <div class="form-group">
    
        
        <input type="textbox" name="reportedby" value =""required="required"/> 
       <label for="textarea" class="control-label">Surname</label><i class="bar"></i>
            </div>
          <div class="form-group">  
        
            
            <input type="textbox" name="contactnumber" value =""required="required"/>
     <label for="textarea" class="control-label">Contact Number</label><i class="bar"></i>
            </div>
            <div class="button-container">
 <button type="submit" class="button" name ="submit"><span>Submit</span></button>
      
            </div>  
            
        </form>   
    
    </body>
    
    
    
</html>

johannesmoolman · April 2, 2019, 9:09am

//CSS

body,
input,
select,
textarea,
body * {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
  box-sizing: border-box;
}

body {
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);
  background-image: linear-gradient(top, #f2f2f2, #e6e6e6);
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 2em;
}

.container {
  position: relative;
  max-width: 40rem;
  margin: 5rem auto;
  background: #fff;
  width: 100%;
  padding: 3rem 5rem 0;
  border-radius: 1px;
}
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-transition: -webkit-transform 0.28s ease-in-out;
  transition: -webkit-transform 0.28s ease-in-out;
  transition: transform 0.28s ease-in-out;
  transition: transform 0.28s ease-in-out, -webkit-transform 0.28s ease-in-out;
  z-index: -1;
}
.container:hover::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.button-container {
  text-align: center;
}

fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-radio,
.form-group {
  position: relative;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 1.9rem;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 1rem;
  height: 3rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}
.form-group .control-label {
  position: absolute;
  top: 0.25rem;
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: #b3b3b3;
  font-size: 1rem;
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
    
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding-top:10 ;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #337ab7;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: #337ab7;
  border-color: #337ab7;
}
.radio label:hover .helper {
  color: #337ab7;
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #337ab7;
}

.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #337ab7;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

.button {
  position: relative;
  background: currentColor;
  border: 1px solid currentColor;
  font-size: 1.1rem;
  color: #4f93ce;
  margin: 3rem 0;
  padding: 0.75rem 3rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #337ab7;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}

TechnoBear · April 2, 2019, 9:17am

Off Topic

@johannesmoolman: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your above posts for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

johannesmoolman · April 2, 2019, 9:20am

Thanks for the heads up will do that in the future

Gandalf · April 2, 2019, 9:23am

You didn’t say whether if you remove the line
<link href=“dstyle.css” rel=“stylesheet” >
the form still works.

johannesmoolman · April 2, 2019, 10:13am

Removed the Link and still the same, goes to Insert.php but just blank , nothing entered into DB and no errors. i even did a Var Dump after submit and nothing is getting displayed

Gandalf · April 2, 2019, 10:34am

So it’s not the CSS. I will move this to the PHP forum.

droopsnoot · April 2, 2019, 10:47am

Should this line

<textarea required="required"></textarea>

have a name attribute? I see you checking for all form fields being set, but I don’t see one called description in the form code.

if(isset($_POST['types'])&&isset($_POST['stypes'])
   &&isset($_POST['urgency'])&&isset($_POST['description'])
   &&isset($_POST['door'])&&isset($_POST['area'])&&isset($_POST['designation'])
   &&isset($_POST['reportedby'])&&isset($_POST['contactnumber'])){

A quick var_dump($_POST) in your PHP code would show you whether I’m just not seeing it.

johannesmoolman · April 2, 2019, 11:17am

i actually also just noticed that, i have a previous version of the file before i started with the CSS, it seems like a replaced Label Tags for the Name Tags will test

johannesmoolman · April 2, 2019, 11:34am

I got it working as per your advise of the text area name…

how does that stop the entire form from not working, and why would my SQL error checking not even pick that up.

any advise

droopsnoot · April 2, 2019, 11:41am

If you look at the line of PHP code I posted:

if(isset($_POST['types'])&&isset($_POST['stypes'])
   &&isset($_POST['urgency'])&&isset($_POST['description'])
   &&isset($_POST['door'])&&isset($_POST['area'])&&isset($_POST['designation'])
   &&isset($_POST['reportedby'])&&isset($_POST['contactnumber'])){

you check to see whether $_POST['description'], and all the other fields, exist. As you hadn’t named that form field, it does not exist, so nothing within your if{} clause would have executed. In that case it never gets to a point where it’s going to try to execute the query.

droopsnoot · April 2, 2019, 11:47am

This bit puzzles me as well:

  if ($types == 1){
            $newtype = "Building";
        }
         if($types==2){
             $newtype = "Plumbing";
         }
          
         if($types==3){
                 $newtype="Electrical";
             }
... and all the rest

In your form, you populate the drop-down selection for types from a separate table called category, and you submit the id of each category. You then convert it back into text and store it in your defects table. If you have a code for each category, why don’t you store the code in that table?

Have a read on “database normalisation” which I believe is the term for such things. Basically if you have a bit of text that will appear in multiple places, it’s often better to store that in a separate table and reference it by ID. Makes it easier to change. By all means use a query to validate the value in your table, but I think you should store the value, not the text.

If for some reason you decided that you have to store the text, and will never want to easily modify one of the values, why don’t you use a query to retrieve it from the table, rather than hard-coding the text and giving yourself a job to modify this code any time you add a new code?

Also:

$sql ="INSERT INTO defects (type,dtype,urgency,descr,doornum,area,reportedby,namesurname,contact,date,status) VALUES 
       ('$newtype','$stype','$urgency','$description','$door','$area','$designation','$reportedby','$contactnumber','$date','$status')";

Is the order of those values correct, specifically the fields after area?

johannesmoolman · April 2, 2019, 12:13pm

Thanks for all the advise , as you probably noticed that a lot of the code came into being while i am still learning but i will definitely look into what you posted

thanks again for the help

system · July 2, 2019, 7:15pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.