How do i put two different validation for two submit button in html using javascript

Question

I have a two submit button named Add and Search. When I click the Add submit button, its does the propoer validation using the validate method defined. Now i have another Search submit button and also defined its function, but it is not working, i mean its not doing any validation

<!DOCTYPE html>
<html>
    <head>
    <title>INFORMATION</title>
<script type="text/javascript">

function svalidate(){

   if (document.myForm.firstname.value=="" && document.myForm.lastname.value=="" &&     document.myForm.age.value=="" && document.myForm.gender.value==""){
       alert("Please enter any one value");
       return false;
   }   
}
function validate() {

    if (document.myForm.firstname.value==""){
        alert("Please provide the firstname");
        return false;   
    }

    if (document.myForm.lastname.value=="" ){
    alert("Please provide the lastname");
    return false;
    }

    if (document.myForm.age.value=="" || isNaN(document.myForm.age.value) ||     document.myForm.age.value<1){
    alert("Please provide the valid age in Integer");
    return false;
    }

    if (document.myForm.gender.value=""){
    alert("Please provide the gender");
    return false;
    }

}      
</script>
</head>
    <body>
        <form action = "/~neeraj/cgi-bin/test.py" name="myForm" method="post">
            <table cellspacing="3" cellpadding="2" border="1">
                <tr>
                    <td> FirstName:* </td>
                    <td> <input type="text" name="firstname" /></td>
                </tr>
                <tr>
                    <td>LastName:* </td>
                    <td> <input type="text" name="lastname" /></td>
                </tr>

                <tr>
                    <td>Age:* </td>
                    <td><input type="text" name="age" /></td>
                </tr>

                <tr>
                    <td>Gender:* </td>
                    <td><input type="radio" name="gender" value="male" /> Male
                        <input type="radio" name="gender" value="female" /> Female</td>
                </tr>
            </table>

                <br>
                <input type="submit" name="submit" value="ADD"     onclick="return(validate())">
                <input type="reset" name="reset" value="RESET">
                <input type="submit" name="search" formmethod="post"     formaction="/~neeraj/cgi-bin/search.py" value="SEARCH" onclick="return(svalidate())">
        </form>

   </body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

Please refer the Radio button Validation. This makes the condition false and the alert not running. The document.myForm.gender.value returns only Undefined

edited May 23 '17 at 12:34

Community

1
1

answered Oct 28 '13 at 08:07

Marikkani Chelladurai

1,430
1
13
23

score 1 · Accepted Answer · edited May 23 '17 at 10:33

This part of your code is not working.

 if (document.myForm.gender.value=""){
    alert("Please provide the gender");
    return false;

You need to address you radio buttons like an array.

Refer this question to see how you can do this

Validation of radio buttons with Javascript

Change you Svalidate function to this

function svalidate(){    

    if (document.myForm.firstname.value=="" && document.myForm.lastname.value=="" && document.myForm.age.value=="" && ( document.myForm.gender[0].checked == "0") && ( document.myForm.gender[1].checked == "0")){
            alert("Please enter any one value");
            return false;   
        }   
    }

Also you will need to make the same change in your validate function. Check my WORKING FIDDLE To see both these changes...

score 0 · Answer 3 · answered Oct 28 '13 at 08:18

if ( ( document.myForm.gender[0].checked == false ) && ( document.myForm.gender[1].checked == false ) ) 
{
alert ( "Please choose your Gender: Male or Female" ); 
return false;
}

use this coding for choose gender option...

function svalidate coding is here...

function svalidate(){    

    if (document.myForm.firstname.value=="" && document.myForm.lastname.value=="" && document.myForm.age.value=="" && ( document.myForm.gender[0].checked == false ) && ( document.myForm.gender[1].checked == false )){
            alert("Please enter any one value");
            return false;   
        }   
    }

How do i put two different validation for two submit button in html using javascript

3 Answers3