SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forms and hashes

    Ok, this should be easy but for me it doesn't seem so... probably because i'm very close to the deadline and have a lot to do.

    This is what i'm trying to do;
    I have an html form with a textfield and a button - whenever the button is clicked or enter is pressed i would like it to goto a particular page and place the text field's value on the end as a hash.

    for instance;
    user enters "test" and presses enter or hits the button and the page goes to "google.com#test"

  2. #2
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anarch View Post
    Ok, this should be easy but for me it doesn't seem so... probably because i'm very close to the deadline and have a lot to do.

    This is what i'm trying to do;
    I have an html form with a textfield and a button - whenever the button is clicked or enter is pressed i would like it to goto a particular page and place the text field's value on the end as a hash.

    for instance;
    user enters "test" and presses enter or hits the button and the page goes to "google.com#test"
    is there a base site and then the #textentered or also the url changes, I mean is it always google.com#textentered or it will be somerandompage.com#textentered?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's always the same page but the hash will change. I already have a method for getting and handling hashes. I just don't know how to manipulate the form.
    A simple button onclick doesn't do the trick and neither does wrapping it in <a href>
    so far the best i can get is "?searchTerm=testttt" which really isn't acceptable because the page receiving it treats terms after "?" as a particular action whereas it treats # as something entirely different.

    the field is a search field. I'm using the hash to pass the term across joomla modules to a new page where the results will be displayed.

    honestly i don't even know where the searchTerm part is coming from.. I guess it's the default method of HTML forms. I've tried taking the result that gave me that and using # + .substr(12). No go -_-

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    would this work for what you are trying to do?

    Code Java:
    function openUrl(){
    var hash = # + getElementBtyId('fieldid').value;
    var url = "http://www.google.com" + hash;
    window.open (url, "mywindow");
    }

    Code HTML4Strict:
    <input type="submit" onclick="openUrl()" value="Submit" />

    I am not very good at javascript so I donīt know if this will work for what you need

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope unfortunately...

    I need to open the page within the parent not as a popup
    and I'd already tried the same thing with window.location.href='s instead of open() and it doesn't do anything but append ?searchTerm=***word**

    I even tried taking the result and concatenating the desired url and # with it using .substr(12) with no luck.

    I really don't want to go back into my original JS function to make this work for an unlinked form on a different page.
    My JS app is HUGE. It's encompasses a custom shadowbox and also interfaces the youtube API to pull videos from a feed for a custom display within a list. it also includes a homebrew search engine designed for the feed and links up with about 50 custom filters contained within an accordion.
    the reason I want it to be transferred via hash is because on the receiving end I went through the trouble to write a hashlistener to make the filters work properly from page to page.

    it sounds like overhaul until you realize i'm using Joomla with different implementations in different places on the page. the search field has no sort of access to anything outside of it's module. I just can't believe i'm stuck on this miniscule functionality after building such a hardcore solution -_-

    Normally I would probably be able to handle this with no problem but I've been working my ass off. I'm pretty much completely out of steam after working well over 70 hours in the past week on this project that is now 5 days behind schedule. The original developer had 2.5 months to complete the project and bailed out in the last few days... without the decency to even leave some code behind (i think he was failure and just couldn't do it). I'm already 4x past my estimate and the client ran out of budget at 2x so i'm not even getting paid. However the client has a lot more projects for me to work on IF i can get this damn site live! Tonight was supposed to be the ultimate deadline and I have to be ready to go live before 5-6AM.

    This is a nightmare -_- and my brain isn't even working.
    The worst part is... I've already received a 50% deposit on my original quote and I won't get paid the 150% balance until it's finished.
    I'm not really a web developer... I write C# for fun and typically write x32 and x64 intel assembly based embedded software. I just took up the job for extra cash to pay off student loans.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    From memory i believe the second argument for window.open can also act as a target so for instance if you use...

    Code JavaScript:
    var url = 'http://www.myurl.com/page.php#' + document.getElementById('textInput').value;
    window.open(url, '_self');
    Also i noticed you said you tried
    Code JavaScript:
    window.location.href
    which won't work as .href is a property of the window object and doesn't use any exclusive redirect event so all it does is set the href value, if you remove .href so its just the below it will redirect.
    Code JavaScript:
    window.location = 'http://www.google.com';

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried that too... unfortunately all it does is append the current url with ?textfieldnameproperty=termattemptedtoapply

    i use ? as a stop to specify an action on the receiving end so that's not really acceptable even if it did relocate to the proper page

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function openUrl(){
    var url = 'http://www.myurl.com/page.php#' + document.getElementById('searchtext').value;
    window.open(url, '_self');
    //window.location = url;
    }
    </script>
    
    <div id="searchForm" align="center">
    <form id="searchForm"> 
    	<input class="searchbutton" type="submit" value="Search" onclick="openUrl()"> 
    	<input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;"> 
           
    </form>

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Here's something you can try, instead of trying to use JavaScript use HTML instead.

    HTML Code:
    <form id="searchForm" action="url_here" method="get">
    So what this will do by default is append any input field value to the URL rather then using extra code to do the work the browser can do.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ugggghhhh... No dice.

    I tried that too before coming here to post and still all it does is put ?searchTerm= onto the end of the current URL.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <INPUT TYPE="button" VALUE="Home Page" ONCLICK="window.location.href='http://www.google.com'">
    works by itself but how do i go about bring the hash value with me O_O while using type submit so i can check for the enter key in the search field

  12. #12
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anarch View Post
    <INPUT TYPE="button" VALUE="Home Page" ONCLICK="window.location.href='http://www.google.com'">
    works by itself but how do i go about bring the hash value with me O_O while using type submit so i can check for the enter key in the search field

    How about using onchange for the text field and have a function that changes the url?

    Code HTML4Strict:
    function change_url(){
    some script to construct url
    some script to update form action
    }
    </script>
     
    <div id="searchForm" align="center">
    <form id="searchForm" action="change_this" method="get" > 
    	<input class="searchbutton" type="submit" value="Search" onclick="openUrl()"> 
    	<input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;" onchange="change_url()" > 
     
    </form>

  13. #13
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try this, it works for me up to the point of opening google.com but google does not seem to respond very well at the url Google

    Code HTML4Strict:
    <script type="text/javascript" >
    function changeUrl(){
    var hash = '#' + document.getElementById('searchtext').value;
    var url = "http://www.google.com" + hash;
    document.getElementById('searchForm').action = url;
    }
    </script>
    <form id="searchForm" action="change_this" method="get" >
        <input class="searchbutton" type="submit" value="Search" >
        <input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;" onchange="changeUrl()" >
    </form>

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anarch View Post
    <INPUT TYPE="button" VALUE="Home Page" ONCLICK="window.location.href='http://www.google.com'">
    works by itself but how do i go about bring the hash value with me O_O while using type submit so i can check for the enter key in the search field
    You can take over the submit event, so that you can use location.href to navigate to where you need it to go.

    Let's start though with something that will work even when scripting is not available, even though it uses a querystring instead of a hash.
    I've made some adjustments to your sample form to fix problems such as invalid duplicate id's, and inline styles.

    Code html4strict:
    <html>
    <head>
    <style type="text/css">
    #searchForm {
        text-align: center;
    }
    .searchfield {
        width: 280px;
    }
    </style>
    </head>
    <body>
    <div id="searchForm">
        <form id="search" action="http://www.google.com/search"> 
            <input type="submit" value="Search" class="searchbutton"> 
            <input id="searchtext" name="q" class="searchfield">
        </form>
    </div>
    </body>
    </html>

    Is a successful form-based search what you need? Because if so, the above code works without needing any scripting at all.

    Put in a search term of "kittens" and the form takes you to google's result page: http://www.google.com/search?q=kittens
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no -_- i need it to be google.com#kittens

    sorry tla, your's still didn't work for me either.. i ended up with going to the page but getting searchpage?searchTerm=sdf rather than searchpage#sdf

  16. #16
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anarch View Post
    no -_- i need it to be google.com#kittens

    sorry tla, your's still didn't work for me either.. i ended up with going to the page but getting searchpage?searchTerm=sdf rather than searchpage#sdf
    The reason why is because google changes the url once it gets to it and about that you will be able to do nothing since you have no control over how google will handle the search because the action is changed to Google

  17. #17
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not trying to get to google. I'm trying to get to my own search engine that accepts a hash value on page load to preload results based on a filter from a different page.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anarch View Post
    no -_- i need it to be google.com#kittens

    sorry tla, your's still didn't work for me either.. i ended up with going to the page but getting searchpage?searchTerm=sdf rather than searchpage#sdf
    That's okay, because now we use scripting to take over the submit event and perform the task that is needed.

    Something like this should do it:

    Code javascript:
    var form = document.getElementById('search');
    form.onsubmit = function () {
        var form = this,
            domain = form.action.match(/^(http:\/\/[a-zA-Z.]+)/)[1],
            searchtext = form.elements.q.value;
        location.href = domain + '#' + searchtext;
        return false;
    }

    Or if you don't want to worry about the non-scripted situations working, you can put the domain you need in the form action, and simplify things to this:

    Code javascript:
    var form = document.getElementById('search');
    form.onsubmit = function () {
        location.href = this.action + '#' + this.elements.q.value;
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh it's still returning this instead of just a hash

    myurlhere.com/searchpage?searchTerm=test

    you got my hopes up lol

    i guess there's no way around it but to build a complicated exception into my code.

    the weird part is that in every thing we've tried the "#" just dissapears and gets replaced by ?fieldname=

    o_O damn html...

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anarch View Post
    heh it's still returning this instead of just a hash
    Then most likely you are running the script before the form even exists yet on the page.

    Put the script at the end of the body, just before the body tag. That's where they're supposed to improve web-page loading performance, and to achieve ease of access to on-page elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah, i'm running it after the form which is also at the very bottom >_>

    i'd paste that code but it's a mess at the moment because I just condensed 3 different modules into one.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Well for the sake of reference, here is a simple test page that demonstrates the technique working fine.

    Code html4strict:
    <html>
    <head>
    <style type="text/css">
    #searchForm {
        text-align: center;
    }
    .searchfield {
        width: 280px;
    }
    </style>
    </head>
    <body>
    <div id="searchForm">
        <form id="search" action="http://www.google.com/search"> 
            <input type="submit" value="Search" class="searchbutton"> 
            <input id="searchtext" name="q" class="searchfield">
        </form>
    </div>
    <script type="text/javascript">
    var form = document.getElementById('search');
    form.onsubmit = function () {
        var form = this,
            domain = form.action.match(/^(http:\/\/[a-zA-Z.]+)/)[1],
            searchtext = form.elements.q.value;
        location.href = domain + '#q=' + searchtext;
        return false;
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    phew finally got it working, thanks for everyone's help!

    the issue with your solution paul turned out to be that my processing script was expectin 'Search' and not 'search' on a linux server. whoops! i didn't even mean to use any capitals in the first place


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •