Jump to content

Question regarding Scrolling to Anchor after Post.


Recommended Posts

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.