Question

我有一个产品页面，其中包含以下格式：

<form id="ratingsForm" action='../resources/add_rating_to_product.php' method="POST">
    <input type="hidden" name="productID" value="<?php echo $productID; ?>" />
    <span class="rating">
        <input type="radio" class="rating-input"
                    id="rating-input-1-5" name="rating" value="5">
        <label for="rating-input-1-5" class="rating-star"></label>
        ...
        <input type="radio" class="rating-input"
                    id="rating-input-1-1" name="rating" value="1">
        <label for="rating-input-1-1" class="rating-star"></label>
    </span>
</form>

这只是一个使用单选按钮的简单星级评分表。我有一个javascript文件，一旦单击一个单选按钮就会提交表单

$(document).ready(function() { 
     $('input[name=rating]').change(function(){
          $('form').submit();
     });
});

我有另一个javascript文件，会在提交表单时触发，并使用ajax将其发布到正确的文件中。

$(document).ready( function() { 

    $("#ratingsForm").on("submit",function(e){ 
        e.preventDefault();
        $.ajax( {
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                alert('Thanks for rating');
            }
        });
    })
});

Add_rating_to_product只接收发布的信息并将其插入数据库。

我遇到的问题是，e.preventDefault没有阻止和重定向，而是将我重定向到我的搜索页面，显然没有理由。我已经检查了产品页面中的所有代码，没有什么可以将我重定向到那么问题是什么？如果没有preventDefault()，则会按预期重定向到add_rating_to_product.php。

Answer 1

您的页面上是否还有其他表格？如果您这样做，以下代码将提交页面上的所有表单：

$(document).ready(function() { 
     $('input[name=rating]').change(function(){
          $('form').submit();
     });
});

我认为执行以下操作会更安全：

$(document).ready(function() { 
     $('input[name=rating]').change(function(){
          $(this).closest('form').submit();
     });
});

Answer 2

成功函数调用后，您可以使用

 $(this).unbind('submit').submit()

，这将允许执行继续，就好像preventDefault被称为

一样

Answer 3

试试这个：

    $(document).ready(function() { 
     $('input[name=rating]').change(function(e){
     e.preventDefault();

       var prodID = $(this).find("input[name='productID']").val();

       $.ajax( {

        type: "POST",
        url: $(form#ratingsForm).attr( 'action' ),
        data: {$('form#ratingsForm').serialize(), prodID: prodID},
        success: function( response ) {
           alert('Thanks for rating');
        }          
       });
    });
 });

只需在一个函数中执行此操作即可初始化并在服务器端发送它们。我希望这有效。

preventDefault（）导致提交的表单重定向到另一个页面？

3 个答案: