Form GET using Select Option

by dimaslanjaka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form id="translate" action="https://translate.googleusercontent.com/translate_c?rurl=translate.google.com&sl=auto" method="GET" target="_blank">
  <p class="trans">
  <input class="input" type="text" name="u" placeholder="&#xf0ac;" />
<select name="tl" id="GTransLang" class="fa fa-caret-down'>
  <option value="" />Select Languanges...
  <option value="en" />English
  <option value="hi" />Hindi
  <option value="af" />Afrikaans
  <option value="sq" />Albanian
  <option value="ar" />Arabic
  <option value="hy" />Armenian
  <option value="az" />Azerbaijani
  <option value="eu" />Basque
  <option value="be" />Belarusian
  <option value="bn" />Bengali
  <option value="bg" />Bulgarian
  <option value="ca" />Catalan
  <option value="zh-CN" />Chinese
  <option value="hr" />Croatian
  <option value="cs" />Czech
  <option value="da" />Danish
  <option value="nl" />Dutch
  <option value="eo" />Esperanto
  <option value="et" />Estonian
  <option value="tl" />Filipino
  <option value="fi" />Finnish
  <option value="fr" />French
  <option value="gl" />Galician
  <option value="ka" />Georgian
  <option value="de" />German
  <option value="el" />Greek
  <option value="gu" />Gujarati
  <option value="ht" />Haitian Creole
  <option value="iw" />Hebrew
  <option value="id" />Indonesian
  <option value="hu" />Hungarian
  <option value="is" />Icelandic
  <option value="id" />Indonesian
  <option value="ga" />Irish
  <option value="it" />Italian
  <option value="ja" />Japanese
  <option value="kn" />Kannada
  <option value="ko" />Korean
  <option value="la" />Latin
  <option value="lv" />Latvian
  <option value="lt" />Lithuanian
  <option value="mk" />Macedonian
  <option value="ms" />Malay
  <option value="mt" />Maltese
  <option value="no" />Norwegian
  <option value="fa" />Persian
 ...

CSS

.trans input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.trans:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "URL";
}

form #translate {display:inline}
.w3-button{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}

JavaScript

$(document).ready(function() {
  $('#GTransLang').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});