1

嗨，我有一个 Ajax 表单，需要在单击以下按钮时发布：

<div id="divaddtocartbtn">
     <input type="image" class="buynow" id="imgaddtocart" alt="Add to Cart" src="http://static.e-talemedia.net/content/images/odditiesaddtobasketbutton.png" />
</div>

但是我也有一个计数器如下：

<div class="box">
   <label for="qty">
   <abbr title="Quantity">Qty</abbr></label>
    <input id="qty" value="0" />
    <button id="down" onclick="modify_qty(-1)">-1</button>
    <button id="up" onclick="modify_qty(1)">+1</button>
</div>

http://www.codecademy.com/courses/a-simple-counter/0#!/exercises/0 - 简单计数器

但是，由于这是在 Ajax 表单中，当我尝试单击 + 和 - 来增加/减少计数器时，会发生 Ajax 帖子。我如何分离输入，以便 Ajax 帖子仅在添加到购物篮点击时发生？

我在想我需要将计数器放在 Ajax 表单之外，但我需要获取在 ajax 帖子中选择的数量。

Ajax.BeginForm("ThreeInOneBin2", new AjaxOptions() {
    HttpMethod = "POST"
});

请参阅下面的完整代码：

<div class="ThreeInOneBin2middle">
            <ul>
                <% if (Model.ProductNotFound)
                   { %>
                <!-- List the retailers as we have none in stock -->
                <%= Html.WidgetProductNotFoundList(Model) %>
                <% }
                   else
                   { %>
                <% using (Html.BeginForm())
                   {%>
                <%= Html.AntiForgeryToken() %>
                <%= Html.WidgetProductFoundListThreeStageBin2(Model)%>
                <div class="stepFour">
                    <% if (string.IsNullOrEmpty(ViewBag.Confirmation))
                       {
                           Ajax.BeginForm("ThreeInOneBin2", new AjaxOptions()
                                                          {

                                                              HttpMethod = "POST"
                                                          });
                           { %>
                    <img src="http://static.e-talemedia.net/content/images/DoveStep3message.png" alt="" />

                   <%-- This is the quantity--%>
                    <div class="box">
                        <label for="qty">
                            <abbr title="Quantity">
                                Qty</abbr></label>
                        <input id="qty" value="0" />
                        <button id="down" onclick="modify_qty(-1)">
                            -1</button>
                        <button id="up" onclick="modify_qty(1)">
                            +1</button>
                    </div>
                    <div id="uandp">
                        <p>
                            <input type="text" name="username" class="txtUsername" id="email" value="Username" />
                            <%= Html.ValidationMessage("Email", "Please enter a valid Email") %>
                        </p>
                        <p>
                            <input type="password" name="password" class="txtPassword" value="Password" />
                        </p>
                    </div>
                    <div id="rightaddtocart">
                        <div id="divaddtocartbtn">
                            <input type="image" class="buynow" id="imgaddtocart" alt="Add to Cart" src="http://static.e-talemedia.net/content/images/odditiesaddtobasketbutton.png" />
                        </div>
                    </div>
                    <% } %>
                    <% }
                       else
                       { %>
                    <p>
                        <%-- <%= ViewBag.Confirmation %>--%>
                        <img class="divAdded" src="http://static.e-talemedia.net/content/images/Basketmessage.png"
                            alt="Added to Basket" />
                    </p>
                    <% } %>
                </div>
                <% } %>
                <% } %>
            </ul>
        </div>
4

2 回答 2

1

我的建议是使用 ajax 和 jquery。下面的代码可能对您有所帮助。

<script>

$("#imgaddtocart").click(function(event) {

event.preventDefault(); 

var myForm = $(this).parent( 'form:first' );
var url = myForm.attr("action");

$.ajax({
    type: "POST",
    url: url,
    dataType: "json",
    data:myForm.serialize(),

    success:function(data)
    {
        alert(data.message);
    },
    error:function()
    {
        alert("error");
    }
}); 
/*End : Ajax*/


});
</script>
于 2013-01-14T11:23:54.693 回答
0

浏览器假定<button></button>表单中的任何内容都是提交按钮。这些按钮将提交表单，除非采取措施使它们表现不同。

在 javascript/jQuery 中而不是在 HTML 中附加事件处理程序也是一种很好的做法。

您应该从“+”和“-”按钮获得正确的行为，如下所示：

HTML：

<button id="down">-1</button>
<button id="up">+1</button>

javascript:

$("#down").on('click', function(event){
    event.preventDefault();
    modify_qty(-1);
});
$("#up").on('click', function(event){
    event.preventDefault();
    modify_qty(1);
});

event.preventDefault()是一个 jQuery 命令，它会导致 DOM 元素的自然动作被抑制。

于 2013-01-14T20:03:27.440 回答