我有一个带有各种输入的表单,默认情况下没有任何值(value)。当用户更改一个或多个输入时,提交时,所有值(包括空白值)都会在URL GET字符串中使用。
因此,要清理它,我有一些JavaScript可以在提交之前删除输入。它工作得很好,但我想知道如何将其放在js函数中或整理一下。让所有内容都集中到onclick中似乎有些困惑。另外,我将要添加更多,所以会有很多。
这是相关的代码。 3条单独的输入有3条单独的线。该行的第一部分的值引用输入ID(“mf”,“cf”,“bf”,“pf”),该行的第二部分引用父div(“dmf”,“dcf”等)。
第一部分是输入结构的示例...
echo "<div id='dmf'><select id='mf' name='mFilter'>";
这部分是提交和js ...
echo "<input type='submit' value='Apply' onclick='javascript: if (document.getElementById(\"mf\").value==\"\") { document.getElementById(\"dmf\").innerHTML=\"\"; }
if (document.getElementById(\"cf\").value==\"\") { document.getElementById(\"dcf\").innerHTML=\"\"; }
if (document.getElementById(\"bf\").value==\"\") { document.getElementById(\"dbf\").innerHTML=\"\"; }
if (document.getElementById(\"pf\").value==\"\") { document.getElementById(\"dpf\").innerHTML=\"\"; }
' />";
我对JavaScript的了解几乎为零,因此非常有帮助将其转换为更整洁的函数或类似函数。
最佳答案
如果您要使用jquery(并且没有理由不这样做):
如果您的“提交”按钮的id为“id =“submit-button”,则此“应”工作并且可以处理添加的所有其他输入
$(document).ready(function () {
$("#submit-button").click(function () {
$(this).parents("form").find(':input').each(function() {
if ($(this).val() === "") {
$(this).innerHTML = "";
}
});
});
});
注意:我根本没有测试上面的代码
这是更新版本
$(document).ready(function () {
$("form").submit(function () {
$(this).find(':input').each(function() {
if ($(this).val() === "" && $(this).attr("type") !== "submit") {
$(this).attr('disabled', 'disabled');
}
});
});
});
这是将空白输入设置为禁用-我无法使innerHTML =“”在Mac上的Firefox 3.6上运行,并且我没有在其他浏览器或OS上测试上述代码
您将需要下载jquery http://docs.jquery.com/Downloading_jQuery#Current_Release并将其引用包含在html头中
要在输入父span标签上使用innerHTML技巧,请更改$(this).attr('disabled','disabled')行;至
if ($(this).parent().get(0).tagName === "SPAN") {
$(this).parent().get(0).innerHTML = "";
}
关于javascript - 如何将一些难看的内联javascript转换为函数?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2686646/