Link to home
Start Free TrialLog in
Avatar of t3chguy
t3chguyFlag for United States of America

asked on

Javascript Onchange Help

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>
</select>

Thanks!
Avatar of GregArnott
GregArnott
Flag of Australia image

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
Avatar of t3chguy

ASKER

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 () {
	$.ajax({
		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
	alert($(this).serialize());
	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".
ASKER CERTIFIED SOLUTION
Avatar of Kusala Wijayasena
Kusala Wijayasena
Flag of Sri Lanka image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial