Member Avatar for GK2011

I have a problem - I need some help.

I am having trouble with some coding. I have created a drop down list with the months of the year. Next to this I have created a button.

What I want to do is when the user selects a month from the drop down menu, and then selects "Click Me", it takes the user to that particular month.

Can anyone help?

Thanks GK

  • 4 Contributors
  • 10 Replies
  • 123 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by GK2011
Member Avatar for Taywin

GK2011, please do not hijack old post. This post is 2 years old! Please create a new thread if you are going to ask a question. You may add a link back to old posts if you want to in order to relate your subject to the post.

Anyway, do you mean you want a page to be redirected after the button "Click Me," is clicked? You could simply use window.location.href='path_to_location' in your function and use if-else or switch to make the decision for you. Remember, you need a fully qualified URL. This means it includes the domain name as well (i.e. en.wikipedia.org/wiki/Fully_qualified_domain_name).

// in Java Script
function moveToMonth(selectID) {
  var el = document.getElementById(selectID)
  if (el) {  // ensure the element exists
    var idx = el.selectedIndex
    switch (idx) {
      case 1:  // January
        window.location.href = "fully_qualified_path_to_page"
        break
      case 2:  // February
        window.location.href = "fully_qualified_path_to_page"
        break
      case 3:  // March
        window.location.href = "fully_qualified_path_to_page"
        break
      ...
    }
  }
}


// in HTML
<select name="selectMonth" id="selectMonth">
 <option value=0>Select Month</option>
 <option value=1>January</option>
 <option value=2>February</option>
 ...
</select>
<input type="button" value="Click Me" onclick="moveToMonth('selectMonth')">
Edited by Taywin because: n/a
Member Avatar for jQuery

Is you asking for that when you select the month from the drop down and then click the button it take you the particular month mean (correct month if it is 11th).Is this what you asking if so let me known

Member Avatar for GK2011

What I mean is, when a user selects a month from the drop down menu and then selects "Click Here" a new window opens with that month. I am not going into specific dates - just months. I hope this helps.

Thank you

GK2011

Member Avatar for jQuery

sorry to make it clear it again so that i can help you to solve your query.so you want if you select month from dropdown list and hit the button so want alert box with month specfied there or you want to echo that month just in a new window after hitting button

Member Avatar for GK2011

When you have selected the month and hit the button, a new window should open with that month you selected.

GK2011

Member Avatar for Taywin

Please define "a window"? You mean a whole new page or just a message? Try this in your select tag...

<select onchange="javascript:alert('Selected '+this.value)">
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  ...
</select>

If it is what you want, it is not really a window but a message pop up.

Edited by Taywin because: n/a
Member Avatar for workwithphp

Well your question was bit tricky.i have coded your query look if it help you and if further you have any questions regarding that code i will be there to answer.below are the file

Regards

/*!
 * jQuery JavaScript Library v1.6.1
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu May 12 15:04:36 2011 -0400
 */
