Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

named anchors

Status
Not open for further replies.

bccamp

Technical User
Jan 20, 2005
69
I'm having a problem making a named anchor work in ie7. My process works fine in Firefox, but my target audience can't use Firefox (corporate types). Anyway, I have a PHP function called 'Calculate' in 4 positions in my document. I want the page to return to that position when 'Calculate' is activated.
The code for the php function is:
Code:
function calculate($x){
  echo "<a href=\#calc$x\">";
  echo "<input type\"submit\" name=\"submit"\ value=\"Calculate\"></a>";
}
Then for the anchor positions the code is:
Code:
<a name="calc1"></a><? calculate(1); ?>
 html
 html
 more html
 some php
<a name="calc2"></a><? calculate(2); ?>

Like I said, this works in Firefox, but not IE. Can someone help me clean this up if necessary and make it work in IE?
 
As a side note, sort of a bonus, I put a javascript code in the middle of a table that contained the 'Calculate' functions. That code made the functions stop working completely, and cleared the table of $_POST[data] when reloaded. The entire page worked in Firefox, but completely broke in IE. The javascript would execute, but not the php code under the javascript. Any ideas on this?
 
Start off by doing a view source on the page when it is rendered, and cutting and pasting the actual HTML that is being sent. All your php code gets done and dusted before the browser ever sees it, so it just gets in the way.

Piecing it together from the stuff you've given us, it's going to look something like this:
Code:
<a name="calc1"></a><a href=#calc1">
<input type"submit" name="submit" value="Calculate"></a>
Dan's already pointed out the missing quote in the second <a> element, but can I clarify what you're trying to do?

You've got a submit button in there - is your intention to submit the form back to the server, and then have an amended page sent back to the user scrolled to that point? If so, enclosing the button in a link to #calc1 will have no effect - what you're seeing in FF is probably its default behaviour when a form submits to itself. You need to either have a separate form for each submit, each with the relevant named anchor in its [tt]action[/tt] attribute, or have one form and add the anchor in with JS according to which submit is clicked (you could probably do it through server-side gymnastics too).

Alternatively, are you just using the submit button for artistic effect and hoping that the link to #calc1 will be followed when it is clicked. That seems pretty unlikely to happen cross-browser - better to use a plain link but style it to look like a button.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Sorry about the missing quote. It's there, just lightening fingers missed it when I was copying from the other monitor.

What I have is a webpage form that has a multitude of user entered data. When 'Calculate' is activated, the page is reloaded to itself, calculations are performed by php, and the output of the calculations are rendered beside the user entered data on the screen. The form is fairly long, so I have 4 separate 'Calculate' buttons located throughout the form. I was just trying to make it easier for the user to not have to scroll down the form after 'Calculate' is pressed. I'll expand my code here to try to give a better picture:
Code:
<?
..php functions
function calculate($x){
  echo "<a href="\#calc$x\">";
  echo "<input type\"submit\" name=\"submit"\ value=\"Calculate\"></a>";
}
$page=$_SERVER['PHP_SELF'];
?>
<html>
<head><title>blahblah></title></head>
<body>
<? echo"<form method=\"post\" action=\"$page\">";
..php validate data
..php calculations
?>
..html create the form <table>

<a name="calc1"></a><? calculate(1); ?>

..html
..more html
..some php

<a name="calc2"></a><? calculate(2); ?>

..finish html </table>
</body>
</html>
Like I said, this works great on Firefox, but not IE. Sorry, but I know enough about coding to be dangerous, but not proficient. Thanks for the responses.
 
ChrisHunt said:
Start off by doing a view source on the page when it is rendered, and cutting and pasting the actual HTML that is being sent. All your php code gets done and dusted before the browser ever sees it, so it just gets in the way.
See the above quote from Chris.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Sorry, here is the paste:
Code:
<body>
<form method="post" action="/Pharmacy/PubInventory.php">
<div align="center" class="PageHead">
  <p>Pharmacy Physical Inventory Variance Report
    <br>
    <span class="BoldHeadRed">Warning!!! Closing this browser or browsing to another
    page will erase your information!</span></p>
  <table width="95%"  border="0">
    <tr>
	
      <td width="48%"><p align="left" class="BoldHead">Pharmacy #: 
<input type="text" NAME="Store" size="4" maxlength="6" value=></p>
        <p align="left" class="BoldHead">Inventory Date (mm/dd/yy): 
 07 / 04 / 2007</p>
        <p align="left" class="BoldSmall">Inv. Qtr. (select one): 
			<br>
<input type="radio" name="Quarter" value="Quarter1" unchecked >Quarter 1&nbsp;<input type="radio" name="Quarter" value="Quarter2" unchecked >Quarter 2&nbsp;<input type="radio" name="Quarter" value="Quarter3" unchecked >Quarter 3&nbsp;<input type="radio" name="Quarter" value="Quarter4" unchecked >Quarter 4</p>
        <p align="left" class="BoldSmall">Inv. Day of Week (select one):<br>
