Question

我有一个动态生成的网站，可以引起用户注意丢失的数据，他们可以根据缺少的数据使用适当的输入类型进行更新。这些字段也会显示在网站的其他位置，作为他们正在检查的对象概述的一部分，它们也可以在这些对象中进行编辑。

将<form> ... </form>中的主要内容包装起来，但是会像手风琴等一些美学一样混乱。可以说，可能是糟糕的形式。

使用HTML5属性form="myform"，Checkbox outside of form中的建议是理想的IE not so behind the times。

据我所知，现在这给我留下了JavaScript。

那么我的问题是实现JS解决方案的适当方式是什么。我应该先创建表单并隐藏它，然后引用它的元素和提交吗？还有其他选择吗？

如果相关，后端是Flask。

Answer 1

您可以将数据表单添加到表单外部的控件中，然后在对表单发布帖子之前，对于使用此数据属性的每个控件，在表单内部创建一个隐藏的输入元素，并使用它的名称和值。

function postDynamicForm(formId){
    $("#" + formId + " [data-generated='true']").remove();
    $("[data-form='" + formId + "'']").each(function (){
        $("#" + formId).append("<hidden data-generated='true' name='" + $(this).attr("name") + "' value='" + $(this).val() "'");
    });

    $("#" + formId).submit();
}

不要使用提交类型的输入提交表单，只需使用表单id调用此函数。此函数在添加新的hiddens之前删除已生成的hiddens。

使用这样的代码作为表单之外的输入：

<input type='text' data-form='form1' value='aaa'/>

此输入将是未来后期操作中form1表单中的隐藏输入元素。

Answer 2

我不确定我是否理解正确，但是，你可以在没有包装<form>的情况下创建输入，并使用$ .ajax（{}），fetch或者你正在使用的任何内容使用JavaScript发送数据

HTML

<div id="form-noform">
  <input type="text" id="whatevs">
  <input type="text" id="foshizzle">
  <button type="submit" id="submit-button">Submit</button>
</div>

JavaScript（为简单起见使用jQuery）

$('#submit-button').on('click', function(event) {
  event.preventDefault(); // not sure if this is needed.

  $.ajax({
    url: '/yourendpoint/',
    method: 'POST',
    data: {
      whatevs: $('#whatevs').val(),
      foshizzle: $('#foshizzle').val()
    }
  });
});

表单之外的HTML表单字段

2 个答案: