Question

我正在使用twitter bootstrap的v3模式窗口来显示星级评分表和textarea框表格以查看食谱。

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

我知道它不起作用，因为我得到一个php错误，说有一个未定义的索引，所以我检查了什么params被发布并注意到它点击提交时从星级评级表中发布了参数评论textarea体形的按钮。

我做了一个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 -->

Answer 1

我认为你的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()
    });
}

在jquery ajax发布时发布错误的表单值

1 个答案: