Jquery submit radio button without reload and

Question

So because my experience with jquery is zero i have no idea how to run my mysql script when the form is submitted without reloading a page? in short form radio button submit --> form sended --> query without reload

My script:

<form id="myForm" method="get">
    <div class="row">
        <div class="span4 info1">
            <section class="widget">
                <img src="../bootstrap/img/thumb/0.jpg" width="auto" height="auto">
                <?php if ($selectedBg == '0') {
                    echo '<h2>Current one</h2>';
                } ?>

                <input type="radio" name="options[]" value="0" onclick="document.getElementById('myForm').submit();"/>
                Choose Background
            </section>
        </div>
    </div>

    <?php
        $checked = $_GET['options'];
        for ($i = 0; $i < count($checked); $i++) {
            $sql = 'UPDATE blog_users SET background = '.$checked[$i].' WHERE username=?';
            $bg = $db->prepare($sql);
            $bg->execute(array($session->username));
        } 
    ?>      
</form>

So my question is how do I submit my form without reloading the page + running my query?

You need to use AJAX for this. This might be of help to you: http://stackoverflow.com/questions/15814369/getting-radio-button-value-and-sending-through-ajax-to-php — Michael Brook, Aug 23 '13 at 18:27

score 1 · Accepted Answer · answered Aug 23 '13 at 18:35

you will need to create a separate page that accepts the form data, and use jQuery's ajax functions to asynchronously submit the data.

Here is some pseudocode to show how you would accomplish this:

$('form').on('click', 'input:radio', function() {
    $.get('NEW_PAGE_URL' + $(this).serialize(), function(data) {
        // this function is the success function. 
        // your page should return some kind of information to let this function 
        // know that the submission was successful on the server side as well. 
        // This was you can manipulate the DOM to let the user know the submission 
        // was successful.
    });
});

score 0 · Answer 2 · edited May 23 '17 at 10:25

What you are describing is a technique that is called AJAX. It is a technique that is not specific to jQuery, php, or mysql. With that said, it is a common task for JQuery to help assist with.

You may want to check this post out: https://stackoverflow.com/a/5004276/1397590

Or if you're looking for more of a tutorial, then take a peak here: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Either way, there's lots of resources out there to get started learning about AJAX.

Jquery submit radio button without reload and

2 Answers2