Carter Roeser Carter Roeser - 10 days ago 7
Ajax Question

Multi Scenario Form Action (Background, Multiple Actions, Timer)

I have tried using methods that may work for one scenario or another in AJAX, Javascript, JQuery and PHP, but I have not found a way to achieve the correct results for my scenarios.

I have a search box text input field as :

<input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>


There are three scenarios in which different actions need to occur:


  1. On page load, send the input to
    search-api.php
    as
    POST
    every 5 seconds in the background, and get results back from the action and set the response equal to
    $url
    . (Must not only show response for first submit, but also for all changes in input when updated every 5 seconds).

  2. When enter button is pressed, send the input as
    GET
    to https://externalaction.com/search in foreground.

  3. When button
    <input class="button default" name="BtnX" type="submit" value="Search">
    is pressed, send the input as
    GET
    to https://externalaction.com/search in foreground.



I know this is complicated but I have yet to find a solution that works for all three scenarios without interfering with each other, and no one online seems to have any information or questions quite like this situation.

Thank you to anyone who has any help, tips, or answers / code!

Answer

This doesn't seem too complicated, although I'm not sure why you'd want to send search queries every 5 seconds instead of on keypress? In any case it should just be using $.post() and setTimeout.

<form action="https://externalaction.com/search" method="get">
    <input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>
    <input class="button default" name="BtnX" type="submit" value="Search">
</form>
<div id="results"></div>

<script>
$(function() {
    search();
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );

    setTimeout(search, 5000);
}
</script>

If you're interested in using keypress instead of every 5 seconds, it would be something like this for the JS:

<script>
$(function() {
    $('#field').on('keyup change', 'search');
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );
}
</script>

Although in this case you don't need a named function, you could just make the search() function the keypress callback.

You also mentioned wanting to set the AJAX response to $url, however that looks like a PHP variable, so you wouldn't be able to modify that if it's in the page with the form unless you reloaded it. That's easy enough to do if you wanted to programmatically do a redirect, but would get pretty tricky and into weird loops. So it would be better to know what $url is being used for in the page, and then use JS to replace it with the value from the callback the same way I'm replacing the HTML of the results div in my current example.

The search form field will submit automatically on an 'enter' keypress as long as it has focus (i.e. after someone is finished typing in it and hits 'enter'), but if you want to send results whenever enter is pressed regardless of which input has focus this answer will help.

As an aside, typically you don't want to recursively keep searching with a timeout without some kind of end condition which clears the timeout, as in some cases it can lead to memory issues.

Comments