CODEWITHSUNDEEP
javascripthtml
Andrew Fox
Andrew Fox

Reputation: 890

How to reset the oninput() html event after first use?

I have a db search form with multiple fields. Two of them, job_id and job_desc, I want to be disabled when the other one is used and vice versa. I have written a small Javascript function to do this.

Here is my form code:

<input type="text" id="job_id" oninput="input('job_id','job_desc')" onblur="blur('job_id','job_desc')">
<textarea id="job_desc" oninput="input('job_desc','job_id')" onblur="blur('job_desc','job_id')"></textarea>

Here is my Javascript code:

function input(a,b)
    {
    var a = document.getElementById(a);
    var b = document.getElementById(b);
    alert("This will disable "+b); // Let the user know we are disabling the other field
    b.value = ""; // Empty the other field
    b.disabled = true; // Disable the other field
    }

function blur(a,b)
    {
    var a = document.getElementById(a);
    var b = document.getElementById(b);
    if(a.value = "") // If the field is empty...
        {
        b.disabled = false; // Enable the other field.
        }
    }

I have these problems:

1) For some reason my second field does not re-enable once the first field is empty and blurred. This leads me to believe the onblur() event is not working.

2) Once I type in some text, I get the alert once and it's all good. However, when I empty the field and the re-input some text, the alert doesn't trigger a second time. How do I reset the oninput() event?

Here is my fiddle: fiddle

Upvotes: 0

Views: 972

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

Besides the solution provided, the reason your code did not work is it was conflicting with a native blur() function on the window object, and so your blur call was calling that instead of your own blur function. You need to change its name.

Another issue once you fix that is in

if(a.value = "") // If the field is empty...

it should have two = signs for comparison.

if(a.value == "") // If the field is empty...

Demo at http://jsfiddle.net/q11m3ahz/6/

Upvotes: 1

Roc Khalil
Roc Khalil

Reputation: 1385

You can use the "onkeyup" event instead of the other events:

The HTML Code would be :

<input id="job_id" onkeyup="input('job_id','job_desc')">
<br>
<textarea id="job_desc" onkeyup="input('job_desc','job_id')"></textarea>

And the JS funciton :

function input(a, b) {
        var ea = document.getElementById(a); // We put A in a variable
        var eb = document.getElementById(b); // We put B in a variable
        if(ea.value != ""){ // If the element have a value / text in it
            if(!eb.disabled) // we check if the other element is disabled, if not, we trigger the alert
                alert("This will disable " + b); // Let the user know we are disabling the other field

            eb.value = ""; // Empty the other field
            eb.disabled = true; // Disable the other field   
        }else{ // if the element's value is empty (which means that we have erased the existing value)
            alert(b + " is now enabled"); // Let the user know we are enabling the other field
            eb.disabled = false; // We re-enable the field
        }
    }

It will work fine on all the browsers.. I hope it will help you !

Upvotes: 2

Related Questions