Is it possible to have a form input text have two action outputs?-CodePudding

What I would like to do is be able to type something into the form input text field and press one of the buttons to search those results to my choosing: Google, Bing, DuckDuckGo or any others I want to add.

I have this:

<form method="get" action="https://www.google.com/search?=">
<input type="reset" />
<input type="text" name="q" autocomplete="off" autofocus />
<input type="submit" value="Google Search"/>
<input type="submit" value="Bing Search"/>
</form>

I did see a post on here but unfortunately, the code wasn't complete: Is it possible to have two actions on a form?

That post showed

<form id="search" action="" method="get" onsubmit="javascript: return SubmitForm();">
<.... ret of the form>
</form>

and js

function SubmitForm()
{
    showResultDiv();
    document.forms['search'].action='http://www.google.com/search';
    document.forms['search'].target='frame_result1';
    document.forms['search'].submit();

    document.forms['search'].action='http://www.bing.com/search';
    document.forms['search'].target='frame_result2';
    document.forms['search'].submit();
    return false;
}

From the looks of it, it's possible but not sure how. Any ideas without PHP. Just HTML and JS? Thanks for your time.

CodePudding user response：

You could do it using HTML only.

HTML

<form method="get"  target="blank" >
    <input type="reset" />
    <input type="text" name="q" autocomplete="off" autofocus />
    <input type="submit" value="Google Search" formaction="https://www.google.com/search"/>
    <input type="submit" value="Bing Search"  formaction="https://www.bing.com/search"/>
</form>

I found this here

CodePudding user response：

Maybe this is not the best solutions but it work and its more secure than get method. if called win2 before win it will focus on google window.

<form id="form" role="search">
<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
<button>Search</button>

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q= ';
const bing = 'https://www.bing.com/search?q= '
const site = '';
function submitted(event) {
event.preventDefault();
const urlG = google   site   ' '   q.value;
const urlB = bing   site   ' '   q.value;
const win = window.open(urlG, '_blank');
const win2 = window.open(urlB, '_blank');
win.focus();
win2.focus();
}
f.addEventListener('submit', submitted);

CodePudding user response：

This works:

HTML:

<form method="get"  target="blank" >
    <input type="reset" />
    <input id="the-text" type="text" name="q" autocomplete="off" autofocus />
    <button id="submit">Search</button>
</form>

JavaScript:

let search = document.getElementById('submit')
search.addEventListener("click", searchFunction);

function searchFunction() {
let searchText = document.getElementById('the-text').value;
window.open('https://www.google.com/search?q=' searchText)
window.open('https://www.bing.com/search?q=' searchText)
}

Unfortunately, browsers usually block 2 or more tabs opening at the same time. So, you can allow popups, and it will search on both Google & Bing, if popups are blocked, it will only show google's search result and Block Bing