Question

我正在尝试仅使用JavaScript创建表单。我的意思是为网页创建一个表单，向其添加元素，设置它们的值并提交表单此外，如果在浏览器中禁用了JavaScript，则应提交普通的HTML表单。

有没有办法实现这个目标？

谢谢大家。

Answer 1

拥有一个普通的HTML表单，用JS隐藏它。没有闪烁的好方法是：

<body>
  <script type="text/javascript">
    document.getElementsByTagName('body')[0].className = "js"
  </script>
  <style type="text/css">
    body.js #no_javascript_form { display: none; }
  </style>
  <form id="no_javascript_form">...</form>
</body>

然后动态创建<form>。使用jQuery，您可以：

<div id="form_placeholder"></div>
<script type="text/javascript">
  $('#form_placeholder').append(
    $('<form/>')
      .append('<input type="text"/>')
      .append('<button type="submit">submit</button>')
  );
</script>

Answer 2

var input = document.createElement('input');
    input.name = 'generated_input';
    document.getElementbyId('inputs_contained').appendChild(input);

请参阅此处 - Adding new text box using javascript

Answer 3

此外，只需使用someDiv.innerHTML即可实现此目的。

#!javascript
var formDiv = document.getElementById('my_form_div');    // you hopefully have a better method to do this ;)
if (formDiv) {
    var HTML = '<form method="GET" action="?submit" onsubmit="return !formSubmitted()">';
    HTML += '<input type="text" name="field1" />';
    HTML += '<input type="text" name="field2" />';
    HTML += '<input type="submit" value="go" />';
    HTML += '</form>';
    formDiv.innerHTML = HTML;
}

注意函数formSubmitted()。当用户提交表单时，可以调用此对象，然后可以在JS中执行任何操作，例如通过AJAX提交表单值，以及返回 true （例如，当您成功处理表单时）在JS）中，true转换为 false ，表单不会通过浏览器提交。如果用户已停用JS，则表单将由浏览器以标准方式提交。

这样做的好处是你可以通过PHP生成的AJAX获得所需的表单HTML，并且你可以通过调用相同的PHP将完全相同的HTML放在< noscript >标签内，对于那些已经停用JS的人来说获取HTML的函数：

... some HTML
<div id="my_form_div">
<noscript>
    <?= myFormHTML() ?>    # equal to: <?php echo myFormHTML() ?>
</noscript>
... more HTML

Answer 4

您还可以使用jQuery的append方法

等方式通过javascript轻松添加表单的html

是否可以仅使用JS创建表单？

4 个答案: