Click here to Skip to main content
15,920,005 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

i just want ot validate the field and also send data to main.php file when it get company,noofemps and email a generate a pdf ...

the problem is that i can field validation and call ajaxfuncation are not working i just need a way to make them work ...

if validation are true then it should call ajaxfucation..to send data to main.php..

<form name="form1">
......
.....
...

<input type='button' name='save' value='Save' onclick="ajaxFunction();" />
</form>



<pre lang="cs">function formValidator(){
    // Make quick references to our fields
    var Company = document.getElementById('Company');
    var Designation = document.getElementById('Designation');
    var FirstName = document.getElementById('First Name');
    var LastName = document.getElementById('Last Name');
    var Phone = document.getElementById('Phone');
    var Email = document.getElementById('Email');
    var Website = document.getElementById('Website');
    var Industry = document.getElementById('Industry');
    var NoofEmployees = document.getElementById('No of Employees');
    // Check each input in the order that it appears in the form!
    if(isAlphanumeric(Company, "Please enter company name") || notEmpty(Company,"Please enter company name"){
        if(isAlphabet(Designation, "Please enter title")){
            if(isAlphabet(FirstName, "Please enter first name")){
                if(isAlphabet(LastName, "Please enter last name")){
                    if(isAlphanumeric(Phone, "Please enter phone number")){
                        if(emailValidator(Email,"Please enter a valid email address")){
                            if(isValidURL(Website, "Please enter a valid URL address")){
                                if(madeSelection(Industry, "Industry is not selected")){
                                    if(isNumeric(NoofEmployees, "Please enter number of employees")){
                                        return true;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    return false;
}
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
function isValidURL(url,helperMsg){
    var urlExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;
    if(elem.value.match(urlExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
function lengthRestriction(elem, min, max){
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}
function madeSelection(elem, helperMsg){
    if(elem.value == "-None-"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}
function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

    function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            //document.myForm.time.value = ajaxRequest.responseText;
            document.myForm.submit();
        }
    }
    var Company = document.getElementById('Company').value;
    var Email = document.getElementById('Email').value;
    var NoofEmployees = document.getElementById('NoofEmployees').value;
    var queryString = "?Company=" + Company + "&Email=" + Email + "&NoofEmployees=" + NoofEmployees ;
    ajaxRequest.open("GET", "main.php" + queryString, true);
    ajaxRequest.send(null);
}



Posted
Updated 15-Mar-11 23:28pm
v5
Comments
Sandeep Mewara 16-Mar-11 4:35am    
i wan to check form validation an also call ajax function to send data
It is possible.

...but not working ...
Elaborate. Further, which line you are talking of in the code that you have pasted?
Dalek Dave 16-Mar-11 4:53am    
Edited for Grammar, Syntax and Readability.

It should not be a problem.
Consider:

HTML
<input type="button" name="save" value="Save"
    onclick="ajaxFunction();" onSubmit="anotherFunction()"/>


I'm not quite sure if you really need onSubmit. The HTTP POST is already done through the form action. Well, sometimes it's really needed for some other processing in Javascript.

[EDIT]
After discussion, I agree with Albin. I was only answering you Question about two functions, ignoring the what you want to do with them. I expressed my concern above.
As to the ultimate solution, I would not use either of two function. I always to both validation and further processing on server side, and Ajax call is redundant here. I you want client-side validation, Ajax call is redundant, so use the skeleton implementation suggested by Albin.

—SA
 
Share this answer
 
v2
Comments
vicky87 16-Mar-11 5:09am    
thanks but i try this is not working ...
Sergey Alexandrovich Kryukov 16-Mar-11 5:21am    
First: it does work, period. You just don't process it properly by whatever reason. What this "does not work" mean? You never explained the effect you need to get from this button, and now you're not explaining what's wrong exactly. Remember, for a developer there is no such thing as "does not work" or "crashed", there are exceptions (or you do handle Javascript exceptions, good), events which are fired on not, something certain.
--SA
vicky87 16-Mar-11 5:10am    
i dont want onSubmit but ...i just want to make it work...
Sergey Alexandrovich Kryukov 16-Mar-11 5:17am    
I don't understand why asking about onSubmit then. Well, you need to explain what does it mean "make it to work"...
--SA
vicky87 16-Mar-11 5:49am    
i need validation on form and if all the fields are true then it send data to main.php by calling ajaxfunction ...i try onClick , onSubmit , calling the functions in the form but nothing working ...
iwant that first it validate the fields then call ajax function.
Hi Vicky,

if your purpose is validate a form controls before posting then try the following pattern.

XML
<html>
<head>
<script type="text/javascript">
    function validate(){
        var valid=false;
        // your code for validation
        if (valid){
            return true;
        }else{
            alert("Data not valid");
            return false;
        }
    }
</script>
</head>
<body>
<form action="test.php" method="post" onsubmit="return validate();">
    <input type="submit" value="test"  />
</form>
</body>
</html>


If valid is true form will post, otherwise form will not post. You can alert the user about the error. But question if you want to do the posting through ajax why you need a form at the first hand.
 
Share this answer
 
v2
Comments
Sergey Alexandrovich Kryukov 16-Mar-11 12:06pm    
Let me check: method is POST, so you only validate in onSubmit.
All looks correct, my 5.
--SA
Albin Abel 16-Mar-11 12:41pm    
Thanks SAKryukov
Espen Harlinn 16-Mar-11 17:03pm    
Nice - 5ed!
Albin Abel 16-Mar-11 23:00pm    
Thanks Espen Harlinn
Following code may help you,
just by you say that you want to called mutiple function on button click.
function formcheck(){
if (usr==""){
alert ("Please provide User Name");
frm.usrid.focus();
}
}

function numcheck(){

var NumExpression=/^[0-9]+$/;
if (!document.frm.scode.value.match(NumExpression)){
alert("Invalid, Number Only");
frm.scode.select();
return false;
}

}

<input type="button" value="submit" onclick ="formcheck(); numcheck();">
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900