使用AJAX发送隐藏的输入数据

Question

I am using AJAX live search plugin.
It passes input data to backend-search.php
backend-search.php selects data from the database and return to the search page.
Now I want to pass one hidden input value with the search query.

Hidden Input

 <input type="hidden" name="group" value="<?php echo $grp_id; ?>" /> 

Following is my html in search.php

 <div class="search-box"> <input type="text" autocomplete="off" placeholder="Search..." /> <div class="result"></div> 

Javascript

 <script type="text/javascript"> $(document).ready(function(){ $('.search-box input[type="text"]').on("keyup input", function(){ /* Get input value on change */ var term = $(this).val(); var resultDropdown = $(this).siblings(".result"); if(term.length){ $.get("backend-search.php", {query: term}).done(function(data){ // Display the returned data in browser resultDropdown.html(data); }); } else{ resultDropdown.empty(); } }); // Set search input value on click of result item $(document).on("click", ".result p", function(){ $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); $(this).parent(".result").empty(); }); }); </script> 

How do I send the data of the hidden input field with above js?

Answer 1

You could use $.post instead of $.get like this:

$.post( "backend-search.php?query="+ term, { hidden_key: "hidden_value"})
.done(function(data) {
    alert( "Data Loaded: " + data );
});

So, customizing it for your code,

if(term.length) {
    // get value of hidden field
    var hidden_value = $('[name="group"]').value(); 
    // make a post request, but also pass query params 
    $.post("backend-search.php?query=" + term, { group: hidden_value})
       .done(function(data){
           // Display the returned data in browser
           resultDropdown.html(data);
        });
    }

Here, everything after the ? mark is passed as a query string (ie via get method) whereas the hidden field is passed by the Post method. In your Php script, use print_r($_REQUEST) to verify that you get the 2 parameters as desired.

Also, you should encode URI parameters like this encodeURIComponent(term) to make sure your javascript does not break if the user enters special characters