javascript - 三个表单一键提交-6ren

javascript - 三个表单一键提交

转载作者：行者123 更新时间：2023-11-29 05:18:04

下面给出的 JS Fiddle 是我创建的一个表单。我需要提交它并希望它在 MySQL 中输出，但是当我按下提交按钮时，它只提交最后一个表单，即 form2。我需要一个关于如何通过一个提交按钮提交 3 个表单的解决方案，我在表单中运行了一些 JavaScript。我什至tried this method但它不适合我。

我尝试在我的输入元素上使用 HTML5 form 属性，我什至尝试将我的表单更改为仅一种形式，甚至尝试通过在同一表单中正确关闭 td th 和 table 标签来结束事情但它导致了两个问题。首先是当我选中选择所有复选框时，它既没有选中也没有取消选择，其次是当我点击尺寸部分下的任何复选框时它没有出现数量文本框。

我的表单代码如下:

//select all checkbox script
checked = false;

function checkedAll(frm1) {
  var aa = document.getElementById('frm1');
  if (checked == false) {
    checked = true
  } else {
    checked = false
  }
  for (var i = 0; i < aa.elements.length; i++) {
    aa.elements[i].checked = checked;
  }
}




//only numeric term script
function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}

function isNumberKeyspecial(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}




//form reset
CZBanglesreset = function() {
  document.getElementById("form1").reset();
  document.form1.twopointtwosizeqty.disabled = true;
  document.form1.twopointfoursizeqty.disabled = true;
  document.form1.twopointsixsizeqty.disabled = true;
  document.form1.twopointeightsizeqty.disabled = true;
  document.form1.twopointtensizeqty.disabled = true;
  document.getElementById("frm1").reset();
  document.getElementById("form2").reset();
}




//oncheck quantity
function codename() {
  if (document.form1.twopointtwosize.checked) {
    document.form1.twopointtwosizeqty.disabled = false;
  } else {
    document.form1.twopointtwosizeqty.disabled = true;
  }

  if (document.form1.twopointfoursize.checked) {
    document.form1.twopointfoursizeqty.disabled = false;
  } else {
    document.form1.twopointfoursizeqty.disabled = true;
  }

  if (document.form1.twopointsixsize.checked) {
    document.form1.twopointsixsizeqty.disabled = false;
  } else {
    document.form1.twopointsixsizeqty.disabled = true;
  }

  if (document.form1.twopointeightsize.checked) {
    document.form1.twopointeightsizeqty.disabled = false;
  } else {
    document.form1.twopointeightsizeqty.disabled = true;
  }

  if (document.form1.twopointtensize.checked) {
    document.form1.twopointtensizeqty.disabled = false;
  } else {
    document.form1.twopointtensizeqty.disabled = true;
  }
}

body {
  background-image: url(../header_bg.jpg);
  background-size: cover;
}
textarea {
  resize: none;
}
input[type=checkbox] {
  cursor: pointer;
}
input[type=radio] {
  cursor: pointer;
}
b {
  cursor: default;
}
th {
  cursor: default;
}
td {
  cursor: default;
}
input[type=text] {
  cursor: cell;
}
textarea {
  cursor: cell;
}
input[type="reset"] {
  width: 10em;
  height: 2em;
  border: none;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
}
input[disabled] {
  background: transparent;
  border: none;
  cursor: default;
}
input:disabled::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
}
input:disabled:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
}
input:disabled::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
}
input:disabled:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}

