Need to autosubmit form on page loads

Question

i have a website with a jquery search form. I have the searchboxes in every page of the site indide the header. Once you enter the searchwords there it redirects you the the search.php What i want to do is to make the form submitted as soon as the page loads, because i send the data to the searchbox inside the search.php Example: in page 1 i enter something and click submit. In search.php loads and in the main search field i have somethis(what i entered before). But i have to click again the submit to see the results. Any idea how can i make the form autosubmit when im being redirected? So i can see the results instantly. Here's the code:

<form method="get" id="myForm" name="myForm" >
    <input type="text" name="search" id="search_box" value="<?php $_GET['q']; ?>" placeholder="Enter band, artist, name..." autofocus/>
    <input type="submit" value="Go"  />
    <br />
</form>

and the jquery:

<script type="text/javascript">
    $(function() {
        //-------------- Update Button-----------------
        $(".search_button").click(function() {
            var search_word = $("#search_box").val();
            var dataString = 'search_word='+ search_word;
            if(search_word==''){
            } else {
                $.ajax({
                    type: "GET",
                    url: "searchdata.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(html) {
                        document.getElementById("insert_search").innerHTML = ''; 
                        $("#flash").show(); 
                        $("#searchword").show();
                        $(".searchword").html(search_word);
                        $("#flash").html('<p style="text-align:center;">Loading Results...</p>');
                    },
                    success: function(html){    
                        $("#insert_search").show();
                        $("#insert_search").append(html);
                        $("#flash").hide();
                    }
                });
            }
            return false;
        });
        //---------------- Delete Button----------------
    });
</script>

make your php code output the initial search results.... then the jquery stuff update the search results after that — Patrick Evans, Jun 04 '13 at 18:27
Maybe you can use the $_GET in your backend so you dont have to submit — Ibu, Jun 04 '13 at 18:28

score 0 · Answer 1 · answered Jun 04 '13 at 18:27

0

$(function(){
    $('#myForm').trigger('submit');
});

When the page is ready you simply trigger the submit using jquery.

answered Jun 04 '13 at 18:27

Anthony Hatzopoulos

10,437
2
40
57

Jay Zus · Answer 2 · 2013-06-05T16:46:36.360

<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="" placeholder="Enter band, artist, name..." autofocus/>
<input id="button-submit" type="submit" value="Go"  />
</form>


    <script type="text/javascript">
    $(function() {
    function _myFunction () {
    var search_word = $("#search_box").val();
    var dataString = 'search_word='+ search_word;
    if(search_word==''){
    } else {
        $.ajax({
            type: "GET",
            url: "searchdata.php",
            data: dataString,
            cache: false,
            beforeSend: function(html) {
                document.getElementById("insert_search").innerHTML = ''; 
                $("#flash").show(); 
                $("#searchword").show();
                $(".searchword").html(search_word);
                $("#flash").html('<p style="text-align:center;">Loading Results...</p>');
            },
            success: function(html){    
                $("#insert_search").show();
                $("#insert_search").append(html);
                $("#flash").hide();
            }
        });
    }
    return false;
}
$("#button-submit").click(function(e) {
    e.preventDefault();
     _myFunction();
    return false;
   });
_myFunction(); //This is where the magic happens
});

</script>

By doing that, the page will trigger on loading the function that is used when you click on the button.

Could you please add more code so I can test too ? I also corrected some mistakes I made in my code. — Jay Zus, Jun 04 '13 at 22:10
There i have just added the rest of the code, the php code, remember that the problem is when i enter the searchword from another place of the site, for example from index, i enter the searchword and i submit and sends me to search.php and the searchword that i entered on index is inside the form of search.php, but i have to click submit again to see results, i want to load instantly when i do that — tomas lagro, Jun 04 '13 at 22:55
I still can't see the code you added. Do you have any error message in your JS console window ? Because I use the same trick in one of my website and it works fine. — Jay Zus, Jun 05 '13 at 13:22
theres a problem now, the page dont load the php, im gonna check your code — tomas lagro, Jun 05 '13 at 18:09

score 0 · Answer 3 · answered Jun 05 '13 at 07:06

$(function() {
$(".search_button").click(function() {
            var search_word = $("#search_box").val();
            var dataString = 'search_word='+ search_word;
            if(search_word==''){
            } else {
                $.ajax({
                    type: "GET",
                    url: "searchdata.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(html) {
                        document.getElementById("insert_search").innerHTML = ''; 
                        $("#flash").show(); 
                        $("#searchword").show();
                        $(".searchword").html(search_word);
                        $("#flash").html('<p style="text-align:center;">Loading Results...</p>');
                    },
                    success: function(html){    
                        $("#insert_search").show();
                        $("#insert_search").append(html);
                        $("#flash").hide();
                    }
                });
            }
            return false;
     });
});
$(document).ready(function(){
    $('#myForm').submit();
});

You can try this way.

Thanks for the help, but it still gives the same – tomas lagro Jun 05 '13 at 16:17 — tomas lagro, Jun 05 '13 at 16:17

Need to autosubmit form on page loads

3 Answers3