Question

我有一个页面，我希望根据datalist值动态插入表单，而不重新加载页面

<form action='#' method='get'>
    <input list="category" name="category">
    <datalist id="category">
        <option value="Home">
        <option value="Car">
        <option value="Mobile">
    </datalist>
    <input type="submit">
</form>

例如，如果某人选择了Home，那么Home表单应显示在数据列表的底部。

任何人都知道该怎么做？

Answer 1

你有很多选择。您可以使用innerHTML

将它们作为字符串插入

document.getElementById("id_here").append(string); //or innerHTML = string; where string = your code above!

或者您可以使用其他路线并使用createElement动态组合表单。

var x = document.createElement("form");
x.id = "derp";
document.body.idtoappendto.appendChild(x);

Answer 2

试试这个，

我认为这将是简单的解决方案

$('#submit').click(function () {
    var cat = $('#cat').val();
    $('#'+cat).show();
});

Updated Fiddle

Answer 3

创建一个html文件，其中包含您的表单或多个html文件，每个文件包含一个表单，并且在您要显示表单的页面中根据用户所在的页面编写一些ajax请求并调用相应的表单文件并获取其html并将其显示在任何你想要的地方。

例如，在主页中，您希望显示homeform.html，然后在目录中创建homeform.html，并在home.html中编写一个ajax函数，该函数将获取homeform.html并将其显示在home.html页面上。< / p>

Answer 4

您可以使用以下代码执行此操作..

首先设置表单id属性，并使用相同的类别值＆amp;最初使用style="display:none"隐藏所有表单。然后

 $("input[type='submit']").click(function () {
        var category = $("input[name='category']").val();
              $('#'+category).show();
  });

如何动态插入表单

4 个答案: