Question

This is driving me up the wall. I obviously don’t understand soemthing pretty fundamental, I’m hoping someone can shed light on the matter.

        <form action="/tagged" method="get">
            <input type="text" name="q" value="{SearchQuery}"/>
            <input type="submit" value="Search"/>
        </form>    

On this page gives me http://syndex.me/tagged?q=yellow
But if I change /tagged to /search (the default state for tumblr search form) it actually does the right thing and gives a url to the effect of http://syndex.me/search/yellow.

All this just because, tumblrs search is actually broken. That’s right. A company valued at $800 million does not have a viable search feature. The thing is if you go to http://syndex.me/tagged/yellow It actually works!. SO I’m just trying to hack the service and switch /search to tagged. Pretty mental.

I’m happy to hack that any way possible… jQuery?

Thanks so much.

Answer 1

The parts of your page are the core behind the search function:

JavaScript:

function handleThis(formElm){
    window.location="http://syndex.me/tagged/"+formElm.q.value+"";
    return false;
}

HTML:

<form onsubmit="return handleThis(this)" >
    <input type="text" name="q" value=""/>
</form> 

An event listener is bound to your form, using onsubmit="return handleThis(this)".

• onsubmit is triggered when the user presses enter, or hits the Search button.
• Inside the onsubmit attribute (aka event handler), you notice return handleThis(this). This function (which is defined at the same page; look ahead) is called with the this keyword as first argument. this from within the context of an event handler refers to the event listener’s owner element, in this case <form>.
  In handleThis(formElm), you notice "http://syndex.me/tagged/"+formElm.q.value. formElm.q refers to an input element called q within the form element. formElem.q.value holds the value of the input element, which contains the search keywords. The just constructed URL is assigned to window.location, which initiates a new request to http://syndex.me/tagged/search_terms.
  After that line, you see return false. Inside the onsubmit event handler, you’ve seen return handleThis(this). The return value of handleThis is passed to the onsubmit event handler. So, the statement equals onsubmit="return false". This means that the form does not submit itself any more.
• The action attribute is not defined. As mentioned previously, this is not needed, because the form is not submitted due return false. When an error occurs, or if a user has disabled JavaScript, the form will submit itself to the URL as defined at action. Because the action attribute is not specified, the page’s current URL is used instead, http://syndex.me/ in this case. All named form elements are added to the request, so the final URL will be http://syndex.me/?q=search_terms

To get back to your question, <form action="/tagged"method=”get”>`:

• No onsubmit event handler.
• Because the onsubmit event handler is not specified, the HTML form will be submitted by the browser (an imaginary onsubmit handler would equal return true.
• The action URL is defined to be /tagged, which translates to a file called “tagged” at the ROOT directory of your host. In this case: http://syndex.me/tagged?q=search_terms. (q=.. is a result from the input element called q).
  When you change action to /tagged/ instead of /tagged, the submitted form will request the following page: http://syndex.me/tagged/?q=search_terms

When you change /tagged to /search, your form submits to http://syndex.me/search?q=.... As seen through the headers, this location redirects to http://syndex.me/search/....
This behaviour is likely achieved using a rule defined in .htaccess:

RewriteEngine On
RewriteRule ^/search\?q=(.*)$ /search/$1 [L,R=301]

Understood?