Question regarding Scrolling to Anchor after Post.

njdubois · February 12, 2012

First, what I have. Some of the HTML is on the spot so it may not be 100% correct.

A variable to hold html for a select tag :

$option_choice is an array filled with strings that were a field in a database record, then formatted.

$select_html='<select id="options" onchange="this.form.submit()">';
foreach($option_choice as $value) {
if ($value==$cur_sel_option) {
	$select_html.='<option selected>'.$value.'</option>';
}
else {
	$select_html.='<option>'.$value.'</option>';
}
}
$select_html.='</select>';

Another example of an attempt I made :

$select_html='<select id="options" onchange="this.form.submit(goToRow2())">';
foreach($option_choice as $value) {
if ($value==$cur_sel_option) {
	$select_html.='<option selected>'.$value.'</option>';
}
else {
	$select_html.='<option>'.$value.'</option>';
}
}
$select_html.='</select>';

I have four of these variables. One for Year, Make, Model and Trim of automobiles each being filled from a mysql database. Of course each chunk of code is changed for each field, but for my question I'm simplifying things. Each SELECT tag is filled with data depending on what is in the SELECT before it. IE, Make gets filled with 2010 cars if 2010 is selected in the year SELECT tag.

All of the code to create the select tags is in the beginning of the code, at the bottom I create my page.


<head>
<script type='text/javascript'>
	function goToAnchor() {
		window.location.hash='<?php echo $anchor_name; ?>';
	}
	function goToRow2() {
		window.location.hash='row2';
	}
</script>
</head>

<body onload='goToAnchor();'>
<form action="thispage.php">
<table>
<tr>
<td><a name="row1">option 1</a></td>
<td>:</td>
<td><?php echo $select1_html; ?></td>
</tr>
<tr>
<td><a name="row2">option 2</a></td>
<td>:</td>
<td><?php echo $select2_html; ?></td>
</tr>
<tr>
<td><a name="row3">option 3</a></td>
<td>:</td>
<td><?php echo $select3_html; ?></td>
</tr>
</table>
<input type="submit" value="click here to save" />
</form>
</body>

The user selects a year, then the other SELECT tags need to be re-populated so I need to do a post. The page needs to scroll back down to where the user was before so he can easily select the next field.

when using function goToRow2 and onchange="this.form.submit(goToRow2())" and take the onload code out of the BODY tag, browse to the page and change the selected option in a SELECT tag. The page scrolls to the right point, and then does a post back and refreshes to the top of the screen. I understand why this is happening, the javascript is client side and php is server side.

So I want to send the Anchor name back to PHP when onchange="this.form.submit()" using javascript?

Or maybe I have to use cookies? Read something about that and this is starting to get rather complex for a simple scroll after post? There simply has to be an easier way to do this?

Any suggestions, information, links to a how to I missed, or critiques are welcome! This is a huge part of what makes a website flow right and it has to be done.

Thank you so much for reading all of this, I hope I provided enough information! Please ask if you need more.

Nick

jcbones · February 12, 2012

You can pass the hash directly in the form action attribute:

<form action="thispage.php#options">

Or, you could (recommended) populate the options via AJAX.

Sign In

Question regarding Scrolling to Anchor after Post.

Recommended Posts

njdubois

Link to comment

Share on other sites

jcbones

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information