<body>
  <form action="" method="POST" enctype="multipart/form-data" id="form1" name="form1">
    <table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
      <tr>
        <th>
          <p align="Left">Name : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
        </td>
      </tr>
      <tr>
        <th>
          <p align="Left">Description : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <table border="0">
            <textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
        </td>
        </table>
      </tr>
      <tr>
        <th>
          <p align="Left">Size &amp; Weight<sup><font color="red">*</font></sup>
          </p>
        </th>
        <th>
          <table border="1">
            <td title="Size 2.2">
              <label>
                <input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename()">2.2
                <br>
                <input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
              </label>
            </td>
            <td title="Size 2.4">
              <label>
                <input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename()">2.4
                <br>
                <input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
              </label>
            </td>
            <td title="Size 2.6">
              <label>
                <input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename()">2.6
                <br>
                <input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.8">
              <label>
                <input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename()">2.8
                <br>
                <input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.10">
              <label>
                <input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename()">2.10
                <br>
                <input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td style="border-style: none;">
              <input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
            </td>
        </th>
        </table>
      </tr>
      <tr>
        <th>
          <p align="Left">Color : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
  </form>
  <form id="frm1">
    <table>
      <td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
        </label>
      </td>
      <td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
        </label>
      </td>
      <td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
        </label>
      </td>
      <td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
        </label>
      </td>
      </tr>
      <tr>
        <td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
          </label>
        </td>
        <td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red/Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
          </label>
        </td>
        <td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red/Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
          </label>
        </td>
      </tr>
      <tr>
        <td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
          </label>
        </td>
        <td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Green/Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
          </label>
        </td>
        <tr>
          <td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
            <label>
              <input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
            </label>
          </td>
          <tr>
            <td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
              </label>
            </td>
  </form>
  <td title="Select All" align="right" style="border-style: none;">
    <input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(frm1);'>
  </td>
  <td style="border-style: none;"><b title="Select All">All</b>
    <form action="" method="POST" enctype="multipart/form-data" id="form2">
  </td>
  </table>
  </td>
  </tr>
  </td>
  </tr>
  <tr>
    <th>
      <p align="Left">Price : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <td>
      <table border="1">
        <td>
          <input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
          <td>
            <input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
          </td>
        </td>
  </tr>
  </table>
  <tr>
    <th title="Special Price Validity Dates;(note it is valid only if entered special price)">
      <p align="Left">Special Date : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <td title="Special Price Validity Dates;(note it is valid only if entered special price)">
      <table border="0">
        <tr>
          <th title="Special Price Validity Starting Date">Start Date:</th>
          <td>
            <input type="date" name="startingdate" min="2015-02-01">
            <br>
          </td>
        </tr>
        <tr>
          <th title="Special Price Validity Ending Date">End Date:</th>
          <td>
            <input type="date" name="endingdate" min="2015-02-01">
            <br>
          </td>
        </tr>
        <tr>
          <th>
            <font color="white" size="0">Hello</font>
          </th>
        </tr>
        <tr>
          <th>
            <font color="white" size="0">Hello</font>
          </th>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <th title="Status(Should the Product be visible to the customers)">
      <p align="Left">Status : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <th>
      <label>Enable :
        <input type="radio" name="status" value="enable" title="Enable The Status">
      </label>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label>Disable :
        <input type="radio" name="status" value="disable" title="Disable The Status">
      </label>
    </th>
  </tr>
  <tr>
    <th title="Tax Class(which type of tax should be applied on the product)">
      <p align="Left">Tax Class : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <th>
      <label>Taxable :
        <input type="radio" name="tax" value="taxable" title="Taxable Goods">
      </label>
      &nbsp;&nbsp;&nbsp;
      <label>Shipping :
        <input type="radio" name="tax" value="shipping" title="Shipping">
      </label>
      &nbsp;&nbsp;&nbsp
      <label>None :
        <input type="radio" name="tax" value="None" title="None from both on the left">
      </label>
    </th>
  </tr>
  <tr>
    <th>
      <input type="reset" name="reset" value="Reset" onclick="CZBanglesreset();" title="Reset All The Details">
    </th>
    <th>
      <input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" style="	width: 33em;height: 2em;
								border:none;
								background: transparent;
								font-weight:bold;
								cursor:pointer;">
    </th>
  </tr>
  </table>
  </form>
</body>

JS FIDDLE

最佳答案

首先，您有重叠标签:您的 form1 在 td 内结束，这是不可能的。如果查看 DOM 结构，frm1 完全嵌套在 form1 中。不过，这不是真正的问题。

当您尝试同时提交 3 个表单时，前两个提交被中止，只有第三个通过。唯一的方法是异步地使用 AJAX 调用。

关于javascript - 三个表单一键提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29943102/

文章推荐： ios - 显示 iOS 中安装应用程序时的通知计数

文章推荐： java - 如何为我的 android 应用程序制作推送通知服务器？

