javascript validate form values from database

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!

You want to validate values entered by users? if that's is the case, I think you need to pass the values to the server side, perform the validation there and get the return value. I usually use ajax for that. — artsylar
– artsylar, Commented Jul 31, 2012 at 1:11
Thank you for your valuable comment. yes, I want to validate values entered by users. I am new to ajax. If you don't mind could you please show me an example? — Zendie
– Zendie, Commented Jul 31, 2012 at 1:30
@Daedalus already posted a very good example of using ajax and jquery :) — artsylar
– artsylar, Commented Jul 31, 2012 at 1:35

Daedalus · Accepted Answer · 2012-07-31 01:37:53Z

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

Branden S. Smith · Accepted Answer · 2012-07-31 01:47:02Z

You should use jquery to validate using a php script. The best way to do this is to disable the submit button until all fields are verified. This requires that you to listen to keystrokes then make a jquery call to validate the input field. A simple example below

script.js

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').keyup(function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').keydown(function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  $.ajax({
      type: "POST",
      url: 'ajax/validate.php',
      data: 'cname='+$('#name').val(),
      success: function(data) {
         if(data == "original"))
           //enable the submit button
         else
          //Update your div that contains the results
      }
  });
}

ajax/validate.php

<?PHP
   //Run your validations here
?>

Collectives™ on Stack Overflow

javascript validate form values from database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related