www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Redirect after submit to an anchor on the same page

  1. #1
    Join Date
    Jul 2003
    Posts
    17

    resolved [RESOLVED] Redirect after submit to an anchor on the same page

    Hi,

    I would like to redirect a user once they have clicked on a forms submit button to an anchor on the same page.

    The code I am trying to use is the following:

    Code:
    <input type=hidden name="redirect" value="http://www.6ixfilms.com#software">
    However this does not work. I can only get it to go to the main page with this code:

    Code:
    <input type=hidden name="redirect" value="http://www.6ixfilms.com">
    My anchor is set as per the following:

    Code:
    <div id="software">
    I would appreciate any help or advice if possible.

    Many thanks

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Well firstly, an actual page anchor would use the <a> tag, utilizing the name attribute to specify the anchor you can link to later. To move to a <div> you would need to use some javascript to scroll the page to the location of the <div>.

    Now my first question would have to be whether you want the page to reload (and then move to the specified 'anchor') first or not. Obviously there are 2 ways to go about that, one being to reload the page with an anchor in the url and the second being to just move to this anchored location directly after submitting the data, remaining on the page the entire time.

    For the sake of simplicity I'll cover the first option for now as the second would involve a bit more coding using javascript. As far as the first method goes you simply need to do two things: set a proper anchor tag and set up your form to redirect to the anchor tag.
    HTML Code:
    <form name="fooForm" action="submit_data_gets_sent_here.htm" method="POST" onsubmit="document.location.href='thispage.html#software'">
    <input type="text" name="formField" />
    <input type="submit" value="Submit" />
    </form>
    
    <a name="software"></a>
    <!-- Content and such here -->
    That should take care of your problem. Let me know if it doesn't or you need something else.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jul 2003
    Posts
    17
    Quote Originally Posted by Sup3rkirby View Post
    For the sake of simplicity I'll cover the first option for now as the second would involve a bit more coding using javascript. As far as the first method goes you simply need to do two things: set a proper anchor tag and set up your form to redirect to the anchor tag.
    HTML Code:
    <form name="fooForm" action="submit_data_gets_sent_here.htm" method="POST" onsubmit="document.location.href='thispage.html#software'">
    <input type="text" name="formField" />
    <input type="submit" value="Submit" />
    </form>
    
    <a name="software"></a>
    <!-- Content and such here -->
    That should take care of your problem. Let me know if it doesn't or you need something else.
    Hi Sup3rkirby,

    Thank you for taking the time to reply to me.

    I have added the following code which works but then it redirects me back to my page. I am aware that this is because of this line:
    HTML Code:
    <input type=hidden name="redirect" value="http://www.6ixfilms.com">
    However if I remove this line then the page redirects to a template page if the redirect page fails for what ever reason.

    So I have a measure of success in that after the submit button is clicked it takes the user to the anchor 'software' but it then executes the line above.

    My code is as follows:

    HTML Code:
    <form action="http://www.6ixfilms.com/cgi-bin/6ix.pl" method="post" id="contact-form" onsubmit="document.location.href='http://www.6ixfilms.com#software'">
        <input type="text" name="realname" id="name" value="Your Name" class="hintTextbox"/>
        <input type="text" name="email" id="email" value="Your Email Address" class="hintTextbox" />
        <textarea name="comments" id="comment"></textarea>
        <input type=hidden name="redirect" value="http://www.6ixfilms.com">
        <input type="submit" value="Submit" id="submit" />
    </form>
    Ideally I would like the user to click submit, they are prompted that it is a success and then when they click 'OK' the form simply resets and the page does not redirect in anyway.

    I really appreciate your help and I hope I have explained things clearly for you!

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Now if I understand what you want here, it would essentially be a form that submits, displays a confirmation and then preforms some action while never leaving the page. If this is the case then my original second option would have been the correct choice as it involved the use of AJAX to submit your form. AJAX is basically a way for pages to send and recieve data to other scripts/servers without needing to load any additional pages and would easily take care of your issue.

    So there will need to be a few changes to how your page works if you want to set it up with AJAX. There are probably mixed opinions about this next part but in my personal opinion I would say get rid of the submit button and use a regular <input> based button. Since AJAX is going to send the form for us we don't need the form to submit and attempt to load a page action. So your form would look something like this:
    HTML Code:
    <form action="http://www.6ixfilms.com/cgi-bin/6ix.pl" method="post" name="contact-form" onsubmit="_SubmitForm()">
        <input type="text" name="realname" id="name" value="Your Name" class="hintTextbox"/>
        <input type="text" name="email" id="email" value="Your Email Address" class="hintTextbox" />
        <textarea name="comments" id="comment"></textarea>
        <input type=hidden name="redirect" value="http://www.6ixfilms.com">
        <input type="button" value="Submit" id="submit" onclick="_SubmitForm()" />
    </form>
    Next you'll need your AJAX coding in javascript to actually send the form, clear everything out, display your confirmation and lastly move to a designated anchor on the page. I'll use some generic things (like the alert() message box) for now but these things can always be replaced with custom message boxes and you could also add in a simple loading icon/message while the form is being submitted.
    Code:
    <script type="text/javascript">
    function setReqObj() {
      var nAjax;
      if(window.XMLHttpRequest) {
        nAjax = new XMLHttpRequest();
      } else {
        nAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return nAjax;
    }
    
    function _SubmitForm() {
      var xmlhttp = setReqObj();
    
      if(xmlhttp) {
        xmlhttp.onreadystatechange=function() {
          if(xmlhttp.readyState == 4) {
            document.forms["contact-form"].reset();
    
            $responseText = xmlhttp.responseText;
            alert("Comments successfully submitted!");
            document.location.href = "#software";
          }
        }
    
        var $validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var $name = document.forms["contact-form"]["realname"].value;
        var $email = document.forms["contact-form"]["email"].value;
        var $comments = encodeURIComponent(document.forms["contact-form"]["comments"].value);
    
        if($name == "") {
          alert("Please enter a valid name!");
          return false;
        }
        if(!$email.match($validEmail)) {
          alert("Please enter a valid email address!");
          return false;
        }
        if($comment.length <= 4) {
          alert("Please enter a valid comment!");
          return false;
        }
    
        var $ajData = "realname=" + $name + "&email=" + $email + "&comments=" + $comments;
    
        xmlhttp.open("POST", "http://www.6ixfilms.com/cgi-bin/6ix.pl", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send($ajData);
      } else {
        document.forms["contact-form"].submit();
      }
    }
    </script>
    Again, this is just a basic draft of what you need to make this work. It has some basic validation to check the form elements before submitting and then will submit them to your script just as if the form were normally submitted. I also set a variable called $responseText which would contain the response or output of the 6ix.pl script. You could choose to utilize this and preform different actions based on the response. Also as a fallback, any users in a browser that doesn't support AJAX will have the form submitted normally. So their page will change and reload as unfortunately they have no other option.

    Let me know if this works out for you or not.
    Last edited by Sup3rkirby; 11-14-2012 at 11:22 AM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Jul 2003
    Posts
    17
    Hi ,

    I have followed the example you gave and made the changes to my page but I can not get the function '_SubmitForm()' to execute.

    I have never used a regular input based button and it seems like the button is 'unlinked' somehow?

    I have tried to make this work on a stand alone page as well just to see if any of my other Java was affecting things but it is the same problem of the submit just seems unlinked.

    I hope that is clear and thank you again for your continued help.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Sorry, that was a small mistake on my end. I accidentally called '$comment' instead of '$comments' on one of the lines. Here is the full set of javascript code again with the correction.

    Code:
    <script type="text/javascript">
    function setReqObj() {
      var nAjax;
      if(window.XMLHttpRequest) {
        nAjax = new XMLHttpRequest();
      } else {
        nAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return nAjax;
    }
    
    function _SubmitForm() {
      var xmlhttp = setReqObj();
    
      if(xmlhttp) {
        xmlhttp.onreadystatechange=function() {
          if(xmlhttp.readyState == 4) {
            document.forms["contact-form"].reset();
    
            $responseText = xmlhttp.responseText;
            alert("Comments successfully submitted!");
            document.location.href = "#software";
          }
        }
    
        var $validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var $name = document.forms["contact-form"]["realname"].value;
        var $email = document.forms["contact-form"]["email"].value;
        var $comments = encodeURIComponent(document.forms["contact-form"]["comments"].value);
    
        if($name == "") {
          alert("Please enter a valid name!");
          return false;
        }
        if(!$email.match($validEmail)) {
          alert("Please enter a valid email address!");
          return false;
        }
        if($comments.length <= 4) {
          alert("Please enter a valid comment!");
          return false;
        }
    
        var $ajData = "realname=" + $name + "&email=" + $email + "&comments=" + $comments;
    
        xmlhttp.open("POST", "http://www.6ixfilms.com/cgi-bin/6ix.pl", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send($ajData);
      } else {
        document.forms["contact-form"].submit();
      }
    }
    </script>
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Jul 2003
    Posts
    17
    Quote Originally Posted by Sup3rkirby View Post
    Sorry, that was a small mistake on my end. I accidentally called '$comment' instead of '$comments' on one of the lines.
    Hi Sup3rkirby,

    I should have spotted that but thank you for posting the correction.

    It worked perfectly and I can not thank you enough.

    I am not a JavaScript expert but your code is clean and efficient and has taught me a lot.

    Many thanks

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