Javascript 发送多行表单答案

【问题标题】：Javascript Send Form with Multiple RowsJavascript 发送多行表单
【发布时间】：2018-04-16 00:45:29
【问题描述】：

我有一个 HTML 代码，它是一个有 2 行（可能更多）的表单和一个 javascript，它通过 RESTAPI 将每行的元素发送到服务器。我无法让它工作。尝试调试它没有显示任何错误或响应。有人可以看看我的代码！提前致谢！

<html><body>
  <form id='myform' method='post'>
  <table>
  <tr>
  <td><input type=text name=firstName></td>
  <td><input type=text name=email></td>
  </tr>
  <td><input type=text name=firstName></td>
  <td><input type=text name=email></td>
  </tr>
  <tr><td><input type=submit></td></tr>
  </table>
</form>
</body></html>



<script>
var myForm = document.getElementById('myform');
myForm.onsubmit = function(event) {
event.preventDefault();

var request = new XMLHttpRequest();
request.open('POST', 'https://localhost/api', true);

function myFunction(){
for(var i=0;i<myForm.length;i++){
    var formData = new FormData(document.getElementById('myform').rows[i]);
    request.send(formData);
    }
}
request.onload = function () {
    console.log(request.response);
    };
}

【问题讨论】：

API 是什么？
@jhpratt 它是请求身份验证的后端 api。我可以使用类似的脚本来发布表格的行。现在我需要创建一个多行的表单，我正在努力处理数组

标签： javascript getelementbyid elements

【解决方案1】：

您在 HTML 中拼错了表单元素 ID。

将<form id='myfrom' method='post'> 更改为<form id='myform' method='post'>。

您还需要一个结束 </script> 标记

【讨论】：

好的，谢谢！我更改了它，但不幸的是我的结果保持不变 - 没有响应，也没有错误消息。

【解决方案2】：

如果您使用的是我推荐的 jQuery，我会执行以下操作：

<html>
<body>
<form id='myform'>
  <table>
  <tr>
  <td><input type="text" name="items[0].FirstName"></td>
  <td><input type=text name="items[0].Email"></td>
  </tr>
  <td><input type=text name="items[1].FirstName"></td>
  <td><input type=text name="items[1].Email"></td>
  </tr>
  <tr><td><input type=submit></td></tr>
  </table>
</form>

<script type="text/javascript">

    $(document).ready(function() {
         $('#myform').submit(function() {
             $.ajax({
                 url: 'http://localhost/api/saveitems',
                 type: 'POST',
                 data: $('#myform').serialize()
             }).done(function(data) {
                 // check your returned data for success
             });
         });
    });

</script>

</body>
</html>

在服务器端，这将需要一些东西。首先，您需要创建一个包含您要传入的字段的类，例如：

public class Item {
    public string FirstName {get; set;}
    public string Email {get; set;}
}

然后你需要在你的应用程序中有一个接收项目列表的 API 端点：

[HttpPost]
public ActionResult SaveItems(List<Item> items) {
    // Do whatever you need to do
    return Json("success", JsonRequestBehavior.AllowGet);
}

【讨论】：

谢谢！但是使用这个类似的脚本，我可以通过 API 发送一行表单。该行由名字、姓氏和电子邮件组成。但理想情况下，我想创建一个包含多行的表单并允许发布多个邀请。我希望不需要接触服务器端