Не отправляется POST-запрос
Здравствуйте!
Изучаю jQuery по книге "Адам Фримен - jQuery для профессионалов (Expert's Voice) - 2013", Разбираю код реагирования на изменения значений формы: <!DOCTYPE html> <html> <head> <title>Example</title> <script src="jquery-1.7.js" type="text/javascript"></script> <script src="jquery.tmpl.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"/> <script type="text/javascript"> $(document).ready(function() { var data = [ { name: "Astor", product: "astor", stocklevel: "10", price: "2.99"}, { name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"}, { name: "Rose", product: "rose", stocklevel: "2", price: "4.99"}, { name: "Peony", product: "peony", stocklevel: "0", price: "1.50"}, { name: "Primula", product: "primula", stocklevel: "1", price: "3.12"}, { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"}, ]; var templResult = $('#flowerTmpl').tmpl(data); templResult.slice(0, 3).appendTo('#row1'); templResult.slice(3).appendTo("#row2"); $('input').focus(handleFormFocus).blur(handleFormFocus); function handleFormFocus(e) { var borderVal = e.type == "focus" ? "medium solid green" : ""; $(this).css("border", borderVal); } var total = $('#buttonDiv') .prepend("<div>Total Items: <span id=total>0</span></div>") .css({clear: "both", padding: "5px"}); $('<div id=bbox />').appendTo("body").append(total).css("clear: left"); $('input').change(function(e) { var total = 0; $('input').each(function(index, elem) { total += Number($(elem).val()); }); $('#total').text(total); }); }); </script> <script id="flowerTmpl" type="text/x-jquery-tmpl"> <div class="dcell"> <img src="${product}.png"/> <label for="${product}">${name}: </label> <input name="${product}" value="0" required /> </div> </script> </head> <body> <h1>Jacqui's Flower Shop</h1> <form method="post" action="http://node.jacquisflowershop.com/order"> <div id="oblock"> <div class="dtable"> <div id="row1" class="drow"> </div> <div id="row2"class="drow"> </div> </div> </div> <div id="buttonDiv"><button type="submit">Place Order</button></div> </form> </body> </html> Если нажать на submit, то ничего не происходет. Если закомментировать код var total = $('#buttonDiv') .prepend("<div>Total Items: <span id=total>0</span></div>") .css({clear: "both", padding: "5px"}); $('<div id=bbox />').appendTo("body").append(total).css("clear: left"); $('input').change(function(e) { var total = 0; $('input').each(function(index, elem) { total += Number($(elem).val()); }); $('#total').text(total); }); то отправка происходит. Подскажите пожалуйста, в чем может быть проблема? |
Проблему решил: суть проблемы в том, что div id=bbox захватывает кнопку, в результе submit находится вне формы. Нужно поменять appendTo("body") на appendTo("form"):
$('<div id=bbox />').appendTo("body").append(total).css("clear: left"); на $('<div id=bbox />').appendTo("form").append(total).css("clear: left"); |
Цитата:
|
Часовой пояс GMT +3, время: 07:19. |