www.webdeveloper.com
Results 1 to 15 of 15

Thread: onchange submit - reload page to an anchor or same position as the select box

  1. #1
    Join Date
    Sep 2013
    Posts
    7

    onchange submit - reload page to an anchor or same position as the select box

    Hi -

    Creating a form with multiple select dropdown boxes.

    The form is pretty long vertically - so when a select is changed, and the form is submitted, I want the page to reload at the same location - either using an anchor or some other method.

    I currently do not have time to learn ajax - so I would prefer to just use old school javascript and reload to an anchor. I will have multiple anchors, and I need to know which anchor to load to based on the select box changed.


    So when Select1 is changed and the form is submitted, I want the page to load to Anchor1...

    Basically my form:

    <form name="Form1" method="post" action="MyForm.cfm">

    <select name="Select1" onchange="this.form.submit()">
    <option>-Select-</option>
    <option >Yes</option>
    <option >No</option>>
    </select>
    <a name="Anchor1" id="Anchor1"></a>

    <select name="Select2" onchange="this.form.submit()">
    <option>-Select-</option>
    <option >Yes</option>
    <option >No</option>>
    </select>
    <a name="Anchor2" id="Anchor2"></a>
    </form>

    thanks!

  2. #2
    Join Date
    Jul 2011
    Posts
    131
    Try something like this
    HTML Code:
    <script>
    	window.onload = function () {
    		var form =  document.getElementsByTagName('form')[0],
    			selects = form.getElementsByTagName('select'),
    			i = 0,
    			selects_count = selects.length;
    		for (; i < selects_count; i++) {
    			selects[i].addEventListener('change', function (e) {
    				window.location.hash = e.target.id;
    				form.submit();
    			});
    		}
    	}
    </script>
    
    <form name="Form1" method="post">
    	<select name="Select1" id="test1">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    
    	<select name="Select2" id="test2">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    </form>

  3. #3
    Join Date
    Sep 2013
    Posts
    7
    Hey Kromol,

    Thanks for your reply. I copied your exact code above and tried it, but on reload (after submit from changing the select boxes) - the page still reloaded at the top of the page?

    It did not reload to the select changed (I put some <BR> in the code to make the form longer vertically).

    Any ideas? THANKS!!!!!

  4. #4
    Join Date
    Jul 2011
    Posts
    131
    Strange, it works for me. What browser do you use? I tried this in Chrome
    Last edited by kromol; 09-18-2013 at 12:28 PM.

  5. #5
    Join Date
    Sep 2013
    Posts
    7
    what is the exact code you used? cause your code did not have any <BR> in it, so no vertical on the page.... so could not tell if it loaded to a place vertically.

    Perhaps I am missing something? For me, the page submitted when the select was changed, but it just loaded at the top.

    Can you send me the entire code you got to work (full html with body, head, etc)?

    thank you SO MUCH!!!!

  6. #6
    Join Date
    Jul 2011
    Posts
    131
    Below is full code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
    	window.onload = function () {
    		var form =  document.getElementsByTagName('form')[0],
    			selects = form.getElementsByTagName('select'),
    			i = 0,
    			selects_count = selects.length;
    		for (; i < selects_count; i++) {
    			selects[i].addEventListener('change', function (e) {
    				window.location.hash = e.target.id;
    				form.submit();
    			});
    		}
    	}
    </script>
    </head>
    
    <body>
    <form name="Form1" method="post">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select1" id="test1">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select2" id="test2">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select2" id="test3">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>	
    </form>
    
    </body>
    </html>

  7. #7
    Join Date
    Sep 2013
    Posts
    7
    Wow - it works in CHROME, but not in Explorer? weird? any ideas?

    Again - thank you so much.

    FYI - in chrome, it adds the name of the select ID onto the end of the URL (#test3)

    BUT in IE, it does NOT add the (#test3) onto the end of the URL ??

  8. #8
    Join Date
    Jul 2011
    Posts
    131
    Which version of IE do you use? IE has another event model than normal browsers.

  9. #9
    Join Date
    Sep 2013
    Posts
    7
    IE 10 - but I need it to work for everyone who uses the website - so I need to make sure it works for all browsers.... is there a workaround or additional code to make it work in IE?

    Again - thank you so much!!!!! I was searching google for an answer, but couldn't find anything. I am very surprised because this seems like a common annoyance (having the page reload to the top upon submit) - perhaps I have been phrasing my question incorrectly without the proper keywords, but I have not found a solution anywhere... thank you so much.

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Code:
    window.onload = function(){
    		var form =  document.getElementsByTagName('form')[0],
    			selects = form.getElementsByTagName('select'),
    			i = 0,
    			selects_count = selects.length;
    		for (; i < selects_count; i++) {
    			selects[i].addEventListener('change', function(e){
    				window.location.hash = e.target.id;
    				form.action = window.location;
    				form.submit();
    			});
    		}
    	}

  11. #11
    Join Date
    Jul 2011
    Posts
    131
    This should work for different versions of IE:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
    	function isIE () {
    		return navigator.appName.indexOf(('Internet Explorer') !== -1) ? true : false;
    	}
    
    	function getCookie (name) {
    		var cookie = document.cookie,
    			start = cookie.indexOf(' ' + name + '='),
    			end, value;
    		if (start === -1) {
    			start = cookie.indexOf(name + '=');
    		}
    		if (start === -1) {
    			value = null;
    		} else {
    			start = cookie.indexOf('=', start) + 1;
    			end = cookie.indexOf(';', start);
    			if (end === -1) {
    				end = cookie.length;
    			}
    			value = cookie.substring(start, end);
    		}
    		return value;
    	}
    
    	window.onload = function () {
    		var form =  document.getElementsByTagName('form')[0],
    			selects = form.getElementsByTagName('select'),
    			i = 0,
    			selects_count = selects.length, 
    			hash;
    		for (; i < selects_count; i++) {
    			if (selects[i].addEventListener) {
    				selects[i].addEventListener('change', function (e) {
    					e = e || window.event; // for IE 9 and IE 10
    					window.location.hash = e.target.id;
    					isIE() && (document.cookie = 'ie_hash=' + e.target.id);
    					form.submit();
    				});
    			} else if (selects[i].attachEvent) {
    				selects[i].attachEvent('onchange', function (e) {
    					document.cookie = 'ie_hash=' + e.srcElement.id;
    					form.submit();
    				});
    			}
    		}
    		if (isIE()) {
    			hash = getCookie('ie_hash');
    			hash && (window.location.hash = hash) && (document.cookie = 'ie_hash=');
    		}
    	}
    </script>
    </head>
    
    <body>
    <form name="Form1" method="post">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select1" id="test1">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select2" id="test2">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    	<select name="Select2" id="test3">
    		<option>-Select-</option> 
    		<option >Yes</option>
    		<option >No</option>>
    	</select>	
    </form>
    
    </body>
    </html>
    Last edited by kromol; 09-18-2013 at 04:10 PM.

  12. #12
    Join Date
    Sep 2013
    Posts
    7
    Padonak - this works GREAT - thank you, and thank you Kromol!!!

    One last request: I have some Selects that I do NOT want to submit on (some selects in the form that are not relevant for a submit), so I do NOT want the function to fire when these selects change.

    So how can I assign only certain selects to fire the function?

    And the other select boxes DO NOT submit the form when they change?

    This is 95% there - THANK YOU BOTH SO MUCH!!!!

    I'm really good with data driven stuff, but I just don't have the time to do all of the fancy js right now (got kids to pick up form school - and a deadline on this project - yipes!)

    THANKS!

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    it is easy to do. just set these unwanted selects class, for example class="not_in_use" and then skip them up in the loop:

    Code:
    ...
    for (; i < selects_count; i++) {
    if(selects[i].className=='not_in_use'){continue;}
    ...

  14. #14
    Join Date
    Sep 2013
    Posts
    7
    Padonak - worked like a charm!!!! Thank you so much, and thank you Kromol!!!!!

    You both rock!

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Kromol did everything, i just added a couple of lines. good to hear that one more problem is gone, you're welcome ))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles