0

我有以下结构：

<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 方法来做到这一点？还是我想太多了，有没有简单的解决方案？

干杯，阿德南

4

1 回答 1

1

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

如果您有想法一次重新提交多个表单，请阅读此内容。

您还可以使用AJAX 将表单数据“按您自己的条件”提交到服务器<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 进行操作——它比许多人想象的要简单得多。 有关一些简单的示例，请参阅此 SO 帖子以帮助您入门。

于 2013-09-03T16:26:40.070 回答