CODEWITHSUNDEEP
javascripthtmlformsvalidationsubmit
lupu51nfactum N778
lupu51nfactum N778

Reputation: 229

JavaScript - Getting return values from functions

I want to make submit button enabled only if both functions return true. I can use only JavaScript. Can someone help?

Here's the code:

function func(obj) {
       if (obj.value.length > 4) {
           alert("Longer than 4.");
           return false;
       } else if (obj.value.length < 2) {
           alert("Shorter than 2.");
           return false;
       } else {
           return true;
       }
}

function func1(obj){
    if (obj.value == "abc"){
        return true;
    } else {
        alert("Isn't abc");
        return false;
    }

}   


<form method="" action="">

    <input type="text" name="text" id="text" onblur="func(this)"><br>
    <input type="text" name="text" id="text" onblur="func1(this)"><br>
    <input type="submit" name="submit" value="Submit" disabled>

</form>

Upvotes: 2

Views: 129

Answers (4)

Tsung-Ting Kuo
Tsung-Ting Kuo

Reputation: 1170

One plausible way is to set the attributes of the button instead of returning values.

  1. Add two variables and change the two functions.
  2. Add / change the id of the inputs.

        var test1 = false;
        var test2 = false;

        function func(obj) {
            if (obj.value.length > 4) {
                test1 = false;
            } else if (obj.value.length < 2) {
                test1 = false;
            } else {
                test1 = true;
            }
            if (test1 && test2) {
                document.getElementById('submit').disabled = false;
            } else {
                document.getElementById('submit').disabled = true;
            }
        }

        function func1(obj) {
            if (obj.value == "abc"){
                test2 = true;
            } else {
                test2 = false;
            }
            if (test1 && test2) {
                document.getElementById('submit').disabled = false;
            } else {
                document.getElementById('submit').disabled = true;
            }
        }
        <form method="" action="">
            <input type="text" name="text" id="text1" onblur="func(this)"><br>
            <input type="text" name="text" id="text2" onblur="func1(this)"><br>
            <input id="submit" type="submit" name="submit" value="Submit" disabled>
        </form>

This might not be an elegant solution, but I tested it and it works.

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

There's many solutions for your case, I suggest to call check() method after execution of the both function and it will check the validity of conditions then disable or active the submit button :

function check()
{
    var input_1 = document.getElementById('text-1').value;
    var input_2 = document.getElementById('text-2').value;
    
    if(input_1.length < 4 && input_1.length > 2 && input_2 == "abc")
        document.getElementById('submit').removeAttribute('disabled');
    else
        document.getElementById('submit').setAttribute('disabled','disabled');
}

function func(obj)
{
    if (obj.value.length > 4) 
        alert("Longer than 4.");
    else if(obj.value.length < 2)
        alert("Shorter than 2.");
    
    check();
}

function func1(obj)
{
    if (obj.value != "abc")
        alert("Isn't abc");
    
    check();
}  
<form method="" action="">
    <input type="text" name="text" id="text-1" onblur="func(this)"><br>
    <input type="text" name="text" id="text-2" onblur="func1(this)"><br>
    <input id="submit" type="submit" name="submit" value="Submit" disabled>
</form>

Hope this helps.

Upvotes: 2

TGrif
TGrif

Reputation: 5931

I suggest you to make some change in your code.

First, you have two input with same id. You need to fix that.
Add a method to the form, and change the name and id of your submit button like so:

<form id="form" method="POST" action="">
    <input type="text" name="text" id="text1" onblur="check();"><br/>
    <input type="text" name="text" id="text2" onblur="check();"><br/>
    <input type="submit" name="submit_btn" id="submit_btn" disabled>
</form>

On onblur event we can add a function that check your condition:

function check() {
    var obj1 = document.getElementById('text1');
    var obj2 = document.getElementById('text2');
    if (func(obj1) && func1(obj2)) {
        document.getElementById('submit_btn').disabled = false;    
    } else {
        document.getElementById('submit_btn').disabled = true;    
    }        
}

and enable submit.

Upvotes: 2

mr_schmiggles
mr_schmiggles

Reputation: 122

To make it easier, you could give your submit button an id (we'll call it "submitButton"). 

<input id="submitButton" type="submit" name="submit" value="Submit" disabled>

...

var submitBtn = document.getElementById("submitButton");

if(func(obj) && func1(obj)) {         
     submitBtn.disabled = false;
} else {
     submitBtn.disabled = true;
}

If you can't give it an id for some reason, you can select all input elements using document.selectElementByTagName and then iterate through them to find the submit button.

Upvotes: 1

Related Questions