logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-06-2013, 04:38 PM   #1
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 576
Default dropdown lists

Hi

I am banging my head, I have two drop down list hours and minutes.

The hours start at 08 and the hours are 00,15.30,45.

I want it so that if 8 is selected only 45 is available in the minutes drop down.

If they select 09 then they can select any time. I just can't see the wood through the trees. I am mobile so I can provide code at the second.

Any advise would be appreciated
cocoonfx is offline   Reply With Quote
Old 08-06-2013, 09:55 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

I don't usually do things like these, but I would imagine you write a function in JS that gets fired off when you select '8'
domedia is offline   Reply With Quote
Old 08-06-2013, 10:04 PM   #3
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 576
Default

Hummm I have inherited someone elses code and its a mess code is spread all over the place.

I have tried all kinds of different functions but it just will not work.

I have cleaned some code the jquery.

I can't get it to work

HTML Code:
$( "#startdate" ).datepicker({
			 
			buttonImageOnly: true,
			buttonImage: './steps/images/cal.png',
			changeMonth: true,
			changeYear: true,
			minDate:0,
			maxDate: 365,
			dateFormat: 'dd/mm/yy'
		});		
		
		$( "#enddate" ).datepicker({
		
			buttonImageOnly: true,
			buttonImage: './steps/images/cal.png',
			changeMonth: true,
			changeYear: true,
			minDate: 1,
			maxDate: 365,
			dateFormat: 'dd/mm/yy'
		});		
*$("#starttimehr").change(function() {*
if($(this).data('options') == undefined){
* * /*Taking an array of all options-2 and kind of embedding it on the select1*/
* * $(this).data('options',$('#starttimemin option').clone());
* * }*
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#starttimemin').html(options);
});
	</script>

	<label>Rental Start Date/Time </label>
									<input type="text" name="startdate" id="startdate" readonly="readonly" onChange="calcDays()"><div id='step1_startdate_errorloc' class="error_strings"></div>
                                    <select class="date" name="starttimehr" id="starttimehr">
                                    <option value="08" selected="selected">08</option>
                                    	<option value="09">09</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>
                                    </select>
                                    <select class="date" name="starttimemin" id="starttimemin">
                                    	<option value="00">00</option>
                                        <option value="15">15</option>
                                        <option value="30" selected="selected">30</option>
                                        <option value="45">45</option>
                                    </select>


<script language="JavaScript" type="text/javascript"
    xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
  var frmvalidator  = new Validator("step1");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
*	frmvalidator.addValidation("Catagory_of_Vehicle","dontselect=XXX","*");
	frmvalidator.addValidation("pickup","dontselect=XXX","*");
	frmvalidator.addValidation("dropoff","dontselect=XXX","*");
    frmvalidator.addValidation("startdate","req","*");
	frmvalidator.addValidation("enddate","req","*");
//]]></script>                  
cocoonfx is offline   Reply With Quote
Old 08-07-2013, 12:47 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

hm i was thinking arrays some how . have alook at this as it might be adaptable to what you want/. http://blog.chapagain.com.np/using-j...election-list/
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Old 08-07-2013, 03:25 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

that was fun, had to try his code. needs tweaking , adding the date picker etc,but works as is using the call to data.php
index .php
Code:
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> -->

<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
	jQuery(document).ready(function(){				
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){	
			
			// path of ajax-loader gif image
			var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";
			
			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		
						
			/**
			 * pass country value through GET method as query string
			 * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
			 * if we get response from data.php, then only the cityAjax div is displayed 
			 * otherwise the cityAjax div remains hidden
			 */
			jQuery("#cityAjax")
				.html(ajaxLoader)
				.load('data.php', "country="+optionValue+"&status=1", function(response){
					if(response) {
						jQuery("#cityAjax").css('display', '');
					} else {
						jQuery("#cityAjax").css('display', 'none');
					}
			});			
		});
	});
</script>

<?php

?>

Countries: 
<select name="country">
	<option value="">Please Select</option>
	<option value="1">8</option>
	<option value="2">9</option>
	<option value="3">10</option>
	<option value="4">11</option>
	<option value="5">12</option>
</select>

<div id="cityAjax" style="display:none">
	<select name="city">
		<option value="">Please Select</option>
	</select>
</div>
data.php
Code:
<?php
$country = $_GET['country'];

if(!$country) {
	return false;
}

