2

I am trying these days to do a search form that sends to two different pages with two different buttons with a single text box. So far I am doing this:

<form action="http://www.youtube.com/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="YouTube" />
</form>

<form action="https://torrentz.eu/search" method="get">
<input name="q" type="text" maxlength="128" />
<input type="submit" value="TorrentZ" />
</form>

of course the result is this:

nice and clean

I can work with that, but I want to make it "cuter" like this:

nice and clean

So far I have tried using a script but I did not get it so I scraped it, then I tried making an if/elseif but yet again, I was not sure what I was doing, I am not a good planner for what I see, a toggle button or a dropbox is not as fast, as I just need to press tab once or twice and enter to just search where I want.

As an extra note, I am just making my personal "new tab" for chrome, as the basic and the ones I find in extensions are pretty heavy for my mini laptop.

1
  • use javascript to link a button to the url and pass data to it. Also you should use post request and not get for sending the query.
    – Riken Shah
    Jun 17, 2016 at 4:17

2 Answers 2

3

In HTML5 you can use formaction attribute.

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input name="search_query" type="text" maxlength="128" />
      <input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
      <input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
    </form>
  </body>
</html>
3
  • Is just two buttons, not sure how to use then, gonna see. Jun 18, 2016 at 0:30
  • Edit - I have added a text input too. Put this code in some html file and double click on that file.
    – Riken Shah
    Jun 18, 2016 at 5:37
  • hmm, I try doing the same before but did not work, i notice i did not make it into a form, thank you. Edit: i notice that still use "search_query" for both, while youtube does work, torrentz use only a "q", so it does not work there, so is still halfway. Jun 18, 2016 at 9:46
1

Since you tried and failed a script, let's look at ways we can achieve this.

Using form

Be extremely wary of what you do here. It is easy to send a get request using form but it always "flushes" out the query strings already present in the action URL, and submits the request by adding name-value pairs in its child nodes. Make sure to create your query as a child node.

<input type="text" id="box" name="searchbox" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="button" value="Youtube" onclick="search_youtube()"/>
<input type="button" value="Torrentz" onclick="search_torrentz()"/>
<script>
   function search_youtube(){
    var add="https://www.youtube.com/results";       
    var box = document.getElementById("box");
    box.name="search_query"
    if(box.value)
    {
        var form = open().document.createElement("form");
        form.action=add;
        form.appendChild(box.cloneNode(false))
        form.submit();
    }
   } 

  function search_torrentz(){
    var add="https://www.torrentz.com/search";             
    var box = document.getElementById("box");
    box.name="q"
    if(box.value)
    {
        var form = open().document.createElement("form");
        form.action=add;
        form.appendChild(box.cloneNode(false))
        form.submit();
    }
  }
</script>

Using HTML5 formaction attribute

<form action="https://www.youtube.com/results" method="GET">
    <input type="text" id="box" name="search_query" maxlength="128" placeholder="Type text to be searched here" autofocus />
    <input type="submit" value="Torrentz" formaction="https://www.torrentz.com/search" onclick="document.getElementById('box').name='q'" />
    <input type="submit" name="submit" value="Youtube" />
</form>
2
  • The buttons do nothing, maybe is missing something. Jun 18, 2016 at 0:31
  • @manuelvillarroel Thank you for letting me know! I have updated the answer. Let me know if this helped. Jun 18, 2016 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.