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

私の提案は、jqueryでajaxを使用することです。以下のコードが役立つ場合があります。

<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>ブラウザは、フォーム内のすべてが送信ボタンであると想定します。このようなボタンは、他の方法で動作させるための対策が講じられていない限り、フォームを送信します。

HTMLではなくjavascript/jQueryでイベントハンドラーをアタッチすることもお勧めします。

次のように、「+」ボタンと「-」ボタンから正しい動作を取得する必要があります。

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()DOM要素の自然な動作を抑制させるjQueryコマンドです。

于 2013-01-14T20:03:27.440 に答える