Javascript Onchange Help

t3chguy used Ask the Experts™
I have a huge form that builds on the fly based on the previous submission.  The annoying part of this that each time the form self submits, it returns the user to the top of the page.

I'm looking for a way to return the user to the same spot on the page where they were prior to that selection.

<select name="totalquestions" onChange = "this.form.submit()">
<option value = '1'>test</option>

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
are you using a javascript framework?
(can make this simpler)

the basics of what you can do to fix this is change the onchange event from a submit to an ajax query, passing the data, retrieving the response to generate the next part of the form.

alternatively, a simple solution is to use IDs and then the submit adds '#totalquestions' (for the example above) to the URL, shuffling the page down to where they just entered data


html, mysql, php framework
another thought is to use toggling of visibility/display.

Question 1: (display: block)
Question 2: (display: none)
Question 3: (doesn't exist yet - is responsive to Q1+2 answers)

Question 1 answered > (display: none)
Question 2: (display: block)
Question 3: (generated, display: none)

This creates a smaller form for users to operate, not get lost in and prevents all need for page position as the required part is always obvious and available.
What I meant by a JS Framework was something like jQuery, MooTools, ExtJS, Dojo etc.

Has benefits such as instead of typing "document.getElementById('idname')" you write $('#idname').

Further benefits include tools which process forms well, as well as behaviours (ie onchange, onclick) where the code is not inline as you have in the example.

For your code above you'd write some code "watching" the form for changes, then responding with the appropriate action.
For example:
$("select").change(function () {
		type: "POST",
		url: "some.php",
		data: this.option:selected
	}).done(function( msg ) {
		// test that it works:
		alert( "Data Saved: " + msg );
		// write response code here, ie: create new question for form:

Open in new window

This is using jQuery - which is the Dr Seuss of JavaScript Frameworks. Plenty of resources and information for it.

The code above will watch for changes to all select boxes.
Entire form can be submitted via:
$('form').submit(function() {
	// switch following line to an ajax call, or get/post. examples for this code in link below
	return false;

Open in new window

jQuery "how-to" information.
That site also has the download for the framework.

Further, you'll find thousands of script examples for controlling forms by searching for "php, mysql, form, jquery, ajax".

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial