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

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

CodePudding user response：

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>