(function( window, undefined ) {

// Use the correct document accordingly with window argument (sandbox)
var document = window.document,
	navigator = window.navigator,
	location = window.location;
var jQuery = (function() {

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
	},

	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

	// Map over the $ in case of overwrite
	_$ = window.$,

	// A central reference to the root jQuery(document)
	rootjQuery,

	// A simple way to check for HTML strings or ID strings
	// (both of which we optimize for)
	quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

	// Check if a string has a non-whitespace character in it
	rnotwhite = /\S/,

	// Used for trimming whitespace
	trimLeft = /^\s+/,
	trimRight = /\s+$/,

	// Check for digits
	rdigit = /\d/,

	// Match a standalone tag
	rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

	// JSON RegExp
	rvalidchars = /^[\],:{}\s]*$/,
	rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
	rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
	rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,

	// Useragent RegExp
	rwebkit = /(webkit)[ \/]([\w.]+)/,
	ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
	rmsie = /(msie) ([\w.]+)/,
	rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,

	// Keep a UserAgent string for use with jQuery.browser
	userAgent = navigator.userAgent,

	// For matching the engine and version of the browser
	browserMatch,

	// The deferred used on DOM ready
	readyList,

	// The ready event handler
	DOMContentLoaded,

	// Save a reference to some core methods
	toString = Object.prototype.toString,
	hasOwn = Object.prototype.hasOwnProperty,
	push = Array.prototype.push,
	slice = Array.prototype.slice,
	trim = String.prototype.trim,
	indexOf = Array.prototype.indexOf,

	// [[Class]] -> type pairs
	class2type = {};

jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
		var match, elem, ret, doc;

		// Handle $(""), $(null), or $(undefined)
		if ( !selector ) {
			return this;
		}

		// Handle $(DOMElement)
		if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;
		}

		// The body element only exists once, optimize finding it
		if ( selector === "body" && !context && document.body ) {
			this.context = document;
			this[0] = document.body;
			this.selector = selector;
			this.length = 1;
			return this;
		}

		// Handle HTML strings
		if ( typeof selector === "string" ) {
			// Are we dealing with HTML string or an ID?
			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
				// Assume that strings that start and end with <> are HTML and skip the regex check
				match = [ null, selector, null ];

			} else {
				match = quickExpr.exec( selector );
			}

			// Verify a match, and that no context was specified for #id
			if ( match && (match[1] || !context) ) {

				// HANDLE: $(html) -> $(array)
				if ( match[1] ) {
					context = context instanceof jQuery ? context[0] : context;
					doc = (context ? context.ownerDocument || context : document);

					// If a single string is passed in and it's a single tag
					// just do a createElement and skip the rest
					ret = rsingleTag.exec( selector );

					if ( ret ) {
						if ( jQuery.isPlainObject( context ) ) {
							selector = [ document.createElement( ret[1] ) ];
							jQuery.fn.attr.call( selector, context, true );

						} else {
							selector = [ doc.createElement( ret[1] ) ];
						}

					} else {
						ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
						selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
					}

					return jQuery.merge( this, selector );

				// HANDLE: $("#id")
				} else {
					elem = document.getElementById( match[2] );

					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
						// by name instead of ID
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						// Otherwise, we inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}

					this.context = document;
					this.selector = selector;
					return this;
				}

			// HANDLE: $(expr, $(...))
			} else if ( !context || context.jquery ) {
				return (context || rootjQuery).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}

		if (selector.selector !== undefined) {
			this.selector = selector.selector;
			this.context = selector.context;
		}

		return jQuery.makeArray( selector, this );
	},

	// Start with an empty selector
	selector: "",

	// The current version of jQuery being used
	jquery: "1.6.1",

	// The default length of a jQuery object is 0
	length: 0,

	// The number of elements contained in the matched element set
	size: function() {
		return this.length;
	},

	toArray: function() {
		return slice.call( this, 0 );
	},

	// Get the Nth element in the matched element set OR
	// Get the whole matched element set as a clean array
	get: function( num ) {
		return num == null ?

			// Return a 'clean' array
			this.toArray() :

			// Return just the object
			( num < 0 ? this[ this.length + num ] : this[ num ] );
	},

	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	pushStack: function( elems, name, selector ) {
		// Build a new jQuery matched element set
		var ret = this.constructor();

		if ( jQuery.isArray( elems ) ) {
			push.apply( ret, elems );

		} else {
			jQuery.merge( ret, elems );
		}

		// Add the old object onto the stack (as a reference)
		ret.prevObject = this;

		ret.context = this.context;

		if ( name === "find" ) {
			ret.selector = this.selector + (this.selector ? " " : "") + selector;
		} else if ( name ) {
			ret.selector = this.selector + "." + name + "(" + selector + ")";
		}

		// Return the newly-formed element set
		return ret;
	},

	// Execute a callback for every element in the matched set.
	// (You can seed the arguments with an array of args, but this is
	// only used internally.)
	each: function( callback, args ) {
		return jQuery.each( this, callback, args );
	},

	ready: function( fn ) {
		// Attach the listeners
		jQuery.bindReady();

		// Add the callback
		readyList.done( fn );

		return this;
	},

	eq: function( i ) {
		return i === -1 ?
			this.slice( i ) :
			this.slice( i, +i + 1 );
	},

	first: function() {
		return this.eq( 0 );
	},

	last: function() {
		return this.eq( -1 );
	},

	slice: function() {
		return this.pushStack( slice.apply( this, arguments ),
			"slice", slice.call(arguments).join(",") );
	},

	map: function( callback ) {
		return this.pushStack( jQuery.map(this, function( elem, i ) {
			return callback.call( elem, i, elem );
		}));
	},

	end: function() {
		return this.prevObject || this.constructor(null);
	},

	// For internal use only.
	// Behaves like an Array's method, not like a jQuery method.
	push: push,
	sort: [].sort,
	splice: [].splice
};

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	if ( length === i ) {
		target = this;
		--i;
	}

	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray(src) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

