Question

我有一个页面显示来自不同邮政编码的几个日期。我有一个表单和每行的提交按钮，并希望使用jquery序列化每个行的信息，并将ajax请求发送到另一个页面。到目前为止，ajax请求有效，但表单上的信息显示为“未定义”。这就是我到目前为止所做的：

    <script>
$(document).ready(function(){   
    $('[name="Submit"]').click(function() {
        var $this = $(this);
        var tzip = $this.find('input.zip').val();
        alert (tzip);
        var zip = 'zip=' + $(this).prev('input').attr('zip').val();
        var dates = '&Date1=' + $(this).parent('form').find('input[name="Date1"]').val() + '&Date2=' + $(this).parent('form').find('input[name="Date2"]').val() + 'Date3=' + $(this).parent('form').find('input[name="Date3"]').val() + '&Date4=' + $(this).parent('form').find('input[name="Date4"]').val() + 'Date5=' + $(this).parent('form').find('input[name="Date5"]').val() + '&Date6=' + $(this).parent('form').find('input[name="Date6"]').val();
        $.ajax({
            url: 'updateZipcodes.php?',
            data: zip + dates,
            dataType: 'html',
            cache: false,
            type: 'GET',
            success: function(response) {
                successCallback(response);
            }
        });
        function successCallback(responseObj){
            //do something like read the response and show data 
            $('#ZipsResult').html(responseObj);
        }
    });
});
</script><table><tr>
    <th>Zipcode</th><th>Date 1</th><th>Date 2</th><th>Date 3</th><th>Date 4</th><th>Date 5</th><th>Date 6</th><th></th>
    </tr>
    <tr>
            <form id="form" name="form" >
            <th><b>20715</b><input name="zip" id="zip" type="hidden" value="20715" /></th>
            <td><input name='Date1' id='Date1' type='text' value='11-24-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date2' id='Date2' type='text' value='11-26-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date3' id='Date3' type='text' value='11-29-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date4' id='Date4' type='text' value='11-30-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date5' id='Date5' type='text' value='12-26-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date6' id='Date6' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Submit' type='button' value='Submit' /></td>
            </form>
            </tr>
            <tr>
            <form id="form" name="form" >
            <th><b>20716</b><input name="zip" id="zip" type="hidden" value="20716" /></th>
            <td><input name='Date1' id='Date1' type='text' value='11-29-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date2' id='Date2' type='text' value='12-01-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date3' id='Date3' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date4' id='Date4' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date5' id='Date5' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date6' id='Date6' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Submit' type='button' value='Submit' /></td>
            </form>
            </tr>
            <tr>
            <form id="form" name="form" >
            <th><b>20723</b><input name="zip" id="zip" type="hidden" value="20723" /></th>
            <td><input name='Date1' id='Date1' type='text' value='11-29-2014' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date2' id='Date2' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date3' id='Date3' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date4' id='Date4' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date5' id='Date5' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Date6' id='Date6' type='text' value='' maxlength='10' size='10' readonly="readonly" /></td>
            <td><input name='Submit' type='button' value='Submit' /></td>
            </form>
            </tr>
                    </table></br>
    <div id="ZipsResult"></div>

Answer 1

var $this = $(this);
var tzip = $this.find('input.zip').val();

这里的问题是$（this）在这里选择你的提交按钮而不是你的表格。因此$ this.find（＆＃39; input.zip＆＃39;）。val（）不会返回任何值，因为没有输入.zip＆＃39;在提交按钮中。要解决这个问题，你应该用这样的东西替换这一行，例如：

var tzip = $this.parent('form').find('input.zip').val();

同时始终确保您的ID是唯一的。

Jquery在其他几种形式中序列化和提交表单

1 个答案: