PHP/CSS: Postback form doesn't reload back to same position on page (Scrolling required)

Question

Newb here who hasn't found an answer yet they they could understand.

I have built a small post back webication which will convert celcius to ferinheight or vice versa, on submit, the page reloads to the top of the page vs. staying fixed where we are currently focused which seems like poor user design even if it is only for myself and my teacher to show that I was able to make the php application.

My goal is that when you click submit the page will reload, but it will reload to the position we are at on the page so the user (my teacher) doesn't have to scroll back to check to see that i returned the proper result. This isn't a class requirement, this is just me being a little anal retentive/trying to make my app as good as i can.

Working url: http://school.max-o-matic.com/itc250.php (click on the arrow in the lower right to go to the converter or just scroll to bottom of the page).

Here is my code:

<div id="010" class="container">
<h2>e01: Temperature Converter</h2>
<p class="lead">
    &ldquo;It doesn't matter what temperature the room is, it's always room temperature.&rdquo;<br />- <a href="http://www.brainyquote.com/quotes/authors/s/steven_wright.html">Steven Wright</a>, Comedian.
</p>
</div>

<div class="background-white">
<div class="container">
    <h3 id="010">&ordm;Fahrenheit to &ordm;Celsius.</h3>
    <div class="experience row">
        <div class="col-md-4">
            <!--<h4>Any Reason to Exist?</h4>-->
            <p class="experience-period">
                Build a PHP application that will:
                <ul>
                    <li>Post back to itself</li>
                    <li>Convert Fahrenheit to Celsius</li>
                    <li>Convert Celsius to Fahrenheit</li>
                </ul>
                </p>
        </div>
        <div class="col-md-8">
            <p>
                <?php
                /* everything submitted comes back as a string we are concerned with 'name' as it is what comes back */
                    if (isset ($_POST['submit'])){//data is subnmitted, show it
                        //$myTemp = (int)$_POST['myTemp'];// make it an int
                        $myTemp = (float)$_POST['myTemp'];// float more forving

                        $F = $myTemp  *  9/5 + 32;
                        $C = $myTemp  *  9/5 - 32;

                        #need to declare the selection, then we can compare to it
                        $myFilter = $_POST['myFilter'];

                        if ($myFilter == 'f'){echo "<b>" . $F . "&ordm; ferinheight</b><br />";}
                        if ($myFilter == 'c'){echo "<b>" . $C . "&ordm; Celcius</b><br />";}

                        }else{
                    ?>
                    <form action="itc250.php" method="post">
                        <input type="text" name="myTemp" placeholder="Enter value to convert" />
                         &nbsp;  &nbsp; &nbsp;

                        <select input type="text"  name="myFilter">
                          <option value="f">Convert C&ordm; to F&ordm;</option>
                          <option value="c">Convert F&ordm; to C&ordm;</option>
                        </select>
                        <br /><br />
                        <input type="submit" name="submit" /> <!--purposely blurred -->
                    </form>
                    <?php
                         }
                    ?>

                <br />
                <span class="hidden-phone">
                    <strong>Helpful Hint:</strong> As the form is 'included' with this document, it must specify this doc instead of itself.
                    <br /><br />
                    <strong>Question:</strong> I don't understand why i needed to declare 'myFilter', i thought that that would be carried with the $_POSTED info.
                    </span>
                </span>
            </p>

        </div>
    </div>
</div>
</div>

Answer 1

You can submit your form to an anchor using a pound symbol (#). So www.myurl.com/mypage.php#myanchor

`#myanchor is relative to the ID of an element on the page. So if you have a div with an ID #answer, just set the URL to go to www.myurl.com/mypage.php#answer

Source http://www.w3schools.com/html/html_links.asp

Answer 2

Set an id on the element that you want your page to scroll to. Then reference the id as an anchor in the URL in your <form action>:

<form action="itc250.php#myid">