使用外部提交按钮无法正常工作提交两种不同的表单 [英] Submitting two different forms with an external Submit button not working properly

问题描述

我正在创建一个加入购物车计划，并且需要将产品的属性（颜色，尺寸）添加到购物车，并且我需要将这两个表单一起提交。我不知道我在哪里出错了我已经创建了脚本，但它仅使用jquery提交为 submit（）选择的第一个表单，而不是其他表单。 p>

以下是我的代码片段，这是 JSFIDDLE
$ b

$（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， ）; $（＃tipdivcontent）。delay（4000）.hide（200）; e.preventDefault（）;} else {if（！$ checkboxcolor.is（'：checked '））{$（'＃tipdivcontentcolor'）.css（display，block）; $（ ＃tipdivcontentcolor）延迟（4000）.hide（200）; e.preventDefault（）; } else {$ form.submit（）; $ formcolor.submit（）; }}}）;}）;

#tipdivcontent {border ：1px纯黑色;边距：0像素;背景颜色：白色;高度：50像素;宽度：102px;显示：无;位置：相对;背景色：红色;颜色：黄色; font-weight：bold;}＃tipdivcontentcolor {border：1px solid black;边距：0像素;背景颜色：白色; family：宋体;宽度：292px;显示：无;位置：绝对的;背景色：红色;颜色：黄色; font-weight：bold;}

< form action = method =POSTid =masterform> < table border =1cellspacing =0> < TR> < th colspan =4>尺寸< / th> < / TR> < TR> < TD> < label for =2.2> 2.2< / label> < / TD> < TD> < input class =roomselecttype =radioid =2.2name =sizevalue =twopointtwo> < / TD> < TD> < label for =2.4> 2.4< / label> < / TD> < TD> < input class =roomselecttype =radioid =2.4name =sizevalue =twopointfour> < / TD> < / TR> < TR> < TD> < label for =2.6> 2.6< / label> < / TD> < TD> < input class =roomselecttype =radioid =2.6name =sizevalue =twopointsix> < / TD> < TD> < label for =2.8> 2.8< / label> < / TD> < TD> < input class =roomselecttype =radioid =2.8name =sizevalue =twopointeight> < / TD> < / TR> < TR> < td colspan =3align =center> < label for =2.10> 2.10< / label> < / TD> < TD> < input class =roomselecttype =radioid =2.10name =sizevalue =twopointten> < / TD> < / TR> < / table>< / form>< div id =tipdivcontent>请选择大小。< / div>< input type =submitvalue =To Cartclass =cartorcheckoutbutton cart>< form action =method =POSTid =masterform> < table border =1cellpadding =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 =colorselectvalue ='white'> < /第> < th title ='Red'style ='background-color：red;'height = '15'width ='20'> < input type ='radio'name ='color'class =colorselectvalue ='red'> < /第> < th title ='Green'style ='background-color：green;'height = '15'width ='20'> < input type ='radio'name ='color'class =colorselectvalue ='green'> < /第> < th title ='Blue'style ='background-color：blue;'height = '15'width ='20'> < input type ='radio'name ='color'class =colorselectvalue ='blue'> < /第> < / TR> < / table>< / form>< div id =tipdivcontentcolor>请选择颜色< / div>

解决方案

您可以尝试将辅助表单中的颜色输入分配给主表单。只要在任何输入上使用< input form ='formID'...> ，就可以将该输入分配给另一个表单，而不管它在页面上的什么位置。

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< form id =masterForm> < input name =someFieldtype =textvalue =test value>< / form>< form id =anotherForm> <标签> < input name =colortype =radiovalue =blueform =masterForm>蓝色< / label> <标签> < input name =colortype =radiovalue =redform =masterForm>红色< / label>< / form><！ - 表单外的提交按钮 - > ; < button type =submitform =masterForm> Submit< / button>< p>< / p>  

如果上述选项（和附加片段）不适合您，请尝试将formData附加到相关字段。像这样（未经测试）：

  //当提交'master'表单时... 
 $（ （＃）{
use strict; 
 //停止默认操作
 e.preventDefault（）; 
 
 var submissionData = $（this）.serialize（）; 
 submissionData + =& color =+ $（＃slaveForm）。find（input [name ='color']： （）
 $ b $ do ... 
}）; 
  

I am creating a add to cart program and need to add product with its attribute(colors, size) to the cart and for that I need to submit both the forms together. I am not sure where am I going wrong here I have created the scripts but it submits only the first form selected for submit() using jquery but not the other form.

Given below is my code with Snippet and this is the 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>

解决方案

You could try assigning the color inputs from the secondary form to your 'master' form. Simply using <input form='formID' ...> on any input would assign that input to the other form regardless of where it is on the page.

// 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>

If the above option (and attached snippet) wouldn't work for you, try appending your formData with the relevant fields. Something like this (untested):

// When the 'master' form is submitted...
  $("#masterForm").on("submit", function(e) {
  "use strict";
  // Stop the default action
  e.preventDefault();

  var submissionData = $(this).serialize();
  submissionData += "&color=" + $("#slaveForm").find("input[name='color']:checked").val()

  // do stuff ...
});

这篇关于使用外部提交按钮无法正常工作提交两种不同的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！