<input type="radio" name="day" value="Monday" unchecked>M &nbsp;&nbsp;<input type="radio" name="day" value="Tuesday" unchecked>T &nbsp;&nbsp;<input type="radio" name="day" value="Wednesday" unchecked>W &nbsp;&nbsp;<input type="radio" name="day" value="Thursday" unchecked>Th &nbsp;&nbsp;<input type="radio" name="day" value="Friday" unchecked>F &nbsp;&nbsp;<input type="radio" name="day" value="Saturday" unchecked>Sa &nbsp;&nbsp;<input type="radio" name="day" value="Sunday" unchecked>Su &nbsp;&nbsp;<br></p>
[b]<p align="left" class="BoldSmall"><a name="calc1"></a> <a href="#calc1"><input type="submit" name="submit" value="Calculate"></a><input type="submit" name="print" value="Printer View"><br><a class='BoldHeadRed'>Please Press Calculate<br> BEFORE Printer View!</a>	   </p>[/b]</td>
      <td width="52%" class="BoldHead"><div align="left">
        <p>* Complete the entire form</p>
        <p>            * Print a copy of this Form for your files using the Printer
          View button at the bottom of this form, then <span class="BoldHeadItal">File</span>,
          and <span class="BoldHeadItal">Print</span></p>
        <p>            * Upon completion of inventory, enter key info. from this
          form onto the <em>Inventory Results</em> useform on Retail Connection </p>
        <p>            * Reference inventory procedures in your Reference &amp; Procedures
          Guide </p>
      </div></td>
    </tr>
  </table>
</div>

This is the top portion of the source. I could give you more but hopefully this shows the important parts. thanks again
 
Whilst this may not be directly responsible for the problem you are seeing, it could be the cause so it's best to rule it out. You have lots of validation issues so it may just be that the browser can't interpret your incorrect code. Try fixing those first and see if you still have a problem or not.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
thanks, Mark. Still no luck. Got rid of all validation issues, even commented out the <script/javascript that is not in use. Still same problem. I'm about ready to give up... but things like this keep me awake at night. It's not necessary for the page to run, but I WANT TO KNOW WHY!!! Oh, well. May have to chalk this up to... I'm don't know what I'm doing.

Thanks all who tried to help.
 
Instead of wrapping an anchor around your submit button (dodgy), try this instead:

Code:
<a name="calc2"></a>
<input type="submit" name="submit" value="Calculate" onclick="window.location = '#calc2'; void(0);">

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Sorry, the only validator I know and use is the one built into Dreamweaver. It says it's clean. I don't have another to use. Thanks Mark.

Dan, your code seemed to work, but as soon as the page loads and jumps to the anchor position, it reloads again from the top of the page in both IE7 and Firefox2.

Argh! LET THEM SCROLL!

I've learned a lot from this issue. You guys have been great. I need to find a new validator, for one. 2) I need to research my html better. Thanks again.
 
1. Some proper validators are:



2. If you want to submit the page, then you'll have to append the "#calc2" bookmark server-side when you re-deliver the page, as anything done client-side before submission will of course be lost when the page is re-delivered.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Ok, now I'll do some trimming down of your code...
Code:
<form method="post" action="/Pharmacy/PubInventory.php">

[ ... stuff here ... ]

<a name="calc1"></a> <a href="#calc1"><input type="submit" name="submit" value="Calculate"></a>

[ ... more stuff ... ]

<a name="calc2"></a> <a href="#calc2"><input type="submit" name="submit" value="Calculate"></a>

[ ... and so on ... ]
Now, what you want to do is to have people click those submit forms and have it scroll back to that point when the page is redisplayed.

Those [tt]<a href="#calc1">[/tt] links are irrelevant. They aren't controlling where the page scrolls to, because clicking the button will submit to the [tt]action[/tt] URL of the form and ignore any other links. If FF and IE are behaving differently, that's just because they behave differently by default.

What I think you need to do is add some Javascript to each button which programtically changes the [tt]action[/tt] of the form to add the relevant #id before submitting. I don't do enough Javascript to be able to code that off the top of my head, but it shouldn't be too complicated.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Thanks again, Dan. I did find a plug in for Firefox that does a more extensive job of validating html. It actually uses as one of its validators. What I found is that most of the invalid code is resulting from php statements embedded within the html input statements that display the results of the calculations as the page reloads.

Thanks, Chris. I hadn't thought of using javascript to do the job. I, also, don't do much javascript coding, but I'm looking into it now. One problem I had recently while trying to add a JS button to display a "how to" page within the current document was that it "broke", for a lack of a better word, all my 'Calculate' buttons. It rendered them inactive. I removed the JS code and they started working again. Like I said, I don't do JS very much, and I probably had it coded incorrectly. I found an html/php workaround that accomplishes the task just as well.

Back to the book. Thanks all.

Barry
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top