I have seen this question about using Low Search with Ajax but I still don't see how to integrate them.

Given this form

{exp:low_search:form collection="foo" search_mode="any" result_page="foo/search" form_id="search_form"}
    <label for="keywords">Keywords</label>
    <input type="search" name="keywords" id="keywords" />
    <button type="submit" id="search">Search</button>

and this Javascript code

    $("#search_form").on("submit", function(event){


        var aData = [],
            sSource = $(this).attr("action");

            'dataType': 'json',
            'type': 'POST',
            'url': sSource,
            'data': aData,
            'success': function (oAjaxData, sTextStatus)
            'error': function (jqXHR, sTextStatus, errorThrown)
            'complete': function (jqXHR, sTextStatus)

How do I get the encoded query string in the Javascript code?

2 Answers 2


The answer is to use the Low Search URL tag, which can produce a human-readable ACT URL with the keywords as a param.


  • Can you show me how this would work with AJAX? Jan 23, 2013 at 3:17
  • Where are you going to put this tag? Jan 24, 2013 at 8:08

@juddlyon is correct. I personally prefer to use the the jQuery form plugin which kind of negates the need for the url tag.

Here's the code I used:

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
$(function() {

    var $pageWrap = $('.wrap');

    var options = {
        target: $pageWrap,
        beforeSubmit:  showRequest,
        success: showResponse

    // Show loading message and submit form
    function showRequest(formData, jqForm, options) {
        $pageWrap.addClass("loading").prepend('<div class="search-load">Searching</div>');
        return true;

    function showResponse() {

    // bind to the form's submit event
    $('#filter').submit(function() {
        return false;


    <div class="wrap">
            <label for="keywords">Keywords</label>
            <input type="search" name="keywords" id="keywords" />
            <input type="submit" name="submit" value="Search" />

  • I don't think this works since you are serializing the field values. Low search doesn't use POST to get the field values. It gets them from the query string Jan 23, 2013 at 3:16
  • Hey @arvinsim I'm not sure why you would think it matters if the field values are encrypted or not? The results tag on the results page will un-encrypt the query string for you automatically. If it is an issue for whatever reason the url tag mentioned by juddlyon will resolve that. I can assure you the above code does work, I've tested it. Where exactly are you getting stuck?
    – Andy Homan
    Jan 23, 2013 at 6:39
  • Are you saying to put it in the ajax low search results page like "{exp:low_search:results query="{exp:low_search:url}" group_id="7" is_member_displayable="yes"}"? Jan 24, 2013 at 7:52
  • I tried using your serializeArray option and use my ajax code in the question to pass the values. The ajax call didn't return values as expected. It got redirected. I only found out later that it is because of ACT=31 Jan 24, 2013 at 8:13
  • Is this solution dependent on jQuery form plugin? If so, is there a solution that does not require that plugin(like what I did in my question) Jan 25, 2013 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.