PHP - 使关联数组唯一，键 ->值和值 ->键
我在 php 方面遇到了一个小问题，我发现很难用语言来解释。我有一个包含键值的关联数组。我想制作一个函数(或者如果已经有一个函数)，它将一个数组作为输入并删除重复项，但两种方式都是如此。例如: 在我
c# - Winforms App (C#) 中的 Windows 键 + [键] 快捷方式
我有一个在系统托盘中运行的应用程序，是否可以允许用户通过 C# 中的 Windows 键 + 键恢复该应用程序？谢谢最佳答案是的，使用 Windows API。我认为 Windows 键与 C
mysql - findOne({键 :value}) or findOne(). 其中({键 :value}) when querying database with waterline?
我正在使用 Waterline通过 Sails 查询 MySQL 数据库。我找到了 2 种方法。不知道哪个更好？顺便问一下，如何处理这两种情况的错误？ 1. Model.findOne().whe
C# 键枚举混淆 : Keys. Alt 或 Keys.RButton |键.ShiftKey |键.Alt
我正在尝试测试是否按下了 Alt 键。我的支票类似于: private void ProcessCmdKey(Keys keyData) { if (keyData == Keys.Alt) {
ruby - 按 TAB 键，然后在带有 Ruby 的 Selenium WebDriver 中按 ENTER 键
我正在使用 Selenium WebDriver 和 Ruby 进行自动化测试。我需要点击一个按钮。我无法通过 id 或 css 或 xpath 获取按钮元素，因为按钮是透明的。我想使用 Tab 和
ide - 什么是⎋键
我是 IntelliJ 的新手，我看到一个启动提示说，“任何工具窗口中的 ⎋ 键都会将焦点移动到编辑器。”但是，我不知道⎋键是什么。我一直在编程很长时间。我的键盘上可能有一个我多年来一直错过的键吗？
javascript - 每次用户单击输入中的空格键时如何添加 + 键
我使用 OMDB API 创建了一个电影搜索页面。我遇到的问题是，如果我搜索一部包含多个单词的电影，此 API 会出错，因为 API 的 URL 必须在 URL 中的每个单词之间有 + 键。所以我想知
名称为彼此子字符串的 Elasticsearch 键
我已经用 Elasticsearch 玩了大约一天了，所以我非常陌生。我正在尝试 POST/import 一个简单的文件: { "compression" : "none", "com
javascript - 键/值对的值也可以是键吗？
enter image description here 在此示例中，要记录带有“title”和“director”键的属性值，使用 obj[key]。因为我们已经处于对象的执行上下文中:在本例中是电
来自同一台机器的多个项目的开放类次的 ssh 键
我是新开类。我使用新的电子邮件 ID 和密码在 openshift 上创建了一个项目。让我们称之为 firstApp 。我做了 rhc 设置和我的 ssh key 与我的项目相关联。我的 frie
java - Jackson反序列化json字符串但bean缺少json字符串的属性/键
当我使用 Jackson 反序列化 json 字符串时，我通常不想创建所有 bean 类的属性，而且我只需要一些 json 字符串的字段，其他字段我不需要。所以我经常只在我需要的 java 类 bea
clojure - 键*/具有内联值规范的键
我想编写一个带有 keys/keys* 的规范，但能够内联值规范，但不支持 by design ，我明白了其背后的原因。然而，有时，本地图存在特定上下文时，您确实希望(或者只是通过遗留或第三方)键和值
perl - 键/值的分配顺序是什么？
my %fruit_colors = ("apple", "red", "banana", "yellow"); my @fruits = keys %fruit_colors; my @colors
DataGridView/Enter 键？
我正在使用 vb.net 2008 和 DataGridView。我正在寻找允许我将 enter 键移动到右侧的下一列而不是在保持在同一列时向下移动一行的代码。最佳答案如果您正在确认编辑，只需移动
javascript - 迭代对象属性/键
我刚刚开始学习编码，我遇到了这个我无法理解的问题。 “我们将添加的第二个函数称为搜索，它将以名字作为参数。它将尝试将收到的名字与我们 friend 联系人列表中的任何名字相匹配。如果它找到匹配项，就会
python - 改变Python中的字典/键
我已经在 Python 中运行了下面的代码，以从文本文件中生成单词列表及其计数。我该如何从“Frequency_list”变量中过滤掉计数为 1 的单词？另外，如何将底部的打印语句循环导出到CSV
XSLT 键()查找
我正在尝试 XSLT 中的查找表示例，但无法使其正常工作
javascript - 从对象返回访问的属性名(键)
是否可以在 Javascript/Typescript 中编写一个将参数名称/键作为字符串返回的函数？ function foo(arg) {...} let user = new User(); f
对象中未填充 Javascript 键
我正在尝试创建一个带有键/值的对象，但是当我看到该对象时，键没有正确填充.. 我希望键是 - 0,1,2,3 但它显示“索引”作为键。 > categories = ["09/07/2016 00:0
Android模拟器硬件键盘[Esc]键
将 Android Studio 从 1.5 升级到 2.0 后，模拟器(现在版本为 25.1.1，我在其上配置了模拟硬件键盘)不再将 [Esc] 键识别为等同于 [Back] 按钮。如何恢复这个有

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 三个表单一键提交