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: stackoverflow.com/questions/15814369/… — Michael Brook
– Michael Brook, Commented Aug 23, 2013 at 18:27

Neil S · Accepted Answer · 2013-08-23 18:35:30Z

1

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.
    });
});

answered Aug 23, 2013 at 18:35

Neil S

2,30421 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:25:28Z

0

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.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 23, 2013 at 18:32

JimTheDev

3,4793 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

Jquery submit radio button without reload and

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related