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

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 :intello:


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>



En pratique



Cette page a été vue 2322 fois