[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?

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

Posted on 2017-09-19
17
Low Priority
?
72 Views
Last Modified: 2017-09-27
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
0
Comment
Question by:v s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
  • 3
17 Comments
 

Expert Comment

by:Md Zafar
ID: 42301192
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
 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42301213
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
 

Author Comment

by:v s
ID: 42302803
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42302819
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
 

Author Comment

by:v s
ID: 42302824
@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
 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42302865
Do you want to send that value to a php file?
0
 

Author Comment

by:v s
ID: 42302870
yes
0
 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42302876
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
 

Author Comment

by:v s
ID: 42304519
@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
 

Author Comment

by:v s
ID: 42304532
@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
 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42304597
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
 

Author Comment

by:v s
ID: 42304609
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
 

Author Comment

by:v s
ID: 42304621
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
 

Expert Comment

by:Md Zafar
ID: 42304849
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
 

Expert Comment

by:Md Zafar
ID: 42304854
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
 

Author Comment

by:v s
ID: 42307297
@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
 

Author Comment

by:v s
ID: 42310345
@Md Zafar

waiting for your response
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question