$cities = array(
			1 => array('00','45'),
			2 => array('00','15','30','45'),
			3 => array('00','15','30','45'),
			4 => array('00','15','30','45'),
			5 => array('00','15','30','45')
		);
		
$currentCities = $cities[$country];
?>

City: 
<select name="city">
	<option value="">Please Select</option>
	<?php
	foreach($currentCities as $city) {
		?>
		<option value="<?php echo $city; ?>"><?php echo $city; ?></option>
		<?php 
	}
	?>
</select>
as you see i repeated the array for speedy testing
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas

Last edited by edbr; 08-07-2013 at 08:01 AM..
edbr is online now   Reply With Quote
Old 08-07-2013, 09:29 AM   #6
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 576
Default

hi Edbr thanks for that, I can get it working outside of the site I am working but for some reason it will not work within the site.



http://test-cocoonfxmedia.co.uk/test.php <-- works perfectly
http://test-cocoonfxmedia.co.uk/m/steps/test.php <--- works perfectly

But in the actual file of the site the data.php does get called in for some reason. Something within the code is blocking it from working
cocoonfx is offline   Reply With Quote
Old 08-08-2013, 02:15 AM   #7
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

stating the obvious im certain but could it be a jquery link problem?
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Old 08-08-2013, 12:49 PM   #8
cocoonfx
cocoonfx's Avatar
 
Join Date: Nov 2006
Location: Tamworth,UK
Posts: 576
Default

Yeah tried that... found a java solution which works a dream... thanks for your help Edr...


HTML Code:
<script type="text/javascript" language="JavaScript">
function Resetvalues(ddid, fdd)
{
	
	
	var select2 = document.getElementById(ddid);
	
	for(i=select2.options.length-1;i>=0;i--)
    {
        select2.remove(i);
    }
	
	
	var strDay = fdd.options[fdd.selectedIndex].value;
	if (strDay==8 )
	{
			 var opt = document.createElement("option");
			 opt.text = "30";
   			 opt.value = 30;			
			 select2.options.add(opt);
			 
			 var opt2 = document.createElement("option");
			 opt2.text = "40";
   			 opt2.value = 40;
			 select2.options.add(opt2);	
	}
	else{
		
		     var opt5 = document.createElement("option");
			 opt5.text = "00";
   			 opt5.value = 00;
			 select2.options.add(opt5);
			 
			 var opt6 = document.createElement("option");
			 opt6.text = "15";
   			 opt6.value = 15;
			 select2.options.add(opt6);
			 
			 var opt3 = document.createElement("option");
			 opt3.text = "30";
   			 opt3.value = 30;
			 select2.options.add(opt3);
			 
			 
			 var opt4 = document.createElement("option");
			 opt4.text = "40";
   			 opt4.value = 40;
			 select2.options.add(opt4);
		
		
	}
	
	

}
</script> 
</head>

<body>
<div class="clear"></div>
			<label>Rental Start Date/Time </label>
			<input type="text" name="startdate" id="startdate" readonly="readonly" onChange="calcDays()"><div id='step1_startdate_errorloc' class="error_strings"></div>
                                    <select class="date" onChange="Resetvalues('date_dd', this);" name="starttimehr" id="starttimehr">
                                   		<option value="08" selected="selected">08</option>
                                    	<option value="09">09</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>
                                    </select>
                                    <select id="date_dd" class="date" name="starttimemin">
                                    
                                        <option value="30" selected="selected">30</option>
                                        <option value="40">40</option>
                                    </select>
							
                                <div class="clear"></div>
                                
				<label>Rental End Date/Time </label>
				<input type="text" name="enddate" id="enddate" readonly="readonly" onChange="calcDays()"><div id='step1_enddate_errorloc' class="error_strings"></div>
                                    <select class="date" name="endtimehr" id="endtimehr">
                                    <option value="08" selected="selected">08</option>
                                    	<option value="09">09</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>
                                    </select>
                                    <select class="date" name="endtimemin" id="endtimemin">
                                    	<option value="00">00</option>
                                        <option value="15">15</option>
                                        <option value="30" selected="selected">30</option>
                                        <option value="45">45</option>
                                    </select>
cocoonfx is offline   Reply With Quote
Old 08-08-2013, 11:40 PM   #9
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

Thats nice. Snippet for keeping. I like direct javascript in cases like this.
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:37 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com