How do I convert some ugly inline javascript to a function?
I have a form with various inputs that are irrelevant by default. When the user changes one or more inputs, all values, including empty ones, are used in the URL GET string on submission.
So, to clean it up, I have javascript that removes the input before submitting. It works well enough, but I was wondering how to put that in a js function or remove it. Seems a little messy to get it all combined in onclick. Plus I'm going to add more, so there will be quite a few.
Here is the relevant code. There are 3 separate lines for 3 separate entrances. The first part of the line has a value that refers to the input ids ("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 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 quite a lot of zero knowledge of javascript, so help on turning this into a neater function or similar would be much appreciated.
a source to share
if you have to use jquery (and there is no reason not to): if your submit button had id = "submit-button", this "should" work and will handle any additional inputs that are added
$(document).ready(function () {
$("#submit-button").click(function () {
$(this).parents("form").find(':input').each(function() {
if ($(this).val() === "") {
$(this).innerHTML = "";
}
});
});
});
NOTE. I haven't tested the code above at all
here's 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 setting disables empty inputs - I couldn't get innerHTML = "" to work in Firefox 3.6 on Mac and I haven't tested the above code in other browsers or OS
you will need to download jquery http://docs.jquery.com/Downloading_jQuery#Current_Release and include a link to it in the html head
use the innerHTML trick on the inputs of the parent span tag change the line $ (this) .attr ('disabled', 'disabled'); before
if ($(this).parent().get(0).tagName === "SPAN") {
$(this).parent().get(0).innerHTML = "";
}
a source to share
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 can even come up with 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>
a source to share