I have a form in Bootstrap 3 that's inside a modal. There's a button called "submit" where when it's clicked the stuff that was entered in the form should be sent to the database. Although when I click "Submit" nothing happens.
Here is a live preview: http://rentmycar.pe.hu/index.html
<!--Checkout Modal Start -->
<div class = "modal fade" id = "checkoutModal" tabindex = "-1" role = "dialog" aria-labelledby = "checkoutModalLabel" aria-hidden = "true" data-backdrop = "static">
<div class = "modal-dialog">
<div class = "modal-content">
<form action = "index.html" method = "post" id = "checkout-form" name = "checkout-form">
<!--Modal header start -->
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">×
</button>
<h4 class = "modal-title" id = "myModalLabel">Complete reservation</h4>
</div>
<!--Modal header end -->
<!--Modal body start -->
<div class = "modal-body">
<!--Checkout Info start -->
<div class = "checkout-info-box">
<h3><i class = "fa fa-info-circle"></i> Upon completing this reservation enquiry, you will receive::</h3>
<p>Your rental voucher to produce on arrival at the rental desk and a toll-free customer support number.</p>
</div>
<!--Checkout Info end -->
<!--Checkout Rental Info start -->
<div class = "checkout-vehicle-info">
<div class = "location-date-info">
<h3>Location & Date</h3>
<div class = "info-box">
<span class = "glyphicon glyphicon-calendar"></span>
<h4 class = "info-box-title">Pick-Up Time</h4>
<p class = "info-box-description"><span id = "pick-up-date-ph"></span> at <span id = "pick-up-time-ph"></span></p>
<input type = "hidden" name = "pick-up" id = "pick-up" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-calendar"></span>
<h4 class = "info-box-title">Drop-Off Time</h4>
<p class = "info-box-description"><span id = "drop-off-date-ph"></span> at <span id = "drop-off-time-ph"></span></p>
<input type = "hidden" name = "drop-off" id = "drop-off" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-map-marker"></span>
<h4 class = "info-box-title">Pick-Up Location</h4>
<p class = "info-box-description" id = "pickup-location-ph"></p>
<input type = "hidden" name = "pickup-location" id = "pickup-location" value = "">
</div>
<div class = "info-box">
<span class = "glyphicon glyphicon-map-marker"></span>
<h4 class = "info-box-title">Drop-Off Location</h4>
<p class = "info-box-description" id = "dropoff-location-ph"></p>
<input type = "hidden" name = "dropoff-location" id = "dropoff-location" value = "">
</div>
</div>
<div class = "vehicle-info">
<h3>CAR: <span id = "selected-car-ph"></span></h3> [Vehicle Models]
<input type = "hidden" name = "selected-car" id = "selected-car" value = "">
<div class = "clearfix"></div>
<div class = "vehicle-image">
<img class = "img-responsive" id = "selected-vehicle-image" src = "#" alt = "Vehicle">
</div>
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Rental Info end -->
<hr>
<!--Checkout Personal Info start -->
<div class = "checkout-personal-info">
<div class = "alert hidden" id = "checkout-form-msg">
test
</div>
<h3>PERSONAL INFORMATION</h3>
<div class = "form-group left">
<label for = "first-name">First Name:</label>
<input type = "text" class = "form-control" name = "first-name" id = "first-name" placeholder = "Enter your first name">
</div>
<div class = "form-group right">
<label for = "last-name">Last Name:</label>
<input type = "text" class = "form-control" name = "last-name" id = "last-name" placeholder = "Enter your last name">
</div>
<div class = "form-group left">
<label for = "phone-number">Phone Number:</label>
<input type = "text" class = "form-control" name = "phone-number" id = "phone-number" placeholder = "Enter your phone number">
</div>
<div class = "form-group right age">
<label for = "age">Age:</label>
<div class = "styled-select-age">
<select name = "age" id = "age">
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
<option value = "25">25</option>
<option value = "26">26</option>
<option value = "27">27</option>
<option value = "28">28</option>
<option value = "29">29</option>
<option value = "30">30</option>
<option value = "31">31</option>
<option value = "32">32</option>
<option value = "33">33</option>
<option value = "34">34</option>
<option value = "35">35</option>
<option value = "36">36</option>
<option value = "37">37</option>
<option value = "38">38</option>
<option value = "39">39</option>
<option value = "40">40</option>
<option value = "41">41</option>
<option value = "42">42</option>
<option value = "43">43</option>
<option value = "44">44</option>
<option value = "45">45</option>
<option value = "46">46</option>
<option value = "47">47</option>
<option value = "48">48</option>
<option value = "49">49</option>
<option value = "50">50</option>
<option value = "51">51</option>
<option value = "52">52</option>
<option value = "53">53</option>
<option value = "54">54</option>
<option value = "55">55</option>
<option value = "56">56</option>
<option value = "57">57</option>
<option value = "58">58</option>
<option value = "59">59</option>
<option value = "50">50</option>
<option value = "61">61</option>
<option value = "62">62</option>
<option value = "63">63</option>
<option value = "64">64</option>
<option value = "65">65</option>
<option value = "66">66</option>
<option value = "67">67</option>
<option value = "68">68</option>
<option value = "69">69</option>
<option value = "70">70</option>
<option value = "71">71</option>
<option value = "72">72</option>
<option value = "73">73</option>
<option value = "74">74</option>
<option value = "75">75</option>
<option value = "76">76</option>
<option value = "77">77</option>
<option value = "78">78</option>
<option value = "79">79</option>
<option value = "80">80</option>
<option value = "81">81</option>
<option value = "82">82</option>
<option value = "83">83</option>
<option value = "84">84</option>
<option value = "85">85</option>
<option value = "86">86</option>
<option value = "87">87</option>
<option value = "88">88</option>
<option value = "89">89</option>
<option value = "90">90</option>
<option value = "91">91</option>
<option value = "92">92</option>
<option value = "93">93</option>
<option value = "94">94</option>
<option value = "95">95</option>
<option value = "96">96</option>
<option value = "97">97</option>
<option value = "98">98</option>
<option value = "99">99</option>
<option value = "100">100</option>
</select>
</div>
</div>
<div class = "form-group left">
<label for = "email-address">Email:</label>
<input type = "email" class = "form-control" name = "email-address" id = "email-address" placeholder = "Enter your email address">
</div>
<div class = "form-group right">
<label for = "email-address-confirm">Confirm Email Address:</label>
<input type = "email" class = "form-control" name = "email-address-confirm" id = "email-address-confirm" placeholder = "Confirm your email address">
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Personal Info end -->
<!--Checkout Address Info start -->
<div class = "checkout-address-info">
<div class = "form-group address">
<label for = "address">Address</label>
<input type = "text" class = "form-control" name = "address" id = "address" placeholder = "Enter your Street an No.">
</div>
<div class = "form-group city">
<label for = "city">City</label>
<input type = "text" class = "form-control" name = "city" id = "city" placeholder = "Enter your City">
</div>
<div class = "form-group zip-code">
<label for = "zip-code">Zip Code</label>
<input type = "text" class = "form-control" name = "zip-code" id = "zip-code" placeholder = "Enter your Zip Code">
</div>
<div class = "clearfix"></div>
</div>
<!--Checkout Address Info end -->
<div class = "newsletter">
<div class = "form-group">
<div class = "checkbox">
<input id = "check1" type = "checkbox" name = "newsletter" value = "yes">
<label for = "check1">Please send me latest news and updates</label>
</div>
</div>
</div>
</div>
<!--Modal body end -->
<!--Modal footer start -->
<div class = "modal-footer">
<span class = "btn-border btn-gray">
<button type = "button" class = "btn btn-default btn-gray" data-dismiss = "modal">Cancel</button>
</span>
<span class = "btn-border btn-yellow">
<button type="submit" class="btn btn-primary btn-yellow">Reserve now</button>
</span>
</div>
<!--Modal footer end -->
</form>
</div>
</div>
</div>
<!--Checkout Modal end -->
You can change this
<button type="submit" class="btn btn-primary btn-yellow">Reserve now</button>
to
<input type="submit" class="btn btn-primary btn-yellow" value="Reserve now">
Change the href from #teaser to something:
<span class="glyphicon glyphicon-calendar"></span> Reserve now
And your reservenow.php should look somathing like this:
<?php
if (isset($_GET['new_reserve'])) {
reservenow();
}
function reservenow() {
....some sql updates here...
}?>
Related
HTML:
<div class = "TopMenu">
<!-- Drop down list for "category" display options -->
<div class ="DropDownLists" >
<label> Categories </label>
<select [formControl] = "selectedCategoryName" (click) = "onCategorySelected()" >
<option *ngFor = "let category of this.getCategoriesFG.controls" >
{{category.controls.name.value}}
</option>
</select>
</div>
<!-- Drop down list for "sort" options -->
<div class = "DropDownLists">
<label> Sort by </label>
<select [formControl] = "mSelectedSortBy" (click) = "onSortBySelected()" >
<option *ngFor = "let i of mSortByOptions" [ngValue] = "i.option">
{{ i.option }}
</option>
</select>
</div>
<!-- Drop down list for "move to" options -->
<div class = "DropDownLists">
<label> Move to </label>
<select [formControl] = "mSelectedCategoryNameMoveTo"
(click) = "onMoveToSelected()">
<option *ngFor = "let category of categories" [ngValue] = "category.name" >
{{category.name}}
</option>
</select>
</div>
<!-- Radio buttons for changing views
* name and formControlName have to have the same name-->
<input type = "radio" name = "view" value = "gridView" [formControl] = "view"> Grid View
<input type = "radio" name = "view" value = "tableView" [formControl] = "view"> Table View
</div>
CSS:
.TopMenu
{
background-color: pink;
float: left;
display: inline;
}
This results in:
I want items inside TopMenu next to each other.
you can use display flex, and justify content to do that
.TopMenu
{
background-color: pink;
float: left;
display: flex;
justify-content: around;
margin-left: 10px;
}
<div class = "TopMenu">
<!-- Drop down list for "category" display options -->
<div class ="DropDownLists" >
<label> Categories </label>
<select [formControl] = "selectedCategoryName" (click) = "onCategorySelected()" >
<option *ngFor = "let category of this.getCategoriesFG.controls" >
{{category.controls.name.value}}
</option>
</select>
</div>
<!-- Drop down list for "sort" options -->
<div class = "DropDownLists">
<label> Sort by </label>
<select [formControl] = "mSelectedSortBy" (click) = "onSortBySelected()" >
<option *ngFor = "let i of mSortByOptions" [ngValue] = "i.option">
{{ i.option }}
</option>
</select>
</div>
<!-- Drop down list for "move to" options -->
<div class = "DropDownLists">
<label> Move to </label>
<select [formControl] = "mSelectedCategoryNameMoveTo"
(click) = "onMoveToSelected()">
<option *ngFor = "let category of categories" [ngValue] = "category.name" >
{{category.name}}
</option>
</select>
</div>
<!-- Radio buttons for changing views
* name and formControlName have to have the same name-->
<input type = "radio" name = "view" value = "gridView" [formControl] = "view"> Grid View
<input type = "radio" name = "view" value = "tableView" [formControl] = "view"> Table View
</div
I have setup a codepen so you can see what I want. Click here to open the codepen: https://codepen.io/tbellmer/pen/RdxBdQ
I am relatively new at this and while the form is functional, I need help with the aesthetics. I would like to have both the Action: and Comment: labels be right aligned. I am trying to use the most modern techniques so not looking to use a table or float.
My code uses a flexbox to have an aside section and main section. Can I use a flexbox or grid to do what I want? Also notice that I used a for some vertical spacing and suspect there is a better way to do this as well.
Your assistance will be greatly appreciated!
<div class="container">
<div class="flex-grid">
<aside class="col sidebar">
<p class = 'ctr'>Welcome</p>
</aside>
<section class="col main">
<h1 class='ctr'>Title</h1>
<hr>
<form action = '#'>
<label for = 'combo'>Action: </label>
<select id = 'combo' name = 'response' required>
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<p></p> <!-- has to be a better way to get space -->
<!-- want to have both Action: and Comment: labels line up to right -->
<label for = 'comment'>Comment: <label>
<input type=text id='comment' size='40' name='comment'>
<p></p>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</form>
</section>
</div>
</div>
You can create a div inside the form tag just like i did below and add a class with the
CSS
.display-align {
display: grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
HTML
<form>
<div class="display-align">
<div>
<label for = 'combo'>Action: </label>
<br><br>
<label for = 'comment'>Comment: <label>
</div>
<div>
<select id = 'combo' name = 'response' required">
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<br><br>
<input type=text id='comment' size='40' name='comment'>
</div>
</div>
<br>
<div>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</div>
</form>
You can use the <br> tag to break a line or still use the <p> .
But may I suggest to you use this instead(its basically the same, but different lol).
I use the same CSS class in this code.
<form>
<fieldset style="max-width: 400px;">
<legend>Title</legend>
<div class="display-align">
<div>
<label for = 'combo'>Action: </label>
<br><br>
<label for = 'comment'>Comment: <label>
</div>
<div>
<select id = 'combo' name = 'response' required">
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<br><br>
<input type=text id='comment' size='40' name='comment'>
</div>
</div>
<br>
<div>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</div>
</fieldset>
</form>
I am not able to correctly apply the decimal rounding, which is selected by the user before calculating a total price, in this angular js app.
HTML
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="lolCtrl">
<form class = "col-md-6">
<div class = "form-group">
<label for = "prezzo"> Prezzo </label>
<input type="number" class = "form-control" placeholder = "Prezzo" ng-model="price">
</div>
<div class = "form-group">
<label for = "percentuale"> Percentuale </label>
<input type="number" class = "form-control" placeholder = "Percentuale" ng-model="percent">
</div>
<div class = "form-group">
<label for = "precisione"> n° decimali </label>
<select class = "form-control" ng-model = "selectPrecision" ng-options="num.value as num.precision for num in decimali"></select>
</div>
</form>
<button class = "btn btn-default" ng-click="percentuale()">Prezzo</button>
<p>Il risultato è:<span ng-model = "selectPrecision">{{risultato | number : 7}}</span></p>
</div>
</body>
JS
var app = angular.module('myApp', []);
app.controller('lolCtrl', function($scope){
$scope.price = 20.232223;
$scope.percent = 20;
$scope.decimali= [
{value:0, precision: "0 decimali"},
{value:1, precision: "1 decimali"},
{value:2, precision: "2 decimali"}
];
$scope.percentuale = function (){
$scope.risultato = $scope.price + $scope.price* $scope.percent/100;
}
});
I have fiddled a lot with this example because I don't want to create a custom filter but it lead me nowhere near the result I want:
Plunkr
I've put a fixed number of 7 decimals for the purpose of giving you working code. I would like it to be dynamic without custom filters because, well I just have to pass a parameter to an already existing framework filter function.
How it's done?
Just change your
<p>Il risultato è:<span ng-model = "selectPrecision">{{risultato | number : 7}}</span></p>
to
<p>Il risultato è:<span ng-model = "selectPrecision">{{risultato | number : selectPrecision}}</span></p>
I have been studying bootsrap, and from what I understand, I just need to wrap my code with <div> elements of various classes.
I have built a webpage and now want to optimize it for mobile devices using Bootstrap.
Here is a portion of my code :
<body onload="initializeCharts()">
<div class = "container-fluid">
<div class = "row">
<div class = "col-lg-12">
<div id = "header">
Sales Statistics for 2015 -16
</div>
</div>
</div>
<div id = "page">
<div class = "row">
<div class = "col-lg-6">
<div id = "quadrant1">
<input type = "button" name = "zoomButton1" id = "zoomButton1" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "chartType" id = "chartType" onchange = "changeChartType()" class = "chartControllers">
<option value = "nothingSelected">Select chart type</option>
<option value = "column2d">2D Column Chart</option>
<option value = "bar2d">2D Bar Chart</option>
<option value = "line">2D Line Chart</option>
<option value = "area2d">2D Area Chart</option>
<option value = "pie2d">2D Pie Chart</option>
<option value = "pareto2d">2D Pareto Chart</option>
<option value = "doughnut2d">2D Doughnut Chart</option>
<option value = "column3d">3D Column Chart</option>
<option value = "bar3d">3D Bar Chart</option>
<option value = "pie3d">3D Pie Chart</option>
<option value = "pareto3d">3D Pareto Chart</option>
<option value = "doughnut3d">3D Doughnut Chart</option>
</select>
<input type = "button" name = "chooseValuesButton" id = "chooseValuesButton" value = "Choose values" onclick = "displayChooseAlert()"
class = "chartControllers" />
<input type = "button" name = "backButton1" id = "backButton1" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartA">
</div>
</div>
</div>
<div class = "col-lg-6">
<div id = "quadrant2">
<input type = "button" name = "zoomButton2" id = "zoomButton2" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" />
<select name = "themeColor" id = "themeColor" onchange = "changeChartThemeColor()" class = "chartControllers">
<option value = "nothingSelected" selected>Select color theme</option>
<option value = "#FFFF00">Yellow and White</option>
<option value = "#D80000">Red and White</option>
<option value = "#0000CC">Blue and White</option>
<option value = "#006600">Green and White</option>
</select>
<input type = "button" name = "backButton2" id = "backButton2" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" />
<div id = "chartB">
</div>
</div>
</div>
</div>
When I run this on my browser, I see that the columns render at the ends of the page, not like the half columns that I want. When the browser is resized to mobile size, I want the quadrant divs to come one below the other, but on
desktops I want the quadrant divs to occupy half the width of the screen.
What is wrong with my code ?
The problem lays in the size of your columns you've set.
You are using the large column that breaks immediately when you leave the large viewport. .col-lg-6 should be changed to .col-md-6 or .col-sm-6 in order to keep those two columns together for a little longer.
Using .col-xs-6 creates the column "unbreakable" since it does not drop even on mobile device. Otherwise your code seems to be all right, and if I understood the question correctly, this is what you are asking. Correct me if I'm wrong and clearify your question a bit! :)
Bootstrap file add in html file to boot strep use in php.
<script src="filename.js"></script>
And add particular file add in folder.
i have a bootstrap site and have 4 different forms. I set the required attribute against certain fields. On my local machine, the validation works if the fields are left blank but when I post it to a web host, the validation does not work.
The field types range from free text input to check boxes, select boxes and radio buttons.
I am writing this from my mobile so don't have a snippet of code to show. Sorry all. Suggestions are more than welcome.
<fieldset>
<b><u><h4>Trip Type</h4></u></b>
<div class = "form-group">
<label for="where">Will you be:</label>
<select class="form-control" id="where" name = "where" required>
<option></option>
<option value = "travelling to">Travelling to the Airport</option>
<option value = "travelling from">Travelling from the Airport</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-6 col-md-6">
<div class = "form-group">
<label for = "airporttype">From / to which airport:</label>
<div class = "radio">
<label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "International" required>International</label>
<label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "Domestic">Domestic</label>
</div>
</div>
</div>
<div class = "col-lg-6 col-md-6">
<div class="control-group form-group">
<label for = "trip">Is this a Single or Return Trip:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Single" required>Single</label>
<label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Return">Return Trip</label>
</div>
</div>
</div>
</div>
<hr>
<b><u><h4>Your Details</h4></u></b>
<div class="control-group form-group">
<div class="controls">
<label for = "fname">First Name:</label>
<input type = "text" class = "form-control" id = "fname" name = "fname" required placeholder = "Enter First Name" data-validation-required-message="Please enter your first name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "surname">Last Name:</label>
<input type="text" class="form-control" id="surname" name = "surname" required placeholder = "Enter Last Name" data-validation-required-message="Please enter your last name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "cell1">Contact Mobile / Cell:</label>
<input type="text" class="form-control" id="cell1" name = "cell1" required placeholder = "Enter Mobile / Cell Number Main" data-validation-required-message="Please enter your main contact number.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "cell2">Contact Mobile / Cell 2:</label>
<input type="text" class="form-control" id="cell2" name = "cell2" placeholder = "Enter Mobile / Cell Number Alt" data-validation-required-message="Please enter your alternate contact number.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "email">Enter your email address:</label>
<input type = "email" class = "form-control" id = "email" name = "email" required placeholder = "you#yourdomain.com" data-validation-required-message="Please enter your email address.">
<p class="help-block"></p>
</div>
</div>
<br>
<div class="control-group form-group">
<div class="controls">
<label for = "date16">Travel Date:</label>
<input type = "text" class="form-control datepicker" id = "date16" name = "date16" required data-validation-required-message="Please enter your travel date." style = "text-align: center">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for="address">Pick Up / Destination Address:</label>
<input type = "text" class = "form-control" id = "address" name = "address" placeholder = "The start or end of your journey" required data-validation-required-message = "Please enter the address where you will start or finish your journey.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "passnum">Number of Passengers:</label>
<select class="form-control" id = "passnum" name = "passnum" required>
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
<option value = "13">13</option>
<option value = "14">14</option>
<option value = "15">15</option>
<option value = "16">16</option>
<option value = "17">17</option>
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
</select>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "flightnum">Flight Number:</label>
<input type = "text" class="form-control" id = "flightnum" name = "flightnum" placeholder = "Please enter your flight number" required data-validation-required-message = "Please enter your flight number.">
<p class="help-block"></p>
</div>
</div>
<hr>
<b><u><h4>Child Seats</h4></u></b>
<div class = "row">
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "babyseat">Baby Seat Required:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "babyseat1">
<div class="controls">
<label for = "bseatnum">Number of Baby Seats:</label>
<select class="form-control" id = "bseatnum" name = "bseatnum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "boost">Booster Seat Required:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "boost1" >
<div class="controls">
<label for = "boostnum">Number of Booster Seats:</label>
<select class="form-control" id = "boostnum" name = "boostnum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "cradle">Baby Cradle Required</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "cradle1">
<div class="controls">
<label for = "cradlenum">Number of cradles:</label>
<select class="form-control" id = "cradlenum" name = "cradlenum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
</div>
<hr>
<b><u><h4>Additional Services</h4></u></b>
<div class = "row">
<div class = "col-lg-6">
<div class="control-group form-group">
<label for = "shuttle">Shuttle Service:</label>
<div class="radio">
<label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "Yes" required>Yes</label>
<label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "No">No</label>
<p class="help-block"></p>
</div>
</div>
</div>
<div class = "col-lg-6">
<div class="control-group form-group">
<label for "charter">Private Charter:</label>
<div class="radio">
<label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "No">No</label>
<p class="help-block"></p>
</div>
</div>
</div>
</div>
<hr>
</fieldset>
validation only using required attribute is not good, because it may not work in many cases. for example when using javascript submit() method, also in some browsers,required wont work. So Best way is to validate using javascript(client side)
So create a javascript function and call it during form onsubmit event
function checkform(form) {
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].hasAttribute("required")){
if(inputs[i].value == ""){
alert("Please fill all required fields");
return false;
}
}
}
return true;
}