Javascript to Post Inside a Div

Question

I have this code bellow and I need it to make a post inside a div.

<script type="text/javascript">
$(function() {
    $(".loader").click(function(event) {
        event.preventDefault(); // stop the link loading the URL in href
        $('#content').load($(this).attr('href'));
    }); 
});
</script>



<form method="post">

some random inputs and checkbox's goes here

<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">

</form>

When submiting, the javascript is sucessfully loading the consulta_produto.php inside a div called "content", however, I need to adapt the script to make it possible to POST too

Someone at other topic said to Use $(".loader").parent("form").submit instead of $(".loader").click, however i didnt understood what he meant, I tried changing it in a lot of different ways, but none of them worked

I researched a few topics about how to post with javascript, but I could adapt none of them to keep the function to load consulta_produto.php inside the div "content"

So I wonder, how can I adapt my javascript to keep loading consulta_produto.php inside content div while posting the data from some inputs and check boxs?

Answer 1

First of all, you need to either:

1. Place all of your <script> code after the relevant HTML has been loaded, OR
2. Wrap it all in a $(document).ready(function() {...}); to achieve the same effect

Then, instead of executing code at your inputs click() event, you can do it upon your forms submit() event. (This is basically what you mentioned someone told you in another topic). I changed your submit input to a submit button, doesn't really matter.

So, instead of loading the href attribute, you load the action attribute of the form itself into the div.

Of course you want to submit actual data along with the form - no problem. You just use an AJAX method. This is in order to stop the page from reloading.

First you do the preventDefault() to stop the usual page reload. Then you initialize the $.ajax() method.

• Data: The first parameter 'data' contains all the form data to pass along.
• Type: Represents the type of request (POST)
• URL: This is the form action (/consulta/consulta_produto.php).
• Success: Finally, the 'success' parameter contains a function which loads it all into the specified <div>.

AJAX is essential when avoiding page reloads in PHP, play around with it!

    <script type="text/javascript">
    $(document).ready(function() {
        $("#form").submit(function(event) {
            event.preventDefault();

        $.ajax({ //AJAX Method
            data: $(this).serialize(), //Gets data from form
            type: $(this).attr('method'), //Gets the method, in your case POST
            url: $(this).attr('action'), //Gets the form action
            success: function(r) {
                $('#content').html(r); //Loads data into div
            }
        }); //End of AJAX Method

        }); //End of form submit event
    });
    </script>

And here is your HTML:

    <div id="content" style="width:100%; height:500px; ">
    </div>

    <form id="form" action="/consulta/consulta_produto.php" method="post">

        some random inputs and checkbox's goes here
        <button type="submit">Consultar<button>
    </form>