Как передать выпадающее выбранное значение через jquery

Question

Вот мой код. Я хочу, чтобы код jQuery передавал значение поля выбора для отправки по определенному URL-адресу при выборе без обновления страницы, чтобы я мог использовать это значение в запросе на определенной странице.

<?php include "datalink.php"; ?> 
 
    <link rel="stylesheet" href="css/jquery-ui.css"> 
 
    <script src="js/jquery-1.10.2.js"></script> 
 
    <script src="js/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#q").autocomplete({ 
 
    source: "dropdown.php", 
 
    minLength: 2, 
 
    select: function(event,ui){ 
 
    $("#qid").val(ui.item.id); 
 
    } 
 
    }); 
 

 
\t 
 
    $("#tabs").tabs({ 
 
     collapsible: true 
 
    }); 
 
\t }); 
 

 
function validatebankForm() { 
 
    var x = document.getElementById("qid").value; 
 
    if(x == 'null') 
 
    { 
 
    alert('Please select an option from list'); 
 
    return false; 
 
    } 
 
} 
 
</script> 
 
<style> 
 
    .ui-autocomplete { 
 
    max-height: 100px; 
 
    overflow-y: auto; 
 
    /* prevent horizontal scrollbar */ 
 
    overflow-x: hidden; 
 
    text-align:left; 
 
    } 
 
    /* IE 6 doesn't support max-height 
 
    * we use height instead, but this forces the menu to always be this tall 
 
    */ 
 
    * html .ui-autocomplete { 
 
    height: 100px; 
 
    } 
 
    .ui-autocomplete.ui-widget { 
 
    font-size: 11px; 
 
    } 
 
    .ui-tabs .ui-tabs-nav li a {font-size:12px !important; font-weight:bold;} 
 
    #tabs-1{font-size: 12px !important;} 
 
     
 
    </style> 
 
    <div id="tabs"> 
 
<div id="tabs-1"> 
 
<p>  
 
<table width="100%" style="text-align:center;"><tr><td> 
 
<form action="search.php" onsubmit="return validateForm()"> 
 
    <?php 
 
    $query = "SELECT distinct area FROM goa"; 
 
    $result = mysql_query($query); 
 
    ?> 
 
    <select name="area" id="area" style="width:180px; max-width:90%;"> <?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> 
 
    <option name="area" id="area" value="<?php echo $line['area'];?>"> <?php echo $line['area'];?> </option> 
 
    <?php } ?> 
 
    </select> 
 

 
    <input type="text" onblur="if (this.value=='') this.value=this.defaultValue" onclick="if (this.defaultValue==this.value) this.value=''" name="q" id="q" placeholder="Search Company | Service | Product...." style="width:300px; max-width:90%;"> 
 
<input type="hidden" id="qid" name="qid" value="null"> 
 
<input type="submit" value="Search"> 
 
</form> 
 
</td></tr></table> 
 
</p> 
 
</div> 
 
</div>

Answer 1

Попробуйте использовать Ajax с jquery. Вот некоторая документация: http://api.jquery.com/jquery.ajax/

Обратите внимание, что mysql больше не поддерживается. Попробуйте использовать PDO или mysqli вместо

Answer 2

Вы можете сериализовать вы формируете и сделать запрос POST с помощью AJAX:

$("form").submit(function(event) { 
    var data = $(this).serialize(); 

    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: "url", 
     data: data, 
     success: function(data) { 
      //something   
     } 
    }); 

    return false; 
}