Question

我遇到各种各样的问题，让我的表单正确地将变量传递给我的PHP文件。即使它确实通过或似乎最终文件似乎没有发送。我哪里错了？

这是我的联系表格：

<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>

我有一个.change()事件监听器，这样如果packages字段发生更改（比如说他们想要两个包），那么会显示两个字段以允许每个包添加更多信息：

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

然后我使用Ajax将数据发送到我的PHP文件：

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

问题似乎是在这个阶段，因为我似乎无法为打包发送正确的变量

我的PHP文件如下。

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

Packagedim似乎不像我期望的那样是一个数组也就是packagedims[0]='something', packagedims[1]='something else'。

Answer 1

在多个元素上使用相同的ID无效！

您应该省略以下ID：

$('.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>' );

应该改为：

$('.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>' );

然后，将选择器更改为：

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

Here is a demo

各种jQuery Ajax形成问题

1 个答案: