jqueryajax发布时发布错误的表单值 - posting the wrong form values when jquery ajax posts

我正在使用twitter bootstrap的v3模式窗口来显示星级表和文本区域框来查看食谱。

当我在文本区域输入一个评论并选择提交按钮时，它会发布来自表单#评分表单的值，而不是来自表单#表单评论表单的值。如果我在模态中只点击星级，它会正常工作。我的星级显示在配方详细信息页面和模态窗口中（这是同一页面，因为模态html位于页面底部，只显示onclick）。我使用这行html:<div class="rateit" data-rateit-backingfld="#star-rating"></div>显示它。我在这里使用选择下拉示例：http://www.radioactivethinking.com/rateit/example/example.htm

我知道它不起作用，因为我收到了一个php错误，说有一个未定义的索引，所以我检查了发布的参数，并注意到当我点击评论文本区域正文表单的提交按钮时，它正在发布星级表中的参数。

我做了一个var_dump，它输出：

Array ( [return] => /recipes/view/baked-chipotle-chicken-flautas [secure_return] => [limit_by] => member [min] => 0 [max] => 5 [since] => [update_field] => rating [update_with] => )

所有这些指数都来自星级评定表，为什么它会公布另一个表的输入/值？我怀疑这与我的jQuery有关。感谢您的帮助！

<form id="rate" method="post" action="http://misn003.dev/en/?ACT=37"  >
    <div class='hiddenFields'>
    <input type="hidden" name="XID" value="6200c45a880fcb40dd881e249b8e5c6fc3234008" />
    <input type="hidden" name="entry_id" value="18" />
    <input type="hidden" name="entry_type" value="recipe" />
    <input type="hidden" name="site_id" value="1" />
    <input type="hidden" name="form_settings" value="YTo4OntzOjY6InJldHVybiI7czo0NDoiL3JlY2lwZXMvdmlldy9iYWtlZC1jaGlwb3RsZS1jaGlja2VuLWZsYXV0YXMiO3M6MTM6InNlY3VyZV9yZXR1cm4iO2I6MDtzOjg6ImxpbWl0X2J5IjtzOjY6Im1lbWJlciI7czozOiJtaW4iO3M6MToiMCI7czozOiJtYXgiO3M6MToiNSI7czo1OiJzaW5jZSI7YjowO3M6MTI6InVwZGF0ZV9maWVsZCI7czo2OiJyYXRpbmciO3M6MTE6InVwZGF0ZV93aXRoIjtiOjA7fQ==" />
    </div>
    <select id="star-rating">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5" selected>5</option>
    </select>
</form>
$('.rateit').click(function(event) {
    event.preventDefault(); 
    var value = $('#star-rating').val();
    var entry_id = $("input[name=entry_id]").val();
    var xid = $("input[name=XID]").val();
    var form_settings = $("input[name=form_settings]").val();
    var entry_type = $("input[name=entry_type]").val();
    var site_id = $("input[name=site_id]").val();
    $.ajax({
        url: $("#rate").attr("action"), //your server side script
        //data: { id: productID, value: value }, //our data
        data: { value: value, entry_id: entry_id, entry_type: entry_type, site_id: site_id, form_settings: form_settings, XID: xid },
        type: 'POST'
    });
});
$("#review-form").submit(function(event) 
{
    event.preventDefault(); 
    var review = $("textarea[name=review]").val();
    var form_settings = $("input[name=form_settings]").val();
    var xid = $("input[name=XID]").val();
    var entry_id = $("input[name=entry_id]").val();
    var entry_type = $("input[name=entry_type]").val();
    var site_id = $("input[name=site_id]").val();
     $.ajax({
         url: $("#review-form").attr("action"), //your server side script
         data: { review: review, entry_id: entry_id, entry_type: entry_type, site_id: site_id, form_settings: form_settings, XID: xid },
         type: 'POST',
         success: function (data) {
             $('#response').append('<li>' + data + '</li>');
             $('#review-form').hide();
             $('#review-form-response').html(data);
         },
         error: function (jxhr, msg, err) {
             $('#response').append('<li style="color:red">' + msg + '</li>');
         }
     });
});
<!-- Add Review Modal -->
<div class="modal fade" id="add-review" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">REVIEW THIS RECIPE</h4>
            </div>
            <div class="modal-body">
                    Rate Recipe: <div class="rateit" data-rateit-backingfld="#star-rating"></div>
                    <form id="review-form" method="post" action="http://misn003.dev/en/?ACT=38"  >
                        <div class='hiddenFields'>
                        <input type="hidden" name="XID" value="139c294e6381715e7ee8752753fd080bd4179162" />
                        <input type="hidden" name="entry_id" value="18" />
                        <input type="hidden" name="entry_type" value="recipe" />
                        <input type="hidden" name="site_id" value="1" />
                        <input type="hidden" name="form_settings" value="YTo1OntzOjY6ImFjdGl2ZSI7czoxOiIxIjtzOjY6InJldHVybiI7czo0NDoiL3JlY2lwZXMvdmlldy9iYWtlZC1jaGlwb3RsZS1jaGlja2VuLWZsYXV0YXMiO3M6MTM6InNlY3VyZV9yZXR1cm4iO2I6MDtzOjg6ImxpbWl0X2J5IjtzOjY6Im1lbWJlciI7czo1OiJzaW5jZSI7YjowO30=" />
                        </div>
                        <p>Enter Review<br />
                        <textarea name="review"></textarea></p>
                        <button id="submit-review">Add Review</button>
                    </form>
                    <div id="review-form-response"></div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我认为您的jQuery选择器不够具体。

// simply calling this will result in finding the value of the LAST occurrence of this tag.
var xid = $("input[name=XID]").val();
// this will target the specific form and pull the value from the tag within the form
var xid = $("form#rate input[name=XID]").val();
var xid = $("form#review-form input[name=XID]").val();
// when listening for a submit then you can simply use $(this)
$("#review-form").submit(function(event) 
{
    event.preventDefault();
    var xid = $(this).find('input[name=XID]');
    // rather than manually building the data: in your AJAX call you should simply serialize()
    $.ajax({
        type: 'POST',
        data: $(this).serialize()
    });
}