CODEWITHSUNDEEP
ajaxformssubmitrefresh
MomasVII
MomasVII

Reputation: 5071

Submitting without refresh AJAX

Ok I have seen a lot about submitting a form without refresh and I feel there are a couple of ways to do this with submit or just using a button (Difference/best?) and I am just still running into pproblems despite searching through countless posts. So:

$(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        var privacy = $('input:radio[name=privacy]:checked').val();
        var invites = $('input:radio[name=invites]:checked').val();
        var posts = $('input:radio[name=posts]:checked').val();
        var dataString = 'privacy=' + privacy + '&invites=' + invites + '&posts=' + posts;
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "editOptions.php",
            data: dataString,
            success: function() {
                $('#admin').append("<div id='message'</div>");
                $('#message').html("Changes Saved");
            }
        });
        return false;
    });
});

and:

<form action="" method="post" name="editOptions">

Privacy
<input type="radio" name="privacy" id="privacy" value="public" 
<?php if($privacy == "public") { ?>checked="checked"<?php } ?>> 
Public

<input type="radio" name="privacy" id="privacy" value="private" 
<?php if($privacy == "private") { ?>checked="checked"<?php } ?>> 
Private

Invites
<input type="radio" name="invites" id="invites" value="adminonly" 
<?php if($invite == "adminonly") { ?>checked="checked"<?php } ?>> 
Admin Only

<input type="radio" name="invites" id="invites" value="everyone" 
<?php if($invite == "everyone") { ?>checked="checked"<?php } ?>> 
Everyone

Posts
<input type="radio" name="posts" id="posts" value="adminonly" 
<?php if($post == "adminonly") { ?>checked="checked"<?php } ?>> 
Admin Only

<input type="radio" name="posts" id="posts" value="everyone" 
<?php if($post == "everyone") { ?>checked="checked"<?php } ?>> 
Everyone

<button>Save Changes</button>
</form>

So just a form with 3 sets of 2 radio buttons. So I think the problem is going through many tutorials and posts I have a combination of what to do when you either 'submit' or when you click a 'button' but maybe others can see something easy I missed.

ty

EDIT editOptions just in case

<?php 
include 'config.php';

$privacyX = $_POST['privacy'];
$invitesX = $_POST['invites'];
$postsX = $_POST['posts'];
$groupAd = $_POST['groupName'];

$sql = "UPDATE `options` SET privacy='$privacyX', invite='$invitesX', post='$postsX' WHERE adminGroup = '$groupAd'";

if(!mysql_query($sql, $link))
{
    die('Error: ' . mysql_error()); 
}

mysql_close($link);

?>

Upvotes: 0

Views: 510

Answers (2)

MomasVII
MomasVII

Reputation: 5071

All sorted. It was a problem with editOptions and not passing the right variable names. :P ty

Upvotes: 0

Anam
Anam

Reputation: 12169

Full working example:

     <script type="text/javascript">
        $(function() {
            $('.button1').click(function(e) {
                e.preventDefault();
                var privacy = $('input:radio[name=privacy]:checked').val();
                var invites = $('input:radio[name=invites]:checked').val();
                var posts = $('input:radio[name=posts]:checked').val();

                console.log(privacy, invites, posts);
                //return;
                //alert(dataString);
                $.ajax({
                    type: "POST",
                    url: "editOptions.php",
                    data: {privacy: privacy, invites: invites, posts: posts},
                    success: function(result) {
                        $('#admin').append("<div id='message'>Changes Saved</div>");
                        console.log(result);
                        console.log("success");
                    }
                });
            });
        });
     </script>
</head>
<body>
    <div id="admin">
    </div>
    <form action="" method="post" name="editOptions">

        Privacy
        <input type="radio" name="privacy" id="privacy" value="public" > 
        Public

        <input type="radio" name="privacy" id="privacy" value="private" > 
        Private

        Invites
        <input type="radio" name="invites" id="invites" value="adminonly" > 
        Admin Only

        <input type="radio" name="invites" id="invites" value="everyone" > 
        Everyone

        Posts
        <input type="radio" name="posts" id="posts" value="adminonly" > 
        Admin Only

        <input type="radio" name="posts" id="posts" value="everyone" > 
        Everyone

        <button class="button1">Save Changes</button>
    </form>


</body>

Upvotes: 1

Related Questions