-2

Possible Duplicate:
[PHP/JavaScript]: Call PHP file through JavaScript code with argument

Ok so I use Javascript to validate my HTML forms input values, but I use PHP to write these values into a database. Is it possible to send my form to the PHP file through Javascript?

This is how I did it without the Javascript, it's supposed to send the form when you click the submit button to the PHP file. This is my original form:

<form name="filler" method="post" action="display.php">
//form stuff
</form>

Here's as far as I've gotten. Although I can't see anything that is supposed to error nothing happens when it is time to validate my form with Javascript, it merely goes to the PHP immediately no matter what I type in. What is still wrong with it?

<!DOCTYPE HTML>

<html>
<head>
<script type="text/javascript">
    function required1(n,s,u,e,d,p,cp,g)  
    {  
        if (n.value.length > 0 && s.value.length > 0 && u.value.length > 0 && e.value.length > 0 && d.value.length > 0 && p.value.length > 0 && cp.value.length > 0 && g.value.length > 0)  
                {  
            return true;
        {
        else   
        {  
            alert('You have not filled in all the fields');  
            return false;   
        }  
    }
    function required2(e)
    {
        if(e.indexOf('.') != -1 && e.indexOf('@') != -1)
        {
            return true;
        }
        else
        {
            alert('Not a valid email address');
            return false;
        }   
    }
    function required3(d)
    {
        if(/^\d{2}\/\d{2}\/\d{4}$/.test(d))
        {
            return true;
        }
        else
        {
            alert('Date is not in the right format (DD/MM/YYY)');
            return false;
        }
    }  
</script>
</head>
<body>
<form name="filler" method="post" action="display.php" onsubmit="return required1(document.filler.name,document.filler.surname,document.filler.username,document.filler.email,document.filler.dob,document.filler.password,document.filler.confirm_password,document.filler.gender) && required2(document.filler.email) && required3(document.filler.dob) ">
    <input name="name" placeholder="Name..."/>
    <input name="surname" placeholder="Surname..."/>
    <input name="username" placeholder="Username..."/>
    <input name="email" placeholder="Email address..."/>
    <input name="dob" placeholder="YYYY/MM/DD"/>
    <input name="password" placeholder="Password" type="password"/>
    <input name="confirm_password" placeholder="Password" type="password"/>
    <input name="gender" placeholder="Gender..."/>
    <input type="submit" value="Submit"/>
</form>
</body>
</html>
Improve this question
4
  • Don't need ajax for something simple like this, just handle the submit event, if the form is invalid, return false/ stop propagation, otherwise let it carry on. Hopefully you are doing validation in the php too. Commented Aug 13, 2012 at 17:11
  • Without trying the js, I would say that all the == 0 should be > 0. And if you use jQuery, .value is .val() and you don't need the inline submit handler (you can add an event handler for the form in the js section). Commented Aug 13, 2012 at 17:36
  • thanks the conditional test was a stupid mistake. nope just js here. Is it supposed to submit though as is if the function returns true? Commented Aug 13, 2012 at 17:41
  • Yes, but $(document).ready(function() definitely requires jQuery... Commented Aug 13, 2012 at 17:44

7 Answers 7

Reset to default
2

There's no reason to use AJAX for this. The most elegant and easiest way is to use the HTML form tag's onsubmit event:

<form name="filler" method="post" action="display.php" onsubmit="return validateForm()">
    //form stuff
</form>

This will call the JS function validateForm before submitting the form. If the function validateForm returns false, the form will not be submitted. Otherwise it will be submitted to your PHP file as usual.

EDIT:

Make sure you're validating this input in your PHP as well, since Javascript can easily be disabled.

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

3 Comments

+1 Exactly, no need for jQuery, ajax, etc. Beat me to it by 7 seconds :-)
@Hendrik in response to your post edit, it is possible to do that but it would be neater to return one main validate function and use the other ones in your main function.
Ok thanks I think I'll rather do the main function thing. I was just curious :)
1

As has been suggested in other answers, you can add an event listener to your form and validate on "client side" (that is, with javascript). Before it submits, this javascript function will be called -- from the function you have the ability to stop the form from submitting (if there is some problem).

Also, as mentioned, it is important not to rely on client-side validation. It is very easy for a user to disable javascript, and there are number of legitimate reasons people have for doing so; don't dismiss it as something done only by people "up to no good".

However, I disagree with the method that has been presented here. "inline javascript", as in javscript that is in your HTML markup, is generally considered bad practice. In some narrow cases, it may be more appropriate, usually you are better off attaching events from javascript

That said, here is an example of how to do so:

<form id="my_form" name="filler" method="post" action="display.php">
//form stuff
</form>

.. note that I added an id property to your form...

var validate_form = function (evnt) {
    var frm = evnt.target;
    var error = false;

    // validate here, if there is problem set error = true
    alert('validating fields');


    if (error != false) {
        evnt.preventDefault();  // stop the form from submitting
        // show an error message
        return;
    }        
};
window.onload = function () {
    var frm = document.getElementById('my_form');
    addEvent('submit', frm, validate_form);
};
// quickie cross-browser addEvent
var addEvent = function(event, target, method) {
    if (target.addEventListener) {
        target.addEventListener(event, method, false);
    } else if (target.attachEvent) {
        target.attachEvent("on" + event, method);
    }
}

Why is this better?

This method has several advantages to inline javascript. Foremost, inline javascript only allows one event per element. What if you decide that you want to add some other feature or functionality to your forms later? You'd either have to hack the functionality into your validate_form function (bad), or you'd have to change to this method anyway (wasted time not doing it in the first place)!

Secondly, it is very fast to update this code if you decide to use a framework like jQuery later (ONLY IF YOU NEED IT!!!). You'd likely change the window.onload, and you could drop the addEvent function.

What about the original question?

Your original question was to call PHP functions from javascript. As had been suggested, AJAX is the way to accomplish this. I will show you a "vanilla" example (no library required), and also link to some examples using popular libraries like jQuery.

First, the vanilla, keep in mind, this is very basic, but that may be all you need:

function ajax(url, callback) {
    var aj;
    if (window.XMLHttpRequest) {
        aj=new XMLHttpRequest();
    } else {
        // remove this else if you don't care about IE6 (I DON'T!)
        aj=new ActiveXObject("Microsoft.XMLHTTP");
    }
    aj.onreadystatechange=function() {
        if (aj.readyState==4 && aj.status==200) {
            callback(aj.responseText);
        }
    }
    aj.open("GET",url,true);
    aj.send();
    return aj;
}

To use it, call ajax('http://myserver.org/myfile.php?value=1&anothervalue=2", callback_function); In myfile.php, you can work with the posted data, then output a response (say "1" for everything is okay, otherwise a list of errors).

To use jQuery for an ajax request:

$.ajax({
  url: "http://myserver.org/myfile.php",
  context: document.body
}).done(function(response) { 
    // do something with the response
});

See the docs: http://api.jquery.com/jQuery.ajax/

... or mootools:

  var req = new Request({
    url: 'http://myserver.org/myfile.php',
    onSuccess: function(txt){
        // do something with the result
    },
  });

See the demo: http://mootools.net/demos/?demo=Request

Improve this answer

Comments

0

For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:

document.forms["myform"].submit();
Improve this answer

Comments

0

Without seeing the rest of the html, yes, your form probably gets submitted regardless of the javascript validation.

The easiest way to avoid that, is to add an onSubmit handler to the form:

<form name="filler" method="post" action="display.php" onSubmit="return my_validate_function();">

Now your form will not submit if the my_validate_function() returns false.

Improve this answer

Comments

0

Write it in html file as it is.

<?php
if ($ID = '') {
echo "<script language=javascript>alert('enter a valid username.')</script>";
}
?>
Improve this answer

Comments

0

It's AJAX that you want.

This Bassistance jQuery validation plugin will be something to start with. Here are some demos.

Improve this answer

Comments

-1

You should use JQuery or something like that. Look at http://api.jquery.com/jQuery.ajax/ and http://api.jquery.com/serialize/ .

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.