t3chguy
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!
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!
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.
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:
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:
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".
Has benefits such as instead of typing "document.getElementById('
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:
});
});
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;
});
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
(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