是否有可能只使用JS创建表单？

问题描述：

我想创建一个只使用JavaScript的表单。我的意思是为网页创建一个表单，向它添加元素，设置它们的值并提交表单。
此外，如果JavaScript在浏览器中被禁用，则应提交正常的HTML表单。是否有可能只使用JS创建表单？

有什么办法可以达到这个目的吗？

谢谢大家。

答

此外，这可以也可以通过仅使用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中成功处理表单时），真倒转到假，表单不会通过浏览器提交。如果用户已经禁用JS，表单将被浏览器以标准方式提交。

这样做的好处是，您可以通过AJAX获得想要的HTML格式，由PHP生成，您可以通过调用相同的PHP函数获取<noscript>标签中的完全相同的HTML标签HTML：

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

答

有一个正常的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>

答

你也很容易通过javascript使用的东西添加HTML的格式如jQuery的append方法

答

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

看到这里 - Adding new text box using javascript

是否有可能只使用JS创建表单？

相关推荐