Question

这是我的代码。我希望jQuery代码传递选择框值，以便在选择时在特定网址上发送而不刷新页面，以便我可以在特定页面的查询中使用该值。

＆＃13;

<?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);
    }
    });

	
    $( "#tabs" ).tabs({
      collapsible: true
    });
	  });

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>

＆＃13;

Answer 1

您可以使用AJAX序列化表单并发出POST请求：

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

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

    return false;
}

Answer 2

尝试将Ajax与jquery一起使用。以下是一些文档：http://api.jquery.com/jquery.ajax/

请注意，不再支持mysql。尝试使用PDO或mysqli代替

如何通过jquery

2 个答案: