I have this meeting area reservation system. For setting the time-in and time-out for area reservation, I have use selection box
<div class="row">
<div class="col-md-4">
<div class="form-group" >
<select class="form-control" id="time_in" name="time_in">
<option value=""></option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
</select>
<span class="select-arrow"></span>
<span class="form-label">Time In</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="time_out" name="time_out">
<option value=""></option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
</select>
<span class="select-arrow"></span>
<span class="form-label">Time Out</span>
</div>
</div>
my table for the database looks like this :
dbname : reservation
id | emp_id | emp_name | local_no | meeting_area | time_in | time_out |
1 2335 jack 361 area 1 7:00 8:00
what i want is to make the onChange event and pass it to ajax to make an alert whether the selected time range of the user is already occupied or not..
the problem is I'm still new to php so I don't know how to do this..
anyone want to help me for this?
I won't give you whole solution just some idea/steps you need to take in order to solve it.
On select change function you make Ajax call:
$("#time-in").change(function() {
var timeIn = $(this).children("option:selected").val();
$.ajax({
type: "POST",
url: "url_to_your_php_method_that_will_handle_this_call",
data: { 'timeIn': timeIn, 'empId':empId }, // you need somehow to get emp_id for one that you are checking
success: function(response){
// Here you will handle response, that is show message if response does not satisfy condition
}
});
});
In your php file you need to write logic which would look something like this:
if (!empty($_POST["timeIn"] && !empty($_POST["empId"] )) {
// write query to get all reservations for employee
// Loop through fetched reservations and check for each reservation if $_POST["timeIn"] is between fetched time_in and time_out, find a answer how to compare times in php
// if it is return true, if not return false
}
And then in your success just check if response is true, if it is then alert message that user is already occupied, else nothings happens.
You would do same for time-out select.
Related
I am using PHP to show years between 1940 and the current year and using a foreach loop to render each option inside a select element. Everything works as planned until I add an id to the select element that a block of jquery looks at for changes.
Essentially I am trying to console.log (for now) the value of whatever option gets selected but something about my jQuery/PHP is stopping the select from displaying the selected option. The console.log works as expected but the selected option doesn't update in the element. It always goes back to displaying the default option aka 2018 since it's the current year.
If I change the PHP foreach select/option to a static dropdown of plain HTML it works fine. Likewise, if I disconnect the jQuery but keep the PHP dynamically generated option list it works fine. Something about the combo of my PHP+jQuery is preventing the select from updating and I cannot figure what.
Here is my HTML/PHP code:
<select name="birthyear" id="birthyear">
<?php
// $years is setting the range from current year to 1940
$years = range(date('Y'), 1940);
foreach ($years as $year) {
echo "<option id='$year' value='$year'>".$year."</option>";
}
?>
</select>
Here is my jQuery:
$('#birthyear').on('change', function() {
var date = new Date();
var year = date.getFullYear();
var yearsOld = year - $(this).val();
console.log(yearsOld + " years old.");
if (yearsOld >= 18) {
console.log("age >= 18")
} else {
console.log("You aren't old enough!");
}
});
Am I missing something here?
Your code works fine... All I did was execute the PHP to get the HTML and then plugged it into JSFiddle.
I'd assume your problem is that you didn't properly include jQuery.
<select name="birthyear" id="birthyear">
<option id='2018' value='2018'>2018</option>
<option id='2017' value='2017'>2017</option>
<option id='2016' value='2016'>2016</option>
<option id='2015' value='2015'>2015</option>
<option id='2014' value='2014'>2014</option>
<option id='2013' value='2013'>2013</option>
<option id='2012' value='2012'>2012</option>
<option id='2011' value='2011'>2011</option>
<option id='2010' value='2010'>2010</option>
<option id='2009' value='2009'>2009</option>
<option id='2008' value='2008'>2008</option>
<option id='2007' value='2007'>2007</option>
<option id='2006' value='2006'>2006</option>
<option id='2005' value='2005'>2005</option>
<option id='2004' value='2004'>2004</option>
<option id='2003' value='2003'>2003</option>
<option id='2002' value='2002'>2002</option>
<option id='2001' value='2001'>2001</option>
<option id='2000' value='2000'>2000</option>
<option id='1999' value='1999'>1999</option>
<option id='1998' value='1998'>1998</option>
<option id='1997' value='1997'>1997</option>
<option id='1996' value='1996'>1996</option>
<option id='1995' value='1995'>1995</option>
<option id='1994' value='1994'>1994</option>
<option id='1993' value='1993'>1993</option>
<option id='1992' value='1992'>1992</option>
<option id='1991' value='1991'>1991</option>
<option id='1990' value='1990'>1990</option>
<option id='1989' value='1989'>1989</option>
<option id='1988' value='1988'>1988</option>
<option id='1987' value='1987'>1987</option>
<option id='1986' value='1986'>1986</option>
<option id='1985' value='1985'>1985</option>
<option id='1984' value='1984'>1984</option>
<option id='1983' value='1983'>1983</option>
<option id='1982' value='1982'>1982</option>
<option id='1981' value='1981'>1981</option>
<option id='1980' value='1980'>1980</option>
<option id='1979' value='1979'>1979</option>
<option id='1978' value='1978'>1978</option>
<option id='1977' value='1977'>1977</option>
<option id='1976' value='1976'>1976</option>
<option id='1975' value='1975'>1975</option>
<option id='1974' value='1974'>1974</option>
<option id='1973' value='1973'>1973</option>
<option id='1972' value='1972'>1972</option>
<option id='1971' value='1971'>1971</option>
<option id='1970' value='1970'>1970</option>
<option id='1969' value='1969'>1969</option>
<option id='1968' value='1968'>1968</option>
<option id='1967' value='1967'>1967</option>
<option id='1966' value='1966'>1966</option>
<option id='1965' value='1965'>1965</option>
<option id='1964' value='1964'>1964</option>
<option id='1963' value='1963'>1963</option>
<option id='1962' value='1962'>1962</option>
<option id='1961' value='1961'>1961</option>
<option id='1960' value='1960'>1960</option>
<option id='1959' value='1959'>1959</option>
<option id='1958' value='1958'>1958</option>
<option id='1957' value='1957'>1957</option>
<option id='1956' value='1956'>1956</option>
<option id='1955' value='1955'>1955</option>
<option id='1954' value='1954'>1954</option>
<option id='1953' value='1953'>1953</option>
<option id='1952' value='1952'>1952</option>
<option id='1951' value='1951'>1951</option>
<option id='1950' value='1950'>1950</option>
<option id='1949' value='1949'>1949</option>
<option id='1948' value='1948'>1948</option>
<option id='1947' value='1947'>1947</option>
<option id='1946' value='1946'>1946</option>
<option id='1945' value='1945'>1945</option>
<option id='1944' value='1944'>1944</option>
<option id='1943' value='1943'>1943</option>
<option id='1942' value='1942'>1942</option>
<option id='1941' value='1941'>1941</option>
<option id='1940' value='1940'>1940</option>
</select>
https://jsfiddle.net/gpfh150g/
I'm using a select field on my site which reloads the page and then adds this to value to a separate div. I want to be able to disable this option if any of the divs have the same value as the option.
<select id="bayname" name="bayname">
<option value="">--Select Bay--</option>
<option value="1">Bay 1</option>
<option value="2">Bay 2</option>
<option value="3">Bay 3</option>
<option value="4">Bay 4</option>
<option value="5">Bay 5</option>
<option value="6">Bay 6</option>
<option value="7">Bay 7</option>
<option value="8">Bay 8</option>
<option value="9">Bay 9</option>
<option value="10">Bay 10</option>
<option value="11">Bay 11</option>
<option value="12">Bay 12</option>
<option value="13">Bay 13</option>
<option value="14">Bay 14</option>
<option value="15">Bay 15</option>
<option value="16">Bay 16</option>
<option value="17">Bay 17</option>
<option value="18">Bay 18</option>
<option value="19">Bay 19</option>
<option value="20">Bay 20</option>
<option value="21">Bay 21</option>
<option value="22">Bay 22</option>
<option value="23">Bay 23</option>
<option value="24">Bay 24</option>
<option value="25">Bay 25</option>
<option value="26">Bay 26</option>
<option value="27">Bay 27</option>
<option value="28">Bay 28</option>
<option value="29">Bay 29</option>
<option value="30">Bay 30</option>
</select>
For example if a user clicks on 'Bay 1' a div will be created like this:
<li id="1509013949" class="cart-select cart-mode-cart">
1
</li>
And then when the page reloads again, i want to create an if statement so if the value from the select is within one of the divs then it should add it as disabled.
I've had ago at doing this using the code below and i can't get it to print out in the console log.
var baynumberoption = $("#bayname option").val();
var baynumber = $(".cart-select a[href='#select']").text();
if (baynumber.indexOf(baynumberoption) >= 0) {
console.log("match found");
}
$("#bayname option") returns all of the options so I think you really want to use the following. Note if you don't want to rely on the inner text of the link, you can also add data attribute like data-id="1" to store the value which can be used like:
$("#bayname option").each(function() {
var val = $(this).val();
if ( $(".cart-select a[data-id=" + val + "]").length > 0 ) {
$(this).attr("disabled", "disabled");
}
});
Some of the syntax may be off but you get the idea.
So I have a a razor list set up like so.
#Html.ListBoxFor(m => m.Customer, new SelectList(Model.Customer, "Id", "Name", Model.Customer[0]), new { #id = "CustomerList", #onchange = "CustomerListSelectionChanged(this.value); SelectionGrab(this.innerHTML);" })
and the script is then a simple thing that runs like this
function SelectionGrab(e) {
alert(e);
}
However when it runs the this.value I just get the value of the selected item, and when i use the this.innerHTML it grabs the entire HTML of the Listbox...when all i want is the single selected Variable...
<select id="CustomerList" multiple="multiple" name="Customer" onchange="CustomerListSelectionChanged(this.value); SelectionGrab(this.innerHTML);"><option value="3">Nationwide</option>
<option value="5">C</option>
<option value="11">S</option>
<option value="14">Public Savings Credit Union (PSCU) </option>
<option value="15">Reliable Life Insurance</option>
<option value="18">Wellcare - "HIPPA CLIENT"</option>
<option value="21">Allianz</option>
<option value="26">World Omni - Southeast Toyota - Retail</option>
<option value="494">D</option>
<option value="497">Roanoke Gas (85115)</option>
<option value="498">World Omni-CenterOne (Retail)</option>
<option value="500">C</option>
<option value="502">Shenandoah Life - Individual (37243)</option>
<option value="614">POSTNET</option>
<option value="615">Test Account</option>
<option value="616">County of Chesterfield Taxes (26585,27144)</option>
<option value="617">County of Chesterfield Utilities (26725)</option>
<option value="619">Henrico County Utilities </option>
<option value="620">Henrico Personal Property (877-3369)</option>
<option value="621">Henrico Real Estate (321-3370)</option>
<option value="625">Time Warner Cable - Charlotte</option>
<option value="626">World Omni-Southeast Toyota (89)</option>
<option value="628">Home Furnishings - The Dump</option>
<option value="645">City of Chesapeake (1606-1375)</option>
<option value="848">MIXED</option>
<option value="856">CAPITAL ONE BNK (70884, 71083,70886)</option>
<option value="886">Vingina Natural Gas</option>
<option value="892">World Omni-Center One </option>
<option value="893">Reliable Life Insurance</option>
<option value="899">Liberty Life Insurance</option>
<option value="901">World Omni 70832 (88)</option>
<option value="991"></option>
<option value="998">Kemper</option>
<option value="1231">PNC Fleetcor</option>
<option value="1947">Fleetcor BP</option>
<option value="2069">FDR ARCO</option>
<option value="2102">NEBCO</option>
<option value="2252">Prince William County Service Authority</option>
<option value="2520">Guilford County Tax</option>
<option value="2543">FAIRFAX WATER</option>
<option value="2544">PSCU</option>
<option value="3195">SOLSTAS LAB/SPECTRUM LAB- "HIPPA CLIENT"</option>
<option value="3259"></option>
<option value="3260"></option>
<option value="3261"></option>
<option value="3262"></option>
<option value="3263"></option>
<option value="3264"></option>
<option value="3265"></option>
<option value="3266"></option>
<option value="3267"></option>
<option value="3268"></option>
<option value="3269"></option>
<option value="3270"></option>
<option value="3276"></option>
<option value="3292"></option>
<option value="3293"></option>
<option value="3431">Henrico Utility</option>
<option value="3437">CONA - CAP ONE NEW ACCOUNTS</option>
<option value="3480">Morris Broadband LLC</option>
<option value="3506">CAROLINA WEST WIRELESS</option>
<option value="3598"></option>
<option value="3616"></option>
<option value="3617"></option>
<option value="3620"></option>
<option value="3621"></option>
<option value="3622"></option>
<option value="3623"></option>
<option value="3624"></option>
<option value="3625"></option>
<option value="3626"></option>
<option value="3627"></option>
<option value="3628"></option>
<option value="3682"></option>
<option value="3683"></option>
<option value="3691"></option>
<option value="3692">TOWN OF CARY</option>
<option value="3705"></option>
<option value="3725">VANDERBILT/CLAYTON HOMES</option>
<option value="3731"></option>
<option value="3761">UHS GREENVILLE - "HIPPA CLIENT"</option>
<option value="3783"></option>
<option value="3785">City of Raleigh</option>
<option value="3786"></option>
<option value="3787"></option>
<option value="3793"></option>
<option value="3830"></option>
<option value="3831"></option>
<option value="3832"></option>
<option value="3837"></option>
<option value="3840"></option>
<option value="3841"></option>
<option value="3849">Fairwinds Credit Union</option>
<option value="3958"></option>
<option value="4084"></option>
<option value="4091"></option>
<option value="4107"></option>
<option value="4139"></option>
<option value="4145">Hampton Rd. Sanitation</option>
<option value="4156"></option>
<option value="4167">G E Debt Cancellation</option>
<option value="4171"></option>
<option value="4200"></option>
<option value="4203">Dearborn National Life Insurance</option>
<option value="4206"></option>
<option value="4212">Athene Annuity</option>
<option value="4216"></option>
<option value="4217"></option>
<option value="4229"></option>
<option value="4242"></option>
<option value="4253">USHA-Knology</option>
<option value="4254">Comporium-Knology</option>
<option value="4256"></option>
<option value="4274">CRS 300 (71104, 71106, 71107)</option>
<option value="4275">Metris 303</option>
<option value="4285"></option>
<option value="4286"></option>
<option value="4287"></option>
<option value="4288"></option>
<option value="4289"></option>
<option value="4291"></option>
<option value="4313">Volvo Retail</option>
<option value="4314">Volvo- Lease</option>
<option value="4346">Capital One Restrictive Wording </option>
<option value="4494"></option>
<option value="4499"></option>
<option value="4580"></option>
<option value="4602"></option>
<option value="4603"></option>
<option value="4604"></option>
<option value="4605"></option>
<option value="4606"></option>
<option value="4607"></option>
<option value="4608"></option>
<option value="4610"></option>
<option value="4611"></option>
<option value="4612"></option>
<option value="4618"></option>
<option value="4622"></option>
<option value="4623"></option>
<option value="4629"></option>
<option value="4630"></option>
<option value="4631"></option>
<option value="4632"></option>
<option value="4633"></option>
<option value="4637"></option>
<option value="4662">Carolina Health Care - 'HIPPA CLIENT"</option>
<option value="4664">City of Richmond RE (043)</option>
<option value="4674">City of Richmond PP (042) </option>
<option value="4685">U</option>
</select>
The above is what the html list box is in view. Now...what I want is when i select let's say the "C"
I don't want the entire CustomerList's innerHTML...just the selected's innerHTML... Help please?
In SelectionGrab function call, pass the reference of the element by using this:
SelectionGrab(this)
and then in function definition extract the selected value this way:
function SelectionGrab(e) {
var selectedCustomerId = e.options[e.selectedIndex].innerHTML;
alert(selectedCustomerId);
}
this.options[this.selectedIndex].innerHTML
I am using Carmen gem for country DropDown. I am using carmen at two places. I want to set these dropdowns equal with selected value by clicking on checkbox. Html code for drop down:-
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected>India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN">India</option>
<option value="US" selected="selected">United States</option
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
My code is here:
$('#SameAsCurrentAddress').on('click', function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('select#permanent_address').val($('select#contact_attributes').val());
});
But i am unable to set the value eqaul. How to set equal? Please help me.
You have a bunch of syntax errors. Please use a good IDE like Eclipse to catch these errors for you. This works:
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected">India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="US" selected="selected">United States</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
$('#SameAsCurrentAddress').click(function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('#permanent_address').val($('#contact_attributes').val());
}
});
i have read a tutorial on the internet which said that this way i can make a site load contect with no reload but it does not seem to work
heres my code:
I would want it to display the query.php file results under the 'send' button when date selected from dropdown and clicked.
<form method="post" action="query.php">
<select id="textarea" name="textarea" style="height: 42px;margin-top: 2px;">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<button type="submit" name="inputuno" value="Submit" class="btn btn-theme">Check!</button>
</form>
<script type="text/javascript">
function recp(id) {
$('#myStyle').load('query.php');
}
</script>
<div id='myStyle'>
</div>
$('#textarea').onchange(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
if I correctly understood what you are looking for. It will automatically reload when option will be changed. If you want to reload when button is clicked just add id property on it, for example "relbutton" and change type to "button".
$('#relbutton').click(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
Also you need to get rid of those tags, they are completely unecessary here.
Who is calling that recp(id) function? I'd say nobody. If nobody is calling it, it won't run. If it won't run, it won't conduct the page load.
You need to call that function from somewhere.
Also, so far this seems to be more of a JavaScript/jQuery issue than a PHP one.
If you'd like the form to be sent, you'll need to add an onsubmit handler. I'd suggest taking a look here and here.