Я создаю программу для добавления в корзину и вам нужно добавить продукт с его атрибутом (цветами, размером) в корзину, и для этого мне нужно представить обе формы вместе. Я не уверен, где я ошибся здесь, я создал сценарии, но он представляет только первую форму, выбранную для submit() используя jquery, но не другую форму.
Ниже приведен мой код со Snippet, и это JSFIDDLE
$(document).ready(function (){ $('#cart').click(function (e1) { var $form = $('#masterform'); var $formcolor = $('#colorform'); var $checkbox = $('.roomselect'); var $checkboxcolor = $('.colorselect'); if (!$checkbox.is(':checked')) { $('#tipdivcontent').css("display", "block"); $("#tipdivcontent").delay(4000).hide(200); e.preventDefault(); } else { if (!$checkboxcolor.is(':checked')) { $('#tipdivcontentcolor').css("display", "block"); $("#tipdivcontentcolor").delay(4000).hide(200); e.preventDefault(); } else { $form.submit(); $formcolor.submit(); } } }); });
#tipdivcontent { border:1px solid black; margin-top:0px; background-color:white; height:50px; width:102px; display:none; position:relative; background-color:red; color:yellow; font-weight:bold; } #tipdivcontentcolor { border:1px solid black; margin-top:0px; background-color:white; height:18px; width:292px; display:none; position:absolute; background-color:red; color:yellow; font-weight:bold; }
<form action="" method="POST" id="masterform"> <table border="1" cellspacing="0"> <tr> <th colspan="4">Sizes</th> </tr> <tr> <td> <label for="2.2">2.2</label> </td> <td> <input class="roomselect" type="radio" id="2.2" name="size" value="twopointtwo"> </td> <td> <label for="2.4">2.4</label> </td> <td> <input class="roomselect" type="radio" id="2.4" name="size" value="twopointfour"> </td> </tr> <tr> <td> <label for="2.6">2.6</label> </td> <td> <input class="roomselect" type="radio" id="2.6" name="size" value="twopointsix"> </td> <td> <label for="2.8">2.8</label> </td> <td> <input class="roomselect" type="radio" id="2.8" name="size" value="twopointeight"> </td> </tr> <tr> <td colspan="3" align="center"> <label for="2.10">2.10</label> </td> <td> <input class="roomselect" type="radio" id="2.10" name="size" value="twopointten"> </td> </tr> </table> </form> <div id="tipdivcontent">Please Select Size.</div> <input type="submit" value="To Cart" class="cartorcheckoutbutton" id="cart"> <form action="" method="POST" id="masterform"> <table border="1" cellpadding="2"> <tr> <th colspan="8">COLORS</th> </tr> <tr> <th title='White' style='background-color:white;' height='15' width='20'> <input type='radio' name='color' class="colorselect" value='white'> </th> <th title='Red' style='background-color:red;' height='15' width='20'> <input type='radio' name='color' class="colorselect" value='red'> </th> <th title='Green' style='background-color:green;' height='15' width='20'> <input type='radio' name='color' class="colorselect" value='green'> </th> <th title='Blue' style='background-color:blue;' height='15' width='20'> <input type='radio' name='color' class="colorselect" value='blue'> </th> </tr> </table> </form> <div id="tipdivcontentcolor">Please Select Color.</div>
Вы можете попробовать назначить цветовые входы из вторичной формы в вашу «основную» форму. Просто используя <input form='formID' ...> на любом входе будет присваивать этот вход другой форме независимо от того, где она находится на странице.
// When the 'master' form is submitted... $("#masterForm").on("submit", function(e) { "use strict"; // Stop the default action e.preventDefault(); if ($("input[type='radio']:checked").length === 0) { alert("You must check at least one color option."); return false; } // *for logging* // write the contents of the submitted data $("p").html("submitted data: " + $(this).serialize()); console.log("submitted data: " + $(this).serialize()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="masterForm"> <input name="someField" type="text" value="test value"> </form> <form id="anotherForm"> <label> <input name="color" type="radio" value="blue" form="masterForm">Blue </label> <label> <input name="color" type="radio" value="red" form="masterForm">Red </label> </form> <!-- Submit button outside of the form --> <button type="submit" form="masterForm">Submit</button> <p></p>
Форма представляет собой набор данных, которые должны быть отправлены через запрос POST (или GET). То, о чем вы просите, не имеет смысла. Если это возможно, вы все равно не должны этого делать. Независимо от того, какие проблемы с HTML и CSS заставляют вас разделить форму, я рекомендую вам поместить ее в качестве вашей реальной проблемы.
Отправка формы, если у нее нет атрибута target, указывающего на фрейм или другое окно, вызовет HTTP-запрос для создания новой страницы.
Одновременно отправка двух форм будет осуществляться по двум ссылкам. Это невозможно.
Вам нужно либо:
Если вы хотите отправить несколько форм как один, я могу предложить использовать объект formData (документация https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects )
var formData = new FormData(); formData.append("size", $('input[name=size]:checked').val()); formData.append("color", $('input[name=color]:checked').val()); var request = new XMLHttpRequest(); request.open("POST", "yourformtarget"); request.send(formData);
Возможное решение с javascript: вы можете добавить атрибут для поиска всех полей и отправить форму ajax:
<div id='masterform'> <input name='field_1' data-field-of='form1'> ... </div> ... <div id='colorform'> <input name='field_23' data-field-of='form1'> ... </div>
Код в javascript может быть примерно таким:
$(document).ready(function (){ $('#cart').click(function (e1) { var data = $('[data-field-of=form1]').serialize(); $.ajax({ url: "post/url", data: data, type: "POST", success: function(response){ /* handle success */ }, error: function(){ /* handle error */ } }); }); });