如何将一些丑陋的内联javascript转换为函数？

Question

我有一个包含各种输入的表单,默认情况下没有任何值.当用户更改一个或多个输入时,包括空白值的所有值在提交时都在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知识,所以帮助将其转换为更整洁的功能或类似的将非常感激.

Answer 1

您HEAD中的脚本块:

<script type="text/javascript">
    function yourFunctionName(){
       ...your javascript goes here...
    }
</script>

然后你的onclick:

onclick="javascript:yourFunctionName()"