jQuery.extend({
	noConflict: function( deep ) {
		if ( window.$ === jQuery ) {
			window.$ = _$;
		}

		if ( deep && window.jQuery === jQuery ) {
			window.jQuery = _jQuery;
		}

		return jQ
<?php
session_start();
	
$var = "You Select";
$var2  = "th month of this year";
echo $var." ".$_SESSION['Select']."".$var2;
?>
<!--
   Note:
   
You have to include jquery.js file in order to tricker jquery. 

-->



<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>   
    <script type="text/javascript">
        $(document).ready(function(){
            $('#submit').click(function(e){
                var Month = $("#month").val();
             
				
				
				
				$.ajax({
      type: "POST",
      url: 'show2.php',
      data: {MONTH : Month},
      success: function(data) 
	  {
	
		 
 window.location.href = "http://localhost/project/head%20and%20subhead/new.php";
      }
     });

return false;
				
				
				
            });
        });
    </script>
</head>
<body>  

          
               <form name="user_info" id="user_info" method="">   
       
                    <select  name="month" id="month">
                    <option value="">Select Month</option>
                    <option value="1">Jan</option>
					<option  value="2">Feb</option>
                    <option value="3">Mar</option>
					<option value="4">Apr</option>
					<option value="5">May</option>
                    <option value="6">Jun</option>
					<option value="7">Jul</option>
					<option value="8">Aug</option>
					<option value="9">Sep</option>
					<option value="10">Oct</option>
					<option value="11">Nov</option>
					<option value="12">Dec</option>

</select>
     
        <input type="submit" name="submit" id="submit" value="Submit" />   
    </form>
</body>
</html>
<?php

	session_start();
    $name = $_POST['MONTH'];	
	$_SESSION['Select']="$name";
   
?>
Edited by workwithphp because: n/a
Member Avatar for GK2011

A "window" is defined as a whole new page.

GK2011

Member Avatar for Taywin

OK, do you have HTML files for each of the selection in the same folder as your main HTML page? You need them in order to open new window because you need to give URL to it. The command you need is window.open() and its syntax is as follows:

window.open('URL_to_open', 'window_name', 'attribute1, attribute2, ...')

A sample short script here is to show you how to do it. However, it expects that all files exist in the same location as the main HTML and the file name must match each month. You could still modify my first post script to work as a function.

<select onchange="javascript:window.open(this.value+'.html', this.value, 'width=500,height=300')">
  <option value="January">January</option>  <!-- expect January.html to exist -->
  <option value="February">January</option>  <!-- expect February.html to exist -->
  <option value="March">January</option>  <!-- expect March.html to exist -->
  ...
</select>
Edited by Taywin because: n/a
Member Avatar for GK2011

Thank you

GK2011

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.