CODEWITHSUNDEEP
javascript
dres
dres

Reputation: 499

Call a javascript function

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>

Upvotes: 0

Views: 80

Answers (4)

singhakash
singhakash

Reputation: 7919

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

Upvotes: 2

Ivošš
Ivošš

Reputation: 1146

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

Upvotes: 1

Legionar
Legionar

Reputation: 7587

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.

Upvotes: 2

m0bi5
m0bi5

Reputation: 9452

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

}

Upvotes: 2

Related Questions