Как мне преобразовать некрасивый встроенный JavaScript в функцию?

Question

У меня есть форма с различными входами, которые по умолчанию не имеют значения.Когда пользователь изменяет один или несколько входных данных, все значения, включая пустые, используются в строке URL GET при отправке.

Итак, чтобы очистить его, у меня есть некоторый JavaScript, который удаляет входные данные перед отправкой.Это работает достаточно хорошо, но мне было интересно, как поместить это в функцию JS или привести в порядок.Кажется, немного грязно, чтобы все это слилось в один клик.Плюс я собираюсь добавить еще, чтобы их было немало.

Вот соответствующий код.Есть 3 отдельных линии для 3 отдельных входов.Первая часть строки имеет значение, которое относится к идентификатору входов («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="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 = "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 = "" работать на Firefox 3.6 на Mac, и я не тестировал приведенный выше код на других браузерах или ОС

, вам необходимо загрузить jquery http://docs.jquery.com/Downloading_jQuery#Current_Release и включить ссылку на негов вашей html-заголовке

, чтобы использовать трюк innerHTML для входного родительского тега span, измените строку $ (this) .attr ('disabled', 'disabled');до

if ($(this).parent().get(0).tagName === "SPAN") {
    $(this).parent().get(0).innerHTML = "";                     
}