I would like to produce something similar to the checkin and checkout for a hotel reservation system. So far, I'm allowing the user to enter the booking date (which is the check in). However, I would like to implement an unedited input with the value of checkin plus number of nights.
So, after the user has selected the booking date and the number of nights, it would add them together and display the checkout date on the side (but the user can't change it). After the duration has finished, the user can book the same hotel again, without telling the user that they have already booked that hotel.
<body>
<form action="" method="POST">
<fieldset>
<legend>Personal Details: </legend>
<label for="phone">Phone:</label><input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
<select name="country" required >
<option value=""></option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="AUS">AUS</option>
</select>
</fieldset>
<br>
<fieldset>
<legend>Booking Details: </legend>
<label for="date">Booking date: </label><input id="date" type="date" name="date" min="2017-01-04">
<label for="numberOfRooms">Number of Rooms:</label><input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
<label for="numberOfNights">Number of Nights:</label><input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
<p>Do you require breakfast?</p>
<label for="yesBreakfast">Yes:</label><input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
<label for="noBreakfast">No:</label><input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
<br>
<!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
<br>
<button name="submit" type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
database tables for the book and the hotel
Book table:
id(int 11)
username(varchar 30)
hotel_id(int11)
phone(varchar 50)
date(datetime)
num_rooms(int 60)
num_nights(int 4)
Table for hotel
id(int 11)
Hotel_name(text)
Hotel_location(text)
Hotel_price(int 11)
image(varchar 500)
description(text)
I suggest you use momentjs to handle date related stuff.
I added change event on both date and NumberOfNights to call updateCheckout(), in that function will handle the checkout date
hope it helps
$(document).ready(function() {
$('#date, #NumberOfNights').on("change", updateCheckout);
$('#price, #NumberOfNights, #NumberOfRooms').on("change", updateTotalPrice);
function updateCheckout() {
var bookingDate = $('#date').val();
var numOfNights = $('#NumberOfNights').val();
if (bookingDate != '' && numOfNights != '') {
var new_date = moment(bookingDate, "YYYY-MM-DD").add(numOfNights, 'days').format("YYYY-MM-DD");
$('#checkout_date').text(new_date);
} else {
$('#checkout_date').text('N/A');
}
}
function updateTotalPrice() {
var price = $('#price').val();
var numOfNights = $('#NumberOfNights').val();
var NumberOfRooms = $('#NumberOfRooms').val();
if (price != '' && numOfNights != '' && NumberOfRooms != '') {
var total_price = +price * +numOfNights * +NumberOfRooms;
$('#total_price').text('$' + total_price);
} else {
$('#total_price').text('N/A');
}
}
});
#checkout_date,
#total_price {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form action="" method="POST">
<fieldset>
<legend>Personal Details: </legend>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
<select name="country" required>
<option value=""></option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="AUS">AUS</option>
</select>
</fieldset>
<br>
<fieldset>
<legend>Booking Details: </legend>
<label for="date">Booking date: </label>
<input id="date" type="date" name="date" min="2017-01-04">
<label for="numberOfRooms">Number of Rooms:</label>
<input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
<label for="numberOfNights">Number of Nights:</label>
<input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
<label for="price">Single Room Price: </label>
<input id="price" type="number" min="0">
<br>
<br>
<label>Checkout Date:</label>
<span id="checkout_date"> N/A</span>
<p>Do you require breakfast?</p>
<label for="yesBreakfast">Yes:</label>
<input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
<label for="noBreakfast">No:</label>
<input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
<br>
<!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
<br>
<label>Total Price:</label>
<span id="total_price"> N/A</span>
<br><br>
<button name="submit" type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
Related
$(document).ready(function(){
$('#update2').click(function(){
var checkboxes = $('input[name="checkbox1"], input[name="checkbox2"]');
checkboxes.on("change", function(e){
checkboxes[0].setCustomValidity(checkboxes.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
$(document).ready(function(){
$('#select2').click(function(){
var checkboxes2 = $('input[name="choose1"], input[name="choose2"]');
checkboxes2.on("change", function(e){
checkboxes2[0].setCustomValidity(checkboxes2.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
<form>
<input type="radio" id="update" name="update-button" value="1">
<input type="radio" id="update2" name"update-button" value="2">
<input type="checkbox" id="check1" name="checkbox1" value="3">
<input type="checkbox" id="check2" name="checkbox2" value="4">
<input type="submit" name="submit-button">
</form>
<form>
<input type="radio" id="select" name="select-button" value="10">
<input type="radio" id="select2" name"select-button" value="11">
<input type="checkbox" id="box1" name="choose1" value="12">
<input type="checkbox" id="box2" name="choose2" value="13">
<input type="submit" name="submit-select">
</form>
Im trying to set custom validation to the checkboxes. so when i select the radio button with the id "select2", the checkboxes with diffrent name "choose1" and "choose2" one of them is required before submitting the form. it is working perfieclty in the first example with "update2" and "checkbox1","checkbox2" checkboxes. but i have no idea why it is not working in the second example with the "select2" and "choose1", "choose2" checkboxes.
I am currently trying to get my calculated fields to show a total in a bottom field but in order for that to happen I have to have a value in each field. I am lost on how to get it to work with an empty field being accepted without an error. This is what i have so far:
<script type="text/javascript">
function update()
{
var form = document.forms[0];
var sum = eval(form.x.value)*60 + eval(form.y.value)*110 + eval(form.z.value)*180;
form.sum.value = isNaN(sum) ? "" : sum;
}
</script>
<form name="form1" onsubmit="false">
<fieldset>
<legend>Bloodwood</legend>
<label for="f1">Vault ($60)</label>
<input id="f1" name="x" type="number" onchange="update()">
<label for="f2">Tray ($110)</label>
<input id="f2" name="y" type="number" onchange="update()">
<label for="f3">Tower ($180)</label>
<input id="f3" name="z" type="number" onchange="update()">
<label for="f4">Total</label>
<input id="f4" name="sum" readonly="readonly">
</fieldset>
</form>
I have removed eval from the sum and it works on tab out
function update()
{
var form = document.forms[0];
var sum = form.x.value*60 + form.y.value*110 + form.z.value*180;
form.sum.value = isNaN(sum) ? "" : sum;
}
<form name="form1" onsubmit="false">
<fieldset>
<legend>Bloodwood</legend>
<label for="f1">Vault ($60)</label>
<input id="f1" name="x" type="number" onchange="update()">
<label for="f2">Tray ($110)</label>
<input id="f2" name="y" type="number" onchange="update()">
<label for="f3">Tower ($180)</label>
<input id="f3" name="z" type="number" onchange="update()">
<label for="f4">Total</label>
<input id="f4" name="sum" readonly="readonly">
</fieldset>
</form>
I want to ask how to call the value from another table under same database ?
Database table name: bit_app_policy_category
Under the database I have these columns:
ID
code
description
parent_id
status
Another Database Table name under same database : company_policy
Under the database i have these columns:
ID
policy_category_id
policy_title
version_no
policy_details
expiry_date
file_path
As for now I want to link the table bit_app_policy_category and get the columns of id's value into company_policy - policy_category_id. I don't know how to write the code.
Here is my current code :
<form method="post" action="{{route('policy.store')}}">
{{csrf_field()}}
#csrf
<div class="form-group">
<label for="bit_app_policy_category_parent">Parent Category</label>
<select id="bit_app_policy_category_parent" name="parent_id" class="form-control">
<option value=" {{"$parents->id"}} </option>n>
</select>
</div>
<div class="form-group">
<label for="company_policy_policy_title">Policy Title<span class="required">*</span></label>
<input id="company_policy_policy_title" type="text" name="policy_title" class="form-control" placeholder="Please Enter the policy title" />
</div>
<div class="form-group">
<label for="company_policy_version-no">Version-no<span class="required">*</span></label>
<input id="company_policy_version-no" type="text" name="version_no" class="form-control" placeholder="Please Enter the Version-no" />
</div>
<div class="form-group">
<label for="company_policy_policy_details">Policy Details<span class="required">*</span></label>
<input id="company_policy_policy_details" type="text" name="policy_details" class="form-control" placeholder="Please Enter the Policy Details" />
</div>
<div class="form-group">
<label for="company_policy_expiry_date">Expiry Date<span class="required">*</span></label>
<input id="company_policy_expiry_date" type="datetime-local" name="expiry_date" class="form-control" placeholder="Please Enter the Expiry Date time" />
</div>
<div class="form-group">
<label for="company_policy_file_path">Policy File Path<span class="required">*</span></label>
<input id="company_policy_file_path" type="text" name="file_path" class="form-control" placeholder="Please Enter the file path" />
</div>
<div class="form-group">
<input type="submit" class="btn btn btn-primary" />
Back</span>
Back to home</span>
</div>
</form>
</div>
</div>
#endsection
First create two model
1. PolicyCategory and put the code in model
public function companyPolicies()
{
return $this->hasMany('App\CompanyPolicy');
}
2.CompanyPolicy
public function policyCategory()
{
return $this->belongsTo('App\PolicyCategory',policy_category_id);
}
and in you controller then you can get all the info of related table. Like say, you have one/two company under the policy_category which id is 1. Now you can get all the companies info like below
$policy_category = PolicyCategory::find(1);
dd($policy_category->companyPolicies);
try this and let me know is this really you want or not
Actually I have a form that use the Place API to determine the right address for start address and arrival address
<section class="itineraire section">
<h2 class="sectiontitle"><?php _e( 'Itinéraire', 'mlog_regim' ); ?></h2>
<form method="get" action="https://www.google.com/maps/" target="https://www.google.com/maps/">
<div class="form-group">
<input name="saddr" type="text" id="saddr" class="form-control" placeholder="Adresse de départ" onFocus="geolocate()" >
</div>
<div class="form-group">
<input name="daddr" type="text" id="daddr" class="form-control" placeholder="Adresse d'arrivée">
</div>
<div class="form-group">
<input name="txtDate" type="date" id="txtDate" class="form-control" placeholder="Date'">
</div>
<input type="hidden" name="travel_mode" value="3">
<button type="submit" class="btn btn-default">Rechercher</button>
</form>
</section>
And I would like to force the google map to display travel_mode 3 (transit) and the date to be set at the txtDate value. I can't find in the doc how to do it, but I've found some website that do it and it look not that hard... Do someone could give me some advice ?
Go Transit
RTC Quebec (Your itinerary)
Fill the form with theses inforamtion
Start point : 2220 Boulevard Pie-IX, Montréal, QC H1V 2E2, Canada
End point : Pointe-aux-Trembles, Montréal, QC, Canada
Choose any random date... for Go Transit, RTC Quebec only prove the travel mode.
Thank's for anyone help it will be appreciated !
The expected parameters are
dirflg set it to r for public transport
date format: mm/dd/yyyy
time format: hh:mm
ttype set it to dep(departure) or arr(arrival)
example:
<form method="get" action="https://www.google.com/maps/" target="google-maps">
<br/>
<input name="saddr" placeholder="origin" value="2220 Boulevard Pie-IX, Montréal, QC H1V 2E2, Canada" />
<br/>
<input name="daddr" placeholder="destination" value="Pointe-aux-Trembles, Montréal, QC, Canada" />
<br/>
<input name="date" placeholder="mm/dd/yyyy" />
<br/>
<input name="time" placeholder="hh:mm" />
<br/>
<select name="ttype">
<option value="dep">departure</option>
<option value="arr">arrival</option>
</select>
<br/>
<input type="hidden" name="dirflg" value="r" />
<input type="submit" />
</form>
http://jsfiddle.net/xnn34qL1/
I want to clear my input values in html form when you press submit.
the function is in the controller.
i tried to do: $scope.name = "" or null (for every input) but its don't work.
This is the html file:
<label for="messageName">Message Name:</label>
<input type="text" ng-model="message.name" name="message.name" required/>
<label for="text">Text:</label>
<input type="textarea" ng-model="message.text" name="message.text" required/>
<label for="images">Images:</label>
<input type="text" ng-model="message.images" name="message.images" required/>
<label for="template">Template:</label>
<input list="template" ng-model="message.template" name="message.template" required/>
<datalist id="template">
<option value="template1">
<option value="template2">
<option value="template3">
</datalist>
<label for="millisecToShow">Millisec To Show:</label>
<input type="number" min="1000" max="10000" ng-model="message.millisecToShow" name="message.millisecToShow" required/>
<label for="timeFrame">Time Frame:</label>
<label for="TimeStart">Start Time:</label>
<input type="datetime-local" ng-model="message.startDateTime" name="message.startDateTime" required/>
<label for="DateStart">End Time:</label>
<input type="datetime-local" ng-model="message.endDateTime" name="message.endDateTime" required/>
<label for="days">Days:</label><br>
<form>
<input type="checkbox" ng-model="message.sunday" name="message.days" value="Sunday">Sunday<br>
<input type="checkbox" ng-model="message.monday" name="message.days" value="Monday">Monday<br>
<input type="checkbox" ng-model="message.tuesday" name="message.days" value="Tuesday">Tuesday<br>
<input type="checkbox" ng-model="message.wednesday" name="message.days" value="Wednesday">Wednesday<br>
<input type="checkbox" ng-model="message.thursday" name="message.days" value="Thursday">Thursday<br>
<input type="checkbox" ng-model="message.friday" name="message.days" value="Friday">Friday<br>
<input type="checkbox" ng-model="message.saturday" name="message.days" value="Saturday">Saturday<br>
</form>
<label for="screenId">Screen ID:</label>
<input list="screenId" ng-model="message.screenId" name="message.screenId" required/>
<datalist id="screenId">
<option value="screen1">
<option value="screen2">
<option value="screen3">
</datalist>
<button ng-click="createButton()">Create</button>
And this is the controller:
angular.module('CreateCtrl', []).controller('CreateController', function($scope, superService) {
$scope.createButton = function() {
superService.insert($scope.message).then(function (result)
if (result == "true") {
alert('Create successful');
$scope.tagline = 'Create successful';
return result.data;
}
else {
$scope.tagline = 'Cannot create message';
}
});
};
});
I want to remove the input after sending the file.
thanks (:
Considering that all of the fields refer to $scope.message.*, wouldn't it be easier to just clean up the whole message object like this?
if (result === "true") {
alert('Create successful');
$scope.tagline = 'Create successful';
// cleaning up
$scope.message = {
name: null,
text: null,
images: null,
template: null
};
return result.data;
}
In fact, if you want to wipe the whole object clean, if it were me I would just go for $scope.message = {}; and be done with it.