Page 1 of 1

insert record with ajax and php

Posted: Tue Nov 04, 2008 12:30 am
by kalpesh
hi i am trying to insert records with ajax.
I inserted records in database but it only works with input type button and when i change input type to image it does not work.i also try the validation but it doesn't seem to be working.
please help me.
I am here giving my code to give u clear idea.

mainpage.php

Code: Select all

 
<html>
<head>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
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){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
            
        }
    }
    var news = document.getElementById('news').value;
 
    document.getElementById('ajaxDiv').innerHTML = 'Loading content - please wait';
    var queryString = "?email=" + news ;
    ajaxRequest.open("GET", "email.php" + queryString, true);
    ajaxRequest.send(null); 
 
}
//-->
function ValidateForm(){
    var emailID=document.myform1.text1
 
    if ((emailID.value==null)||(emailID.value=="")){
        alert("Please enter your E-mail Address")
        emailID.focus()
        return false
    }
    if (echeck(emailID.value)==false){
        emailID.value=""
        emailID.focus()
        return false
    }
    return true
 }
function echeck(str) {
 
        var at="@"
        var dot="."
        var lat=str.indexOf(at)
        var lstr=str.length
        var ldot=str.indexOf(dot)
        if (str.indexOf(at)==-1){
           alert("Please enter a proper E-mail Address")
           return false
        }
 
        if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
           alert("Please enter a proper E-mail Address")
           return false
        }
 
        if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
           alert("Please enter a proper E-mail Address")
            return false
        }
 
         if (str.indexOf(at,(lat+1))!=-1){
           alert("Please enter a proper E-mail Address")
            return false
         }
 
         if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
            alert("Please enter a proper E-mail Address")
            return false
         }
 
         if (str.indexOf(dot,(lat+2))==-1){
           alert("Please enter a proper E-mail Address")
            return false
         }
 
         if (str.indexOf(" ")!=-1){
            alert("Please enter a proper E-mail Address")
            return false
         }
 
         return true
    }
</script>
</head>
<body>
<table>
<tr>            
<td >           
    <form  name="myform1" >         
    <input type="text" name="text1" class="store4" id="news" Value="Email Address >>" > &nbsp<sub>
    <input type="button"  onclick='ajaxFunction()' onSelect="return ValidateForm();"/></sub>            
    </form>          
    </td>
    </tr>                           
    <tr>  <td><div id="ajaxDiv" class="header_help1">  
    </div></td>                  
    </tr>
    </table>
    </body>
    </html>
 
 
 
email.php

Code: Select all

 
 
<?php
$db_host="localhost";
$db_name="ajax";
$username="root";
$password="root";
 
// DON'T CHANGE THE FOLLOWING CODE!
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
 
if(isset($_GET['email']))
    {
        $email=$_GET['email'];
            
        
          $InSql = "insert into User(Email) values ('$email')"; 
          $ExQry1 = mysql_query($InSql) or die(mysql_error());      
          if($ExQry1)       
           {            
            $mode="You have successfully inserted record!";     
           }        
           else 
           {            
            $mode = "Sorry!!There is some mulfunction.";        
           }
        echo $mode;
      }
    
    ?>
 
Please help me.
Thanks in advance.

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 3:08 am
by pcoder
Please put the code inside the tag.

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 4:00 am
by novice4eva
try this instead:

Code: Select all

<input type="button" onclick="if(ValidateForm()){ajaxFunction();}"/>

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 4:10 am
by kalpesh
i try this one but it doesn't work.

now what i do is following and its work.
I insert validation code in ajax function and its work .

But the one problem that i has when i try change
input type button to image it doesn't work.
Please help in this.
thanks for reply.

Code: Select all

 
function ajaxFunction(){
var emailID=document.myform1.text1
 
    if ((emailID.value==null)||(emailID.value=="")){
        alert("Please enter your E-mail Address")
        emailID.focus()
        return false
    }
    if (echeck(emailID.value)==false){
        emailID.value=""
        emailID.focus()
        return false
    }
    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){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
            
        }
    }
    var news = document.getElementById('newsletter').value;
 
    document.getElementById('ajaxDiv').innerHTML = 'Loading content - please wait';
    var queryString = "?Newsletter=" + news ;
    ajaxRequest.open("GET", "email.php" + queryString, true);
    ajaxRequest.send(null); 
    
}
 

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 4:56 am
by novice4eva
try this then:

Code: Select all

 
<input type="image" name="imageField" src="frameWork/images/icons/access_number.gif" onClick="if(ValidateForm()){ajaxFunction();}else {return false;}">
 
 

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 4:58 am
by novice4eva
My bad there friend :D , i should have returned false when validation returned false.

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 5:23 am
by kalpesh
I try u r code but it still reloads page.
And values not inserted in database.

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 5:33 am
by novice4eva
:banghead:

Code: Select all

<input type="image" name="imageField" src="frameWork/images/icons/access_number.gif" onClick="if(ValidateForm()){ajaxFunction();} return false;">
 

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 5:42 am
by kalpesh
i again try u r code.
But the problem is same.
it still reloads page and nothing is inserted in database.

can u know advanced techniques for ajax or ajax tutorials in php.

Re: insert record with ajax and php

Posted: Tue Nov 04, 2008 10:15 pm
by novice4eva
That is strange coz i tried the exact code that you have posted and it worked without any page refreshes. It does call the email.php page with the email get parameter when i checked with firebug! Are you sure the javascript is enabled there since you said validation/ajax nothing is working for you....sorry couldn't be much help :cry:

Re: insert record with ajax and php

Posted: Wed Nov 05, 2008 1:16 pm
by mmj

Code: Select all

   <form  name="myform1" onsubmit="return ValidateForm();">        
    <input type="text" name="text1" class="store4" id="news" Value="Email Address >>" > &nbsp;<sub>
    <input type="submit" value="submit"/></sub>

Re: insert record with ajax and php

Posted: Wed Nov 05, 2008 10:59 pm
by novice4eva

Code: Select all

<form  name="myform1" onsubmit="if(ValidateForm()){ajaxFunction();} return false;">
You don't want to return true in your onSubmit because that will cause the form to be submitted and wolla something you don't want will happen - "PAGE REFRESH". So the logic is: do the validation, if the validation says ALL OK then let ajax request be sent to the email.php page with required parameters, as for the form DO NOT SUBMIT since you have your email already sent by ajax request.

Re: insert record with ajax and php

Posted: Thu Nov 06, 2008 8:35 am
by mmj
Sorry, I skimmed too fast.

It isn't possible to put an ajax call in the onsubmit unless you make it synchronous.

http://www.alistapart.com/articles/userproofingajax