javascript onfocus/onblur specific to input - not working

Question

I have this form in html:

<form id="ConSupAp" name="ConSupAp" action="#" method="post" enctype="multipart/form-data">

Name of the Applicant's Organisation:
<input type="text" id="input_1_1" name="input_1_1" placeholder="Name of the Applicant's Organisation" value="Default value here" required>

Contact Person:
<input type="text" id="input_1_2" name="input_1_2" placeholder="Contact Person" value="Default person here" required>

Telephone (Landline):
<input type="text" id="input_1_3" name="input_1_3" placeholder="Telephone (Landline)" value="0123456789" required>

Telephone (Mobile):
<input type="text" id="input_1_4" name="input_1_4" placeholder="Telephone (Mobile)" value="01782242565" required></td>

Email:
<input type="text" id="input_1_5" name="input_1_5" placeholder="Email" value="demo@example.com" required>

Fax:
<input type="text" id="input_1_6" name="input_1_6" placeholder="Fax" value="" required>

Address:
<textarea id="input_1_7" name="input_1_7" placeholder="Address" required></textarea>

</form>

There are a total of 24 fields to the complete form but that is not important so I won't list more at this time. I have this at the END of the page:

<script>
var x = document.getElementById("ConSupAp");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
document.getElementById("input_1_1").style.backgroundColor = "yellow";
document.getElementById("input_1_2").style.backgroundColor = "red";
}

function myBlurFunction() {
document.getElementById("input_1_1").style.backgroundColor = "";
document.getElementById("input_1_2").style.backgroundColor = "";
}
</script>

However this seems to make both the first and second inputs respectively yellow and red when ANY input is focussed, and does not operate on a per field situation - which is obviously what I want if I am to have a different or simialar/same action for each field.

So how do I make the functionality operate specifically for one targeted input field, and if focus changed from input_1_1 to input_1_2 then the onfocus function works on 1_2 while the onblur works on 1_1 ??

Note - jQuery IS being used on this page.

Update - I have created this version to try to highlight what I am wanting. I don't actually want colour background changes at all. I am trying to make this the starting point for some onblur AJAX but I have had problems trying to ask the question as a whole, here on SO. People seem to be a little unappreciative of the bigger picture and my initial request for help was marked as "too broad". I am trying to break it down (painfully) into small pieces. First being go get a js trigger to work when a field is onblur and the user moves to the next field. I don't want this looped in specific order. I just want a trigger to happen to each specific input field when the onblur event occurs on it so I can then figure out how to throw it to the server, and display a result based on the server side php spitting something back.

Answer 1

The form is in focus whenever any of it's child input elements are in focus - which is what is happening when you are clicking on them.

Do you want the highlights for the first two fields only? Attach event listeners to the respective input elements instead of the form as a whole for "per field basis" effects.

If you want something different, then you have to change the script accordingly.

Edit: If you want a behaviour where the input has to be done in the order the fields are present and as you move down, the inputs already done should be made "red" and the current one "yellow", then here is a fiddle:

Serial Form I/O

Carefully notice how the event listeners are assigned in the loop and how the user is forced to enter data in a serial order.

var input_elements = document.getElementsByClassName("form_ip");

Add the same class name for all the input elements ie "form_ip" and select them as a list. Then add all the event listeners with a done array which stores whether user has entered a value in the previous input element or not.

for (var i = 0; i < done.length; ++i) {
    // Closures save the day, to avoid variable hoisting otherwise.
    (function (i) {
        input_elements[i].addEventListener("focus", function () {
            for (var j = 0; j < i; ++j) {
                // If a previous input element is blank, move to that instead
                if (!done[j]) {
                    input_elements[j].focus();
                    return;
                }
                handleBlur(j);
            }
            handleFocus(i);

            // we are done with ith element if it has a value
            done[i] = input_elements[i].value.length > 0;
        }, false);
    }(i));
}

The handleBlur and handleFocus functions are defined in the script.

Re-edit In that case, just assign an event listener to each input element's onblur event and store the values somewhere. You can also check for input validity in the listener and let the user know about it. When you want to sent it via AJAX, just assimilate the data into an object, convert the said object to JSON and send it. On the server side, parse the JSON data and extract the values.

Answer 2

First of all the JavaScript code belong in the header and not in the bottom of the page. Also don't write code like var x = document.getElementById("ConSupAp"); just like that. Put it into the onLoad method. ( reference )

As Akash said, if you attach the event listener to the form it will work on the form. What you want is attaching them to the textfields. If you are using jQuery you can use CSS selectors to do that in a loop instead of listing the fields, but thats your choice.

For a test just try something like:

window.onload = function() {
    var x;
    x = document.getElementById("input_1_1");
    x.addEventListener("focus", myBlurFunction1_1, true);
    x.addEventListener("blur", myBlurFunction1_1, true);

    x = document.getElementById("input_1_2");
    x.addEventListener("focus", myBlurFunction1_2, true);
    x.addEventListener("blur", myBlurFunction1_2, true);

    x = document.getElementById("input_1_3");
    x.addEventListener("focus", myBlurFunction1_3, true);
    x.addEventListener("blur", myBlurFunction1_3, true);
    ...

    // Don't reference the "ConSupAp" at all.
}

Edit

Use this kind of callback for modularity:

function myBlurFunction1_1() {
    document.getElementById("input_1_1").style.backgroundColor = "";
}
function myBlurFunction1_2() {
    document.getElementById("input_1_2").style.backgroundColor = "";
}
function myBlurFunction1_3() {
    document.getElementById("input_1_3").style.backgroundColor = "";
}