Call a javascript function

Question

I have a form with 2 textboxes. I want to check that at least one textbox is filled, and if there is only one filled do some stuff and if there are both filled do something else. I found a javascript function that I think might help me but I don't know from where to call it.

here is the function

function verification() {
        var1= document.getElementById("form").value;
        var2= document.getElementById("form").value;
        if((var1 != "") && (var2 != ""))
        {
            // do what ever you want here.
        }
        else
        {
            alert("Fill at least one field");
        }

}

and the form:

<form id="form" action="start.php" method="post" enctype="multipart/form-data">
Person 1: <input type="text" name="person1" /> <br/>
Person 2: <input type="text" name="person2" /> <br />
<input type="submit" value="Submit" name="Submit" />
</form>

<input type="submit" value="Submit" name="Submit" onclick="verification()" /> — Jasmin Mistry
– Jasmin Mistry, Commented Feb 18, 2015 at 10:04

Legionar · Accepted Answer · 2015-02-18 10:17:35Z

2

function verification() {
        var1 = document.getElementById("person1").value;
        var2 = document.getElementById("person2").value;

        if((var1 != "") || (var2 != ""))
        {
            // do what ever you want here.
            return true;
        }
        else
        {
            alert("Fill at least one field");
            return false;
        }

}

<form id="form" action="start.php" method="post" enctype="multipart/form-data" onsubmit="return verification();">
Person 1: <input type="text" id="person1" name="person1" /> <br/>
Person 2: <input type="text" id="person2" name="person2" /> <br />
<input type="submit" value="Submit" name="Submit" />
</form>

And you should put your inline javascript to js file, so put that function verification to some js file.

edited Feb 18, 2015 at 10:17

answered Feb 18, 2015 at 10:05

Legionar

7,5993 gold badges45 silver badges71 bronze badges

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

5 Comments

blex Over a year ago

The JS is still not right, var1 and var2 are assigned the same value, and not even the right one.

blex Over a year ago

Great, now, to check that at least one textbox is filled, replace && with || and I'll upvote :)

dres Over a year ago

so there instead of "form" I should put "person1" and "person2"?

Legionar Over a year ago

You missed elements IDs, so you had in var1 and var2 the same - the form value, whats undefined. You have to get element by id of specific input box. So I gave them IDs - person1 and person2.

Denham Coote Over a year ago

'if((var1 != "") && (var2 != ""))' would require both fields to be filled in to be true.

m0bi5 · Accepted Answer · 2015-02-18 10:12:46Z

2

Calling the id form wont get the value of the input fields person1 and person2. So you will have to modify your var1 and var2.Also , as you want to check if anyone of them is filled , you have to use || and not &&

HTML Modified:

<form id="form" action="start.php"  onsubmit="return verification()" method="post" enctype="multipart/form-data">
Person 1: <input id="one" type="text" name="person1" /> <br/>
Person 2: <input id ="two" type="text" name="person2" /> <br />
<input type="submit" value="Submit" name="Submit"/>
</form>

Javascript modified:

function verification() {
        var1= document.getElementById("#one").value;
        var2= document.getElementById("#two").value;
        if((var1 != "") || (var2 != ""))
        {
            // do what ever you want here. 
            return true;
        }
        else
        {
            alert("Fill at least one field");
            return false;
        }

}

edited Feb 18, 2015 at 10:12

answered Feb 18, 2015 at 10:07

m0bi5

9,5069 gold badges35 silver badges46 bronze badges

4 Comments

Legionar Over a year ago

Functions has to have (), so onclick="verification()". and also you missed onclick="return verification()". Check my answer, already correct...

Legionar Over a year ago

Also you should use onsubmit, because your function will be fired only if user click on the button, but user can press ENTER in the input fields... and then it will not be fired...

m0bi5 Over a year ago

@Legionar now any problems??

Legionar Over a year ago

onsubmit has to be as the form attribute, not input button... check my answer, then you will have the same answer as me :-)

singhakash · Accepted Answer · 2015-02-18 10:43:51Z

2

Try this

html

<form id="form" action="start.php" method="post" onsubmit="return  verification();" enctype="multipart/form-data">
Person 1: <input type="text" id="person1" name="person1" /> <br/>
Person 2: <input type="text" id="person2" name="person2" /> <br />
<input type="submit" value="Submit" name="Submit" />
</form>

javascript

function verification() {
        var1= document.getElementById("person1").value;
        var2= document.getElementById("person2").value;
        if((var1 == "") && (var2 == ""))
        {
            alert("Fill at least one field");

        }
        else
        {   if((var1 != "") && (var2 != "")){
             alert("both filled");
        }else{
        alert("only one field filled");
        }
        }

    return false;


}

Here I am returnig false(preventing form to submit) you can place it under if condition accoding to requirements.

Corrected Fiddle

edited Feb 18, 2015 at 10:43

answered Feb 18, 2015 at 10:18

singhakash

7,9196 gold badges33 silver badges65 bronze badges

2 Comments

Legionar Over a year ago

verification() will always return false, even fields are filled... so the form will be never submitted...

singhakash Over a year ago

@Legionar I have mentioned that in my answer because the question dint specify when to submit the form

Ivošš · Accepted Answer · 2015-02-18 10:27:05Z

1

OR use jQuery:

$("input[type='submit']").click(function() {
  var var1 = $("input[name='person1']").val();
  var var2 = $("input[name='person2']").val();

  if (var1 != "" || var2 != "") {
    alert("All OK :)");
  } else {
    alert("Fill at least one field");
    $("form").submit(function(e) {
      e.preventDefault();
      $("input[name='person1']").focus();
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form id="form" method="post">
  Person 1:
  <input type="text" name="person1" />
  <br/>Person 2:
  <input type="text" name="person2" />
  <br />
  <input type="submit" value="Submit" name="Submit" />
</form>

EXAMPLE

answered Feb 18, 2015 at 10:27

Ivošš

1,16613 silver badges18 bronze badges

Collectives™ on Stack Overflow

Call a javascript function

4 Answers 4

5 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related