JavaScript - Getting return values from functions

Question

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>

just do if( func( obj ) && func1( obj ) ){ /* Here goes your code if both is true */ } — guramidev
– guramidev, Commented Oct 9, 2015 at 17:22
@GuramiDagundaridze that's probably better put as an answer than a comment. :) — toskv
– toskv, Commented Oct 9, 2015 at 17:30
@GuramiDagundaridze i think it will not work with obj you have to replace it by some value. — Zakaria Acharki
– Zakaria Acharki, Commented Oct 9, 2015 at 17:31

TGrif · Accepted Answer · 2015-10-09 19:10:10Z

2

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.

edited Oct 9, 2015 at 19:10

answered Oct 9, 2015 at 18:26

TGrif

5,9709 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zakaria Acharki · Accepted Answer · 2015-10-09 19:18:14Z

2

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.

answered Oct 9, 2015 at 19:18

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

1 Comment

lupu51nfactum N778 Over a year ago

It does help, thanks! Tsung-Ting Kuo's and TGrif's solutions are very good also, had a problem whose answer to choose..

mr_schmiggles · Accepted Answer · 2015-10-09 17:41:16Z

1

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.

edited Oct 9, 2015 at 17:41

answered Oct 9, 2015 at 17:32

mr_schmiggles

1321 silver badge6 bronze badges

3 Comments

Zakaria Acharki Over a year ago

Are you sure ?? no it will not work because i can't see where you declare the obj.

Zakaria Acharki Over a year ago

Please add the full answer.

mr_schmiggles Over a year ago

This is the full answer. The question is asking for a solution that works when func and func1 return true, not for test data that forces them to be true.

Tsung-Ting Kuo · Accepted Answer · 2015-10-09 20:21:55Z

1

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

Add two variables and change the two functions.
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.

edited Oct 9, 2015 at 20:21

answered Oct 9, 2015 at 17:43

Tsung-Ting Kuo

1,1706 gold badges17 silver badges23 bronze badges

2 Comments

Tsung-Ting Kuo Over a year ago

The solution from TGrif is more elegant than mine, but my codes can deal with the situation that "the user has valid inputs first, but changed them to invalid ones afterwards" - in this case the submit button should still be disabled.

TGrif Over a year ago

You're absolutly right, thx for the compliment. I'll update my answer for this case.

Collectives™ on Stack Overflow

JavaScript - Getting return values from functions

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related