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()"

Answer 2

看起来非常简单：

<script>
function doSubmit() {
    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 = "";
}
</script>
<input type="submit" value="Apply" onclick="doSubmit();" />

或者你甚至可以想象并做这样的事情：

<script>
function doSubmit() {
    var inputs = {
        "mf": "dmf",
        "cf": "dcf",
        "bf": "dbf",
        "pf": "dpf"
    };
    for (var input in inputs) {
        if (document.getElementById(input).value == "")
            document.getElementById(inputs[input]).innerHTML = "";
    }
}
</script>

Answer 3

如果你要使用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');
           }
       });
    });
});

这个将空白输入设置为禁用 - 我无法在Mac上的Firefox 3.6上使用innerHTML =“”并且我没有在其他浏览器或操作系统上测试上面的代码

你需要下载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转换为函数？

3 个答案: