javascript - 重新定位多部分/表单数据提交按钮

Question

我有以下结构:

<form id="the_form" method='post' enctype="multipart/form-data">
    <table id="1">blabla</table>
    <table id="2">blabla
    <input type='submit' name='submit' />
    </table>
</form>
<table id="3'>
    <form>here are a couple of subforms</form>
</table>

视觉上我想实现这个结构:

<form id="the_form" method='post' enctype="multipart/form-data">
    <table id="1">blabla</table>
    <table id="2">blabla
    </table>
</form>
<table id="3>
    <form>here are a couple of subforms</form>
    <input type='submit' name='submit' />
</table>

我无法更改表单的结构方式。我试图将输入放在一个 noscript 中，然后创建一个提交表单的链接，但我认为这不起作用，因为该表单是一个多部分/表单数据。那么我该如何解决呢？有谁知道将表 2 放在 3 下的 css 方法(表 3 的高度不固定，用 javascript 解决这个问题似乎很麻烦，所以我希望有人有更好的解决方案)？或者是否有 javascript/jquery 方法来做到这一点？还是我想多了，是否有简单的解决方案？

干杯，阿德南

Answer 1

使用 jQuery(顺便说一下，您应该将它添加到问题的标签中，因为您愿意将其用作解决方案)，您可以决定何时提交哪些表单。

Read this如果您有想法一次重新提交多个表单。

您还可以使用 AJAX to submit form data to the server “按您自己的条件”，不使用陈旧的 <form>构造(强制页面重定向/刷新)。

使用 jQuery 提交表单如下所示:

$('#yourFormID').submit();

您还可以将“提交”按钮从 type="submit" 更改为至 type="button"然后做这样的事情:

$('#thesubmitbutton`).click(function() {
     //check if all fields filled out, like this:
     var somefield = $('#somefield').val();
     if (somefield == '') {
          alert('Please complete all form fields');
          return false;
     }else{
          $('#myform1').submit();
     }
});

但是，如果您有多个表单，您可能想要查看如何使用 AJAX 执行操作——它比许多人想象的要简单得多。 See this SO post一些简单的例子来帮助你入门。