How do I convert some ugly inline javascript into a function?

Question

I've got a form with various inputs that by default have no value. When a user changes one or more of the inputs all values including the blank ones are used in the URL GET string when submitted.

So to clean it up I've got some javascript that removes the inputs before submission. It works well enough but I was wondering how to put this in a js function or tidy it up. Seems a bit messy to have it all clumped in to an onclick. Plus i'm going to be adding more so there will be quite a few.

Here's the relevant code. There are 3 seperate lines for 3 seperate inputs. The first part of the line has a value that refers to the inputs ID ("mf","cf","bf","pf") and the second part of the line refers to the parent div ("dmf","dcf", etc).

The first part is an example of the input structure...

echo "<div id='dmf'><select id='mf' name='mFilter'>";

This part is the submit and 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=\"\"; }
' />";

I have pretty much zero javascript knowledge so help turning this in to a neater function or similar would be much appreciated.

Answer 1

Seems pretty simple:

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

Or you could even get fancy and do something like this:

<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 2

your script block in your HEAD:

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

and then your onclick:

onclick="javascript:yourFunctionName()"

Answer 3

if you were to use jquery (and there is no reason not to): if your submit button had an id of say id="submit-button" this 'should' work and would handle any additional inputs that get added

$(document).ready(function () {
    $("#submit-button").click(function () {
       $(this).parents("form").find(':input').each(function() {
           if ($(this).val() === "") {
               $(this).innerHTML = "";
           }
       });
    });
}); 

NOTE: I did not test above code at all

here is an updated version

$(document).ready(function () {
    $("form").submit(function () {
       $(this).find(':input').each(function() {               
           if ($(this).val() === "" && $(this).attr("type") !== "submit") {
               $(this).attr('disabled', 'disabled');
           }
       });
    });
}); 

this one is setting the blank inputs to disabled - I could not get the innerHTML = "" to work on Firefox 3.6 on Mac and I did not test above code on other browsers or OS

you would need to download jquery http://docs.jquery.com/Downloading_jQuery#Current_Release and include a reference to it in your html head

to use the innerHTML trick on the inputs parent span tag change the line $(this).attr('disabled', 'disabled'); to

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