Question 43769 in Html Question posted in
Some basic documentation can be found here.

How do you know the search query if the search term is in the middle of the website URL? – Html

I’m wondering what action url and name term I’m suppose to use if the search term is in the middle of the URL?

For example, the HTML code below allows me to input text and when I press enter or the button, it automatically sends me to the website with the search term already entered.

<form action="https://www.google.com/search?q=goog">
   <input id="Google" type="text" name="q">
   <button>Search on Google</button>
</form>

But I don’t get what use if it’s an URL like this: https://youglish.com/pronounce/朋友/chinese

I tried this and I’m only sent to the Chinese site, but the search term wasn’t searched

<form action="https://youglish.com/pronounce/../chinese">
    <input id="Youglish" type="text" name="pronounce">
    <button>Search on Youglish</button>
</form>

Or something like in Google images….

https://www.google.com/search?q=testing&tbm=isch&source=hp&biw=1024&bih=657&ei=IKIXZIrwH-bF0PEP5paEwA4&iflsig=AK50M_UAAAAAZBewMDMUyk_z3qZEoFpdrb-I429k6qMC&ved=0ahUKEwiKgPPsmen9AhXmIjQIHWYLAegQ4dUDCAc&uact=5&oq=testing&gs_lcp=CgNpbWcQAzIICAAQgAQQsQMyCAgAEIAEELEDMggIABCABBCxAzIICAAQgAQQsQMyCAgAEIAEELEDMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgARQKFjuBWCHB2gAcAB4AoABqwOIAe0JkgEJMC4xLjEuMS4xmAEAoAEBqgELZ3dzLXdpei1pbWewAQA&sclient=img

<form action="https://www.google.com/search?q=..=img">
        <input id="Google Images" type="text" name="q=..=img">
        <button>Search on Google Images</button>
</form>

It just takes me to the Google Images website, and not with the search term entered.

Tags:

3

Answers


  1. 0

    Assuming that in this example:

    https://youglish.com/pronounce/../chinese

    You meant to add the search term to where the ... is, the short answer is that you can’t do this with just HTML, you need Javascript as well.

    The third example should just work, because it does use ?q=. Using HTML forms query parameters get added to the URL after the ?, and the order generally doesn’t matter.

    The google example has a bunch of other parameters that you can individually add to your form with <input type="hidden"> for each parameter, however for google specifically you can also ignore all those.

    Login or Signup to reply.
  2. 0

    This doesn’t work how you think it works.

    Your form submission is creating an HTTP GET request and constructing GET parameters from your form data. If you type fox into the field named q, you will get ?q=fox. If there is a second field named x with value y, you get ?q=fox&x=y.

    With Google image search, the solution is simply to add a second, hidden field that will cause &tbm=isch to be appended to the URL string:

    <form action="https://www.google.com/search">
    <input id="Google Images" type="text" name="q">
    <input type="hidden" name="tbm" value="isch">
    <button>Search on Google Images</button>
</form>

    But all of this only works because Google uses GET parameters.

    But I don’t get what use if it’s an URL like this: https://youglish.com/pronounce/朋友/chinese

    Can’t be done with pure HTML, you need JavaScript. Something like:

    <script>
function searchOnYouglish()
{
    let token = document.getElementById('Youglish').value;
    location.href = `https://youglish.com/pronounce/${token}/chinese`;
    return false; // Prevent default form submission
}
</script>
<form onsubmit="return searchOnYouglish()">
    <input id="Youglish" type="text" name="pronounce">
    <button>Search on Youglish</button>
</form>
    Login or Signup to reply.
  3. 0

    I think you can’t do that with just an HTML form, because when you send the form, the inputs values are added to the action url so in your example:

    <form action="https://youglish.com/pronounce/../chinese">
    <input id="Youglish" type="text" name="pronounce">
    <button>Search on Youglish</button>
</form>

    The resulting url would be:

    https://youglish.com/pronounce/../chinese?pronounce=inputValue

    and checking the chinese browser, the url you need is:

    https://youglish.com/pronounce/inputValue/chinese

    So you can use javaScript to prevent the form event and then create the url and open it as you wish.
    Here is the documentation of Event.preventDefault(), it contains some examples: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search