SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Urgent Help :: Help Me and improve this ajax code to send form by "Post" method

    hi ,

    i have js code to load external pages in the sme page by ajax
    this is the code :

    Code:
    var please_wait = null;
    
    function open_url(url, target) {
     	if ( ! document.getElementById) {
      		return false;
     	}
    
     	if (please_wait != null) {
      		document.getElementById(target).innerHTML = please_wait;
     	}
    
     	if (window.ActiveXObject) {
      		link = new ActiveXObject("Microsoft.XMLHTTP");
     	} else if (window.XMLHttpRequest) {
      		link = new XMLHttpRequest();
     	}
    
     	if (link == undefined) {
      		return false;
     	}
     	link.onreadystatechange = function() { response(url, target); }
     	link.open("GET", url, true);
     	link.send(null);
    }
    
    function response(url, target) {
     	if (link.readyState == 4) {
    	 	document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
    	}
    }
    
    function set_loading_message(msg) {
     	please_wait = msg;
    }
    and links which i want load it's page using ajax is write like :
    Code:
    <a href="a.php" onclick="open_url('a.php','content');return false;">aa</a>
    i want improve the code to add function to send form inputs to another page using "post" method and get the action result in the same page , i don't have experince in javascript and ajax so please help me and write this function to me

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.
    For teacihng purpose try this:
    PHP Code:
    ffunction XHConn(){ 
        var 
    xmlhttpwindow.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
        
    this.connect = function(mURLmMethoddatafnDonefnError){ 
            
    xmlhttp.open(mMethodmURLtrue); 
            
    xmlhttp.setRequestHeader("connection""close"); 
            
    xmlhttp.setRequestHeader('User-Agent','XMLHTTP/1.0'); 
            
    xmlhttp.setRequestHeader("X-Requested-With""XMLHttpRequest"); 
            if(
    mMethod == "POST"){ 
                
    xmlhttp.setRequestHeader("Method""POST "+mURL+" HTTP/1.1"); 
                
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
                
    xmlhttp.setRequestHeader('Content-Length'data.length); 
            } 
            
    xmlhttp.onreadystatechange = function(){ 
                if (
    xmlhttp.readyState == 4){ 
                    if(
    xmlhttp.status == 200){ 
                        
    fnDone(xmlhttp); 
                    } 
                    else{ 
                        
    fnError(xmlhttp); 
                    } 
                } 
            } 
            
    xmlhttp.send(data); 
        } 
    }; 
    function 
    errorHandler(xhr){ 
        
    alert("HTTP error: "+xhr.status); 

    function 
    onSuccess(xhr){ 
        
    alert('Loading ......'); 
        
    alert('Stop loading'); 
        
    alert(xhr.responseText
        
    //You can also use xhr.responseXML 

    function 
    testXHConn(){ 
        var 
    varsencodeURIComponent("Thyme &time=again"); 
        new 
    XHConn().connect('test_1.php''POST''id='+varsonSuccesserrorHandler); 

    testXHConn(); 

    test.php

    PHP Code:
    <?php 
    echo $_POST['id']; 
    ?>
    You can use it over and over again

    Bye.
    Last edited by whisher; Sep 4, 2008 at 12:52. Reason: encodeURIComponent

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello whisher

    thank u very very much

    i have very simpel question
    can u please write example for using this function in form ?
    like i have this form :
    Code:
    <form action="a.php?act=do" method="post">
    <input type="text" name="email" />
    <input tyoe="submit" value="add" />
    </form
    now if i want use your function to submit the form by ajax and load it's action in the same page ? please write the steps of method >>(like i told u before that i don't have enough experience in dealing with js and ajax)

    Thanks,

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by e.2512 View Post
    hello whisher

    thank u very very much

    i have very simpel question
    can u please write example for using this function in form ?
    like i have this form :
    Code:
    <form action="a.php?act=do" method="post">
    <input type="text" name="email" />
    <input tyoe="submit" value="add" />
    </form
    now if i want use your function to submit the form by ajax and load it's action in the same page ? please write the steps of method >>(like i told u before that i don't have enough experience in dealing with js and ajax)

    Thanks,

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    script type="text/JavaScript">
    function 
    XHConn(){
        var 
    xmlhttpwindow.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        
    this.connect = function(mURLmMethoddatafnDonefnError){
            
    xmlhttp.open(mMethodmURLtrue);
            
    xmlhttp.setRequestHeader("connection""close");
            
    xmlhttp.setRequestHeader('User-Agent','XMLHTTP/1.0');
            
    xmlhttp.setRequestHeader("X-Requested-With""XMLHttpRequest");
            if(
    mMethod == "POST"){
                
    xmlhttp.setRequestHeader("Method""POST "+mURL+" HTTP/1.1");
                
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                
    xmlhttp.setRequestHeader('Content-Length'data.length);
            }
            
    xmlhttp.onreadystatechange = function(){
                if (
    xmlhttp.readyState == 4){
                    if(
    xmlhttp.status == 200){
                        
    fnDone(xmlhttp);
                    }
                    else{
                        
    fnError(xmlhttp);
                    }
                }
            }
            
    xmlhttp.send(data);
        }
    };
    function 
    errorHandler(xhr){
        
    alert("HTTP error: "+xhr.status);
    }
    function 
    onSuccess(xhr){
        
    alert('Stop loading');
        var 
    targetdocument.getElementById('target');
        
    target.innerHTMLxhr.responseText;
        
    //alert(xhr.responseText)
        //You can also use xhr.responseXML
    }
    function 
    testXHConn(el){
        
    //alert(el.elements['email'].value);
        
    var varsencodeURIComponent(el.elements['email'].value);
        
    alert('Loading ......');
        new 
    XHConn().connect('test_1.php''POST''id='+varsonSuccesserrorHandler);
    }



    </script>

    </head>

    <body>
    <div id="target"></div>
    <form action="a.php?act=do" method="post" onSubmit="testXHConn(this); return false;">
    <input type="text" name="email"  id="myid"/>
    <input type="submit" value="add" />
    </form
    </body>
    </html> 
    The quickest way but I advise you to use DOM
    You must validate email both client and server side.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •