javascript函数中HTML表单标签内的Javascript答案

【问题标题】：Javascript within HTML form tag in the javascript functionjavascript函数中HTML表单标签内的Javascript
【发布时间】：2011-11-30 11:57:44
【问题描述】：

是否可以在 HTML 表单标签中放置 JavaScript 代码。我正在尝试实现这样的目标：

function abc(abcd) {
    document.getElementById("context").innerHTML += "<br> 1:";
    document.getElementById("context").innerHTML += "***<form METHOD=POST ACTION=\"/InformationRetrieval/home\">***<input type=\"checkbox\" name=\" GoogleRelevance\" value=\"1\"> Relevant <br><br>";

    document.getElementById("context").innerHTML += "<br> 2:";
    document.getElementById("context").innerHTML += "<input type=\"checkbox\" name=\" GoogleRelevance1\" value=\"1\"> Relevant <br><br>";

    document.getElementById("context").innerHTML += "<br> 3:";
    document.getElementById("context").innerHTML += "<input type=\"checkbox\" name=\" GoogleRelevance3\" value=\"1\"> Relevant <br>***<input type=\"submit\" value=\"Submit\"></form>***<br><br>";
}

在这个例子中我想问的是：我最初在开始的 2-3 行中启动了标签，但我没有在那里关闭它，而是插入更多的 javascript 行，最后我用另一个 <input type="submit"> 关闭标签，但是当我点击这个按钮时不工作。

我也尝试使用 OnClick 属性，但也没有用。

我非常坚持。任何帮助将不胜感激。

【问题讨论】：

你到底想实现什么，你能发布更多代码吗？您是在尝试填写输入字段还是动态呈现表单？从上面的代码中不清楚...谢谢
请不要重复修改innerHTML属性。在局部变量中构建您的字符串并执行查找和修改一次。
我正在尝试动态呈现表单。这种情况就像我从 Google API 获得结果一样。对于每个结果，我都会显示一个与之关联的复选框。在页面末尾，即在获得搜索结果之后，我添加了一个提交按钮并尝试使用所有表单输入复选框信息转到特定的 servlet。
你没有关闭哪个标签？你可以格式化你的代码并发布它。在每一行中删除 document.getElementById("context").innerHTML 并在最后分配它（使用局部变量）。
@nickf 我最初只是在进行一次查找，但是当我必须为每个结果分配一个复选框并在所有结果的末尾显示提交按钮时，这让我更加震惊，将所有 CheckBox 的值传递给 servlet。

标签： javascript html forms tags

【解决方案1】：

我认为你真的应该使用一些好的 ajax 库（jQuery、YUI、dojo、goog 等）来处理这样的事情，将所有代码填充到表单属性中感觉不对。正如 nickf 指出的那样，以这种方式修改 dom 属性确实不是一个好主意。因为我习惯了 jQuery，所以我从你的帖子中了解到这是一个 sn-p 问题：

// Caching the stuff that you used to += on the innerHTML
var newStuff = ' /* your form code here */ '; 

jQuery
.ajax({
    url: /* your request to google */,
    context: jQuery('#context') // Caching the context dom node
})
.done(function() { 
    // The request was successful
    jQuery(this) // The cached context node is the context of this callback
    .append(newStuff); // You only have to append new stuff here, if you want something
                       // more dynamic insert the logic in this function
})
.fail(function() { /* alert("error"); */ })
.always(function() { /* alert("complete"); */ });

虽然我没有测试这个，这只是一个建议。对我来说，它更干净，而且如果你让它在一个浏览器中工作，它就有优势，你可以依靠 jQuery 来确保它在大多数其他浏览器中也能工作。

顺便说一句：您可以在整个 html 字符串周围使用单个 '，这样您就不需要转义 " 的东西。

希望这会有所帮助，祝你好运！

【讨论】：