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>

• Jasmin Mistry: <input type="submit" value="Submit" name="Submit" onclick="verification()" />
• Lorenzo Marcon: please avoid inline javascript.

Answer 1

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.

• blex: The JS is still not right, var1 and var2 are assigned the same value, and not even the right one.
• blex: Great, now, to check that at least one textbox is filled, replace && with || and I'll upvote :)
• dres: so there instead of "form" I should put "person1" and "person2"?
• Legionar: 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: 'if((var1 != "") && (var2 != ""))' would require both fields to be filled in to be true.

Answer 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;
 }
}

• Legionar: Functions has to have (), so onclick="verification()". and also you missed onclick="return verification()". Check my answer, already correct...
• Legionar: 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: @Legionar now any problems??
• Legionar: onsubmit has to be as the form attribute, not input button... check my answer, then you will have the same answer as me :-)

Answer 3

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

• Legionar: verification() will always return false, even fields are filled... so the form will be never submitted...
• singhakash: @Legionar I have mentioned that in my answer because the question dint specify when to submit the form

Answer 4

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