Question

The below code is to create a campaign. Before creation, I have to validate the form. I have to validate the campaign name which is already existed in database or not. I don’t know whether I can use PHP code inside javascript (like below).Anyway it’s not working. How can I change my code? How can I validate values with database values?

$this->campaign is an array which contain all campaign details from database.

<script type="text/JavaScript">
function validate()
{
var name = document.getElementById('name').value;
var shape = document.getElementById('shape').value;
     <?
     foreach($this->campaign as $c)
     {
     $old_cname=$c['name'];
     ?>
        if(name==<?=$old_cname;?>)
        {
            alert("same name exists in database. Try again!");
        }
    <?
    }
    ?>

if(!name)
{
    alert("Please enter a name!");

    return false;
}

if(!shape)
{
    alert("Please select shape!");
    return false;
}
    return true;


}
</script>


<form action="create.php" method="post" onsubmit="return(validate());">
Name:
<input type="text" name="name" id="name"/>
Shape:
<select name="shape" id="shape">
<option value="long">Long</option>
<option value="tall">Tall</option>
</select>
<input type="submit" value="Create" name="submit"/>
</form>

Thanks!

Answer 1

You can’t mix php and javascript like that.. php is a server-side language, while javascript is client-side; php renders the page before the user sees it, while javascript modifies the page without refreshing. Any php values in your js will get rendered and output before the js even executes.

In order to do what you need, you need to use ajax, which is asynchronous javascript and xml, a method of client-server communication that allows for what you want to happen.

To do this, I would suggest jQuery, a javascript library which makes such requests very simple. As an example of how you would make such a request in jquery….

The jQuery.ajax() method:

$.ajax({
    url: "validate.php",
    type: "POST",
    data: "username=" + username,
    sucesss: function(data) {
        if (data == 1)
            $("#ajax_div").html("Username is taken, choose another!");
        }
        else {
            $("#ajax_div").html("Username is free :)");
        }
    }
});

That would be how to do it in ajax, while your php file would either return a 1 or a 0 depending on the result of an sql query comparing usernames in the database.

To do this without jquery, it would be something like this:

function checkUsername() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            if (xmlhttp.responseText == 1) {
                document.getElementById('ajax_div').innerHTML = "Username is taken, please choose another!";
            }
            else {
                document.getElementById('ajax_div').innerHTML = "Username is free :)";
            }
        }
    }
    xmlhttp.open("POST","validate.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("username=" + username);
    }
}