Home Appending text to results of HTML form action search, one text box, 2 buttons, 2 possible results,

Questions

Appending text to results of HTML form action search, one text box, 2 buttons, 2 possible results,

November 25, 2021

I used @John Strood’s answer from here to build my current script. The below code is close to my need, I now just need to append text to the results.

For example, appending site:imdb.com/title toHakunamatata to get https://www.bing.com/search?q=site:imdb.com/title+Hakunamatata

@Spectric had a great answer for a single-submit form, but it does not seem to function with the current script.

<form action="" method="get">
    <input type="text" value="Hakunamatata"  id="box" name="search_query"placeholder="text" autofocus />

    <input type="submit" value="BNG" formaction="https://testurl1.com"
        onclick="document.getElementById('box').name='q'" />

    <input type="submit" value="ABB" formaction="http://testurl2.com"
        onclick="document.getElementById('box').name='s'" />
</form>

If you are wondering, the onclick functions are necessary
testurl1 uses the search modifier of ?q and testurl2 uses ?s

>Solution :

Prepend the string to the input’s value when the submit event is fired.

form.addEventListener('submit', function() {
  box.value = 'site:imdb.com/title ' + box.value;
})

<form action="" method="get" id="form">
  <input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />

  <input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q'" />

  <input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>

To conditionally prepend the string, move the logic to the button’s click event listener.

<form action="" method="get" id="form">
  <input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />

  <input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q';box.value = 'site:imdb.com/title ' + box.value;" />

  <input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>