Question

I’ve been problem solving this for the past few hours and frustratingly can’t find a solution. I’m trying to submit a form using the JQuery .ajax() function but it’s not submitting, heres the code, any suggestions would be much appreciated:

 JS:

$(document).ready(function() {

    var livelistURL = "/scripts/livelist.php?guestlist=<?php echo $_GET['guestlist']; ?>";
    var names = '';
    var dot = '.';
    
    $("#livelist").load(livelistURL);
    $("input#name").select().focus();

    $("#addname").submit(function(event){
        event.preventDefault();
        
        $("input#name").blur();
        $('#working').show();
        $('#event-box').fadeTo('fast', 0.5);  
        
        var guestlist = '<?php echo $_GET['guestlist']; ?>';
        var name = $('input#name');
        var by = '<?php echo $email; ?>';
        
        var data = 'name=' + name.val() + '&guestlist=' + guestlist.val() + '&by=' + by.val();  
    
        $("input#name").blur();

        $.ajax({
            url: "/scripts/addname.php",
            type: "post",
            data: data,
            success: function(){
                var value = $("input#name").val().toUpperCase();;
                $("span.success").text(value);
                
                if (names == '') {
                    names = value;
                }
                else {
                    names = ' ' + value + ', ' + names;
                    $("span#dot").text(dot);
                }
                
                $("span#name1").text(names);
                $('#working').fadeOut('fast');
                $('#success').fadeIn('fast');
                $('#added-names').fadeIn('fast');
                $('#success').delay('600').fadeOut('fast');
                $('#event-box').delay('600').fadeTo('fast', 1.0);
            },
            error: function(){
                $('#working').fadeOut('fast');
                $('#error').fadeIn('fast');
                $('#error').delay('600').fadeOut('fast');
            },
            complete: function(){
                $("input#name").val('');
                $("input#name").select().focus();
            }
        });
    });
}); // end

Form HTML:

<form id="addname">
            <input id="name" name="name" class="tagcheck" style="z-index: 1000;" minlength="5" maxlength="60" placeholder="Add Name" />
        </form>

Answer 1

Install Firebug, and check the console. This helps you debug your Ajax requests – I use it EXTENSIVELY.

Try removing all your other Javascript stuff, strip it down until it works. Also, there may be an error in addname.php