Scripts et Programmation

HTML + JS : Un faux formulaire pour rediriger une recherche à l'extérieur

Table des matières

Contexte
Le code
En pratique

Contexte

J'avais besoin d'un petit formulaire qui me redirige une recherche sur un site extérieur (duckduckgo), en ajoutant du texte à celui saisi par l'utilisateur.
Je ne voulais pas utiliser jQuery (juste Javascript)
Afin de garder le site sous le coude, je veux que le résultat s'ouvre dans une nouvelle fenêtre (ou onglet).
Et surtout que la page contenant le formulaire ne se recharge pas !!

Après 1h de bidouilles (il faut le dire) je suis arrivé à un truc sympa que je m'empresse de vous partager

Le code

HTML

Code HTML :

<form width="400px" action="javascript:void(0);">
    <input style="text-align:center;" type="text" id="q" name="q"  /> <input type="submit" onclick="submitform();" value=" " style="background: transparent url(/search/search_mini.png) no-repeat right bottom; border: none; width: 18px;"/>
</form>

JS

Code JAVASCRIPT :

function submitform()
{
    var site = "https://duckduckgo.com/?q=site:www.linuxtricks.fr ";
    var query = document.getElementById("q").value;
    var win = window.open(site.concat(query), '_blank');
    win.focus();
}

Le 2en1

Code HTML :

<form width="400px" action="javascript:void(0);">
    <input style="text-align:center;" type="text" id="q" name="q"  /> <input type="submit" onclick="submitform();" value=" " style="background: transparent url(/search/search_mini.png) no-repeat right bottom; border: none; width: 18px;"/>
</form>
 
<script type="text/javascript">
function submitform()
{
    var site = "https://duckduckgo.com/?q=site:www.linuxtricks.fr ";
    var query = document.getElementById("q").value;
    var win = window.open(site.concat(query), '_blank');
    win.focus();
}
 
</script>

Contexte

Le code

HTML

JS

Le 2en1

En pratique