Develop Reference

Checking on time range

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.

Validating HTML Drop-down menu with Javascript?

I'm trying to validate a login script, pretty much everything else is done but I don't know how to do a drop-down menu. How would I validate it, to ensure an option other than the default is selected, through JavaScript?
All of the other validation is done via a separate .js sheet, so I'm not sure if document.getElementById works or I'm just making silly mistakes?
HTML (Form ID is "registration_form"):
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>

if ( document.getElementsByName('location')[0].value == 'false' ){
alert('Select something !');
}
This might suffice.

Yes, you can use getElementById
function validate(){
var val = document.getElementById("location").value
console.log(val);
}
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>
<input type="submit" onClick="return validate();">

Set Same value in two dropdowns by click on checkbox

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());
}
});

jQuery Event when all selects inside a div have changed

If a have several selects how can i run a jquery function when all selects have changed and not just the first i choose?
I have this html:
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
With this jQuery function:
$('.container select').change(function() {
alert('changed');
});
but this fires the alert only when change the first select and i want to do it once all selects inside the container have changed its value and i when return to default in any select run other function, was i clear enough?
thanks in advance

You can keep a record of changes on each select and use that value to see if all 3 are changed.
var eventArray = [];
$('.container select').on('change',function(){
indexOfSelect = $('.container select').index( $(this) );
if($.inArray(indexOfSelect, eventArray) == -1)
eventArray.push( '' + indexOfSelect + '' );
if(eventArray.length == $('.container select').length)
alert('All changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<select name="talla1" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla2" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select name="talla3" class="talla1">
<option value="none">Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>

Change your jquery code to this :
$(".talla1").each(function(){
$(this).change(function(){
//alert('called');
$(this).addClass('active');
if($(".container").find('.active').length == $(".talla1").length){
alert('finish');
}
});
});
Here is the working fiddle.
Do tell if it worked.
Happy Coding.

when a class is added to multiple elements its event is binded to every element and the class works for all. simply give a common class to all your select on which you want to fire a event
<script>
$(document).ready(function() {
change_count = 0;
$("select.talla1").on('change', function(event) {
change_count++;
if($("select.talla1").length == change_count){
alert("all changed");
}
});
});
</script>
this works for all the select which has class talla1

Dynamically creating complex select objects in a web form

I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create
but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:
<select name="data_value" id="data_value_selector">
<optgroup label="Entity Provider">
<option style="margin-left:12px;" value="name">Name</option>
<option style="margin-left:12px;" value="dba">DBA</option>
<option style="margin-left:12px;" value="facility_type">Facility Type</option>
</optgroup>
<optgroup label="Individual Provider"></optgroup>
<optgroup style="margin-left:12px;" label="Name">
<option value="full_name">Full Name</option>
<option value="name_prefix">Prefix</option>
<option value="first_name">First Name</option>
<option value="middle_name">Middle Name</option>
<option value="last_name">Last Name</option>
<option value="name_suffix">Suffix</option>
<option value="pro_suffix">Professional Suffix</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Birth Date">
<option value="full_birth_date">Full Birth Date</option>
<option value="day_of_birth">Day Of Birth</option>
<option value="month_of_birth">Month Of Birth</option>
<option value="year_of_birth">Year Of Birth</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Education">
<option value="education_institution">Education Institution</option>
<option value="education_city">Education City</option>
<option value="education_county">Education County</option>
<option value="education_state">Education State</option>
<option value="education_country">Education Country</option>
<option value="education_start_date">Education Start Date</option>
<option value="education_end_date">Education End Date</option>
<option value="graduation_date">Graduation Date</option>
<option value="degree" >Degree</option>
</optgroup>
<optgroup label="Provider Information"></optgroup>
<optgroup style="margin-left:12px;" label="Address">
<option value="full_address">Full Address</option>
<option value="address_1">Address 1</option>
<option value="address_2">Address 2</option>
<option value="address_city">City</option>
<option value="address_county">County</option>
<option value="address_state">State</option>
<option value="address_zip_code">Zipcode</option>
<option value="address_country">Country</option>
<option value="address_csz">City/State/Zip</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Phone">
<option value="phone_number">Number</option>
<option value="phone_extension">Extension</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Singular Values">
<option value="url">URL</option>
<option value="tin">TIN Number</option>
<option value="email">Email</option>
<option value="dea_registration_number">DEA Regisration Number</option>
<option value="npi_number">NPI Number</option>
<option value="upin_number">UPIN Number</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Provider Values">
<option value="provider_value">Provider Value</option>
</optgroup>
</select>
...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?

If you want something in jQuery you can use clone() function. See:
$("#data_value_selector").clone().appendTo("#select-box");
Demo.
I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:
var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");
I hope this helps you.

You could use the cloneNode() method. Here is an example:
http://jsfiddle.net/JKNT4/7/
HTML
<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
<select name="data_value[]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div id="child_selectors"></div>
Javascript
function addRow() {
var itm = document.getElementById("parent_selector");
var cln = itm.cloneNode(true);
cln.removeAttribute("id");
document.getElementById("child_selectors").appendChild(cln);
}