All kinds of jQuery Ajax form problems

I'm having all kinds of problems with getting my form to properly pass variables to my PHP file. Even if it does pass or seem to the final file doesn't seem to send. Where am I going wrong?

This is my contact form:

<form method="post">
    <div id="form_container">
        <div id="form_quote" action="">
            <input type="text" name="name" id="name" value="Name" title="Name"/>
            <input type="text" name="email" id="email" value="Email" title="Email"/>
            <input type="text" name="packages" id="packages" value="Packages" title="Packages" class="packages" />
            <!-- Package fields go here -->
            <input type="text" name="weight" id="weight" value="Total weight (kg)" title="Total weight (kg)" />
            <p class="ajaz"><input type="button" name="submit" id="submit" value="Request free callback" class="superbutton" /></p>
            <ul id="form_response"><li></li></ul>
        </div>
    </div>
</form>

I have a .change() event listener so that if the packages field changes (like say they want two packages) then two fields show up to allow more information to be added per package:

$('.packages').change(function() {
    // alert('Handler for .change() called.'+$(this).val());
    $('.app').remove();

    // Get number of packages
    var packageNum = $(this).val();

    // Make sure packages is more than 0 and no greater than 10.
    if (packageNum>0 && packageNum <= 10) {
        // Add the table lines
        var newContent = $("<p class='app'>Please enter the height x width x length for each of your packages, in cm. If you are unsure of any please use your best guess. eg. 15 x 10 x 20</p><table class='app'><thead></thead><tbody></tr>");
        $(".packages").after(newContent);

        var current_number_of_rows = $('.app tbody tr').length;
        var number_of_requested_rows = packageNum;

        if(number_of_requested_rows <= 10 && number_of_requested_rows > 0){
            if(number_of_requested_rows > current_number_of_rows){
                while(current_number_of_rows++ < number_of_requested_rows){
                    $('.app tbody').append( '<tr><td><span>Package '+ current_number_of_rows +'</span>: <input type="text" name="packagedims[' + current_number_of_rows + ']" value="Dimensions" id="packagedims" title="Package '+ current_number_of_rows +'" /></td></tr>' );
                }
            }
            else{
                while(current_number_of_rows > number_of_requested_rows){
                    $('.app tbody tr').eq($('.app tbody tr').length - 1).remove();
                }
            }
        }
        $('.packages').append('</tr></tbody></table>');
    }
    else {
        alert('You can only choose a value from 1 to 10');
        $('.packages').val('Packages');
    }
});

Then I use Ajax to send the data to my PHP file:

jQuery('#form_quote input#submit').click(function() {
    jQuery('#form_quote p.ajaz').append('<img src="css/img/ajax-loader.gif" class="loaderIcon" alt="Loading..." />');

    var name = $('input#name').val();
    var email = $('input#email').val();
    var packages = $('input#packages').val();
    var packagedims = $('input#packagedims').serialize();
    var weight = $('input#weight').val();

    alert(packagedims + '&name=' + name + '&email=' + email + '&packages=' + packages +  '&weight=' + weight);

    jQuery.ajax({
        type: 'post',
        url: 'sendquote.php',

        // Serialize the form and post it to sendquote.php.
        data: 'name=' + name + '&email=' + email + '&packages=' + packages + /*'&packagedims=' +*/ packagedims + '&weight=' + weight,

        success: function(results) {
            jQuery('#form_quote img.loaderIcon').fadeOut(5000);
            jQuery('ul#form_response').html(results);
        }
    }); // end ajax
});

The problem seems to be at this stage because I just can't seem to get the right variable sent for packagedims

My PHP file is as follows.

$name = trim($_POST['name']);
$email = $_POST['email'];
$packages = $_POST['packages'];
$packagedims = $_POST['packagedims'];
$weight = $_POST['weight'];

Packagedims just doesn't seem to be an array as I would expect, that is, packagedims开发者_StackOverflow社区[0]='something', packagedims[1]='something else'.

Using the same ID on multiple elements is invalid!

You should omit the id from:

$('.app tbody').append( '<tr><td><span>Package '+ current_number_of_rows +'</span>: <input type="text" name="packagedims[' + current_number_of_rows + ']" value="Dimensions" id="packagedims" title="Package '+ current_number_of_rows +'" /></td></tr>' );

It should be changed to:

$('.app tbody').append( '<tr><td><span>Package '+ current_number_of_rows +'</span>: <input type="text" name="packagedims[' + current_number_of_rows + ']" value="Dimensions" title="Package '+ current_number_of_rows +'" /></td></tr>' );

Then, change the selector to this:

var packagedims = $('input[name^="packagedims"]').serialize();

Here is a demo