Can anyone please make proper alignment of HTML elements in the form(file attached) by applying CSS to it??

The problem i am having in alignment of input and select fields. html and css code is attached. I am having hard time for resolving this as i am beginner in css learning.

Select fields for choosing time       from    [hour] [minutes]              to     [hour][minutes]  should be easily understood by user. right now it is not so.
Page is divided into two parts  - > left and right side.  left side's width is 60% and right side's is 40 %.

Form is in the left side. (which is to be consider)
select.php
capture18.PNG
v sResearcherAsked:
Who is Participating?
 
Md ZafarSr. Software DeveloperCommented:
please use either table or div don't mix both of them.. better option use bootstrap for responsive designing.
please see this attachment and add PHP code with this
Sample.html
0
 
Leonidas DosasCommented:
Check this more simplest solution.I use datetimepicker plugin.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="js/jquery.datetimepicker.full.min.js"></script>
 <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                               
                                               select{
                                                   
                                                     }
                   
                   
                   
        </style> 
</head>
<body>
  <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                      
                           <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>

                     <p>   
                               
                            <label> Select Room</label>
                            <select name="select_room" >
                        
                            <option value="-1">Select</option>
                        
                         
                            </select>
                    </p>
            
           
            <label>Event </label>
            <input type="text" name="event">  <br><br>              
           

              <input type="text" id="date_1">         
                       
            
            
            
            
            
            

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                                                      
                
                
                       </fieldset>
                    </form>
            <div style="float: right; width:40%" >
                        
            </div>
        
          
                               </div>
                               </div>
                               </div>
<script>
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({
    onSelectDate:function(){
  console.log($('#date_1').val());
}
});      
</script> 
</body>
</html>

Open in new window


---------.JPG
0
 
v sResearcherAuthor Commented:
hello @Leonidas Dosas
Thank you for this help. I want to ask one thing that the value of datetime we get from datetime picker will be of which type. datetime or timestamp??

 will there be any need to convert it before storing it into the database (I want to store it as "datetime" in mysql )
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Leonidas DosasCommented:
The val that return the function is a string.To convert it to unixtime then replace the script to this:
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    alert(dateTime);
}
}); 

Open in new window

---------.JPG
0
 
v sResearcherAuthor Commented:
@Leonidas Dosas
okay....
 how to access that datetime value upon submitting form. as name property on input tag is not defined

<input type="text" id="date_1">        

  $datetime= $_POST['date_1'];   ???? is it right or have to define name property
0
 
Leonidas DosasCommented:
Do you want to send that value to a php file?
0
 
v sResearcherAuthor Commented:
yes
0
 
Leonidas DosasCommented:
Then use the $,post Jquery   method . Replace the script with that:

$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    $.post('myphpfile.php',{data:dateTime},function(res){
        console.log(res)
    });
}
});   

Open in new window

And the myphpfile.php is that:
<?php
if(isset($_POST['data'])){
    $datetime=$_POST['data'];
    echo json_encode($datetime);
}
?>

Open in new window


In the first page if you open the console when you select a datetime you have these string returns:
---------.JPG
Now in myphpfile.php you can manipulate the $datetime variable as you want (to send it into database etc..)
0
 
v sResearcherAuthor Commented:
@Leonidas Dosas

these jquery files are not working. these files contain errors. I have attached an image showing output.
Also attaching code
jquery.PNG

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
       <title>page division of html</title>
       <link rel="stylesheet" href="jquery.datetimepicker.min.css" />
       <script src="jquery.js"></script>
       <script src="jquery.datetimepicker.full.min.js"></script>
           <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                                                                                  
                                                 
                                         
                   
                   
        </style> 
    </head>
    <body>
        <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                       <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>
             <?php  
        include 'config.php';
        $option="";
         $sql= mysqli_query($conn,"SELECT * FROM spacemaster");
         //$row= mysqli_num_rows($sql);
           
      while($row = mysqli_fetch_array($sql))
{
$option .= '<option value = "'.$row['Id'].'"     name = "'.$row['RoomName'].'"        >'.$row['RoomName'].'</option>';
}
         
?>
                               <p>   
                               
                               <label> Select Room</label>
                            <select name="select_room" >
                        
                       <option value="-1">Select</option>
                         <?php 
                          echo $option;
                            ?>
                         
                         </select>
                           </p>
            
            <p>
                <label>Event </label>
            <input type="text" name="event">  <br><br>              
            <p>
            <p>
                
                 <input type="text" id="date_1"> 
                
                
                       </fieldset>
            
            
            
            
            
            <br><br>

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                </div>
            </div>  
                
         
                
                
                
            <div style="float: right; width:40%" >
                
            </div>
                           
            <script>
                $.datetimepicker.setLocale('en');
                $('#date_1').datetimepicker({    
                onSelectDate:function(){
                var dateTime=$('#date_1').val();
                dateTime=Math.round(new Date(dateTime).getTime()/1000);
                $.post('booking.php',{data:dateTime},function(res){
                console.log(res);
    });
}
});   
            
            </script>

Open in new window

0
 
v sResearcherAuthor Commented:
@Md Zafar
i am using netbeans as coding environment. i have not use bootstrap yet in netbeans. is there any need to add plugin for that ??

right now following output is showing (IMAGE ATTACHED)

Errors showing in code (no classes found)


error.PNG
bootstrap.PNG
0
 
Leonidas DosasCommented:
Use the src that I post to you:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Open in new window

What errors do you have in console?
To help you understand when you select a datetime in the input via plugin the value "transfer" via POST method into your php file that you can fetch it.Then you can add this value into your database as you know.
0
 
v sResearcherAuthor Commented:
i have used that also. did not work.
then what i did is create a new js file copied that code from that url in that file then i have used:- <script  src="jquery.js"></script>
0
 
v sResearcherAuthor Commented:
one more thing error is in the last lines of the file  "global variable define is not declared"


if ( typeof define === "function" && define.amd ) {
      define( "jquery", [], function() {
            return jQuery;
      } );
}
0
 
Md ZafarSr. Software DeveloperCommented:
Hi ... i am send you full of code all jquery bootstrat and css file plz find the attachment .....feel free to contact for any issu
Sample-Page.zip
0
 
Md ZafarSr. Software DeveloperCommented:
no issue what environment u are using for development .. but plz check how i am using it or send me your page ..i will design for you
0
 
v sResearcherAuthor Commented:
@Md Zafar
I am using netbeans. i have developed an application of meeting rooms booking.
i have an issue with just designing. I have been through your page you designed. Its quite good. Now i want to integrate my coding with your page designed.

the format of datetime get from datetime picker you have used should be same as $bookingDate and $currentDate

In My project right now i am considering booking for only time interval within one day.
 i have compared datetime together in mycode.

code has been attached.You can go through my code and design page accordingly.
booking.php
0
 
v sResearcherAuthor Commented:
@Md Zafar

waiting for your response
0
All Courses

From novice to tech pro — start learning today.