dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: sending contents of textfield to external file

  1. #1
    Join Date
    Sep 2006
    Posts
    4

    sending contents of textfield to external file

    I'm tring to do an AJAX call using a submit button. I need to submit the contents of a textfield to a PHP page.

    It is working on a <select> tag using the <option> tags to send the contents of the <option> tag to the outside PHP file, but I can't get the syntax right to send the contents of the textfield.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script type="text/javascript">
    <!--
    function showUser(str)
    {
    if (str=="")
    {
    document.getElementById("txtHint").innerHTML="";
    return;
    }
    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 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","getuser2.php?q="+str,true);
    xmlhttp.send();
    }

    function DHTMLSound(surl) {
    document.getElementById("dummyspan").innerHTML=
    "<embed src='"+surl+"' hidden=true autostart=true loop=false>";
    }

    //-->
    </script>

    </head>

    <body>


    <form>
    <select name="users" onChange="showUser(this.value)">
    <option value="">Select a file:</option>
    <option value="SG123456">SG123456</option>
    <option value="SG234567">SG234567</option>
    </select>
    </form>


    <div id="txtHint"><b>Play button will show here.</b></div>
    <br />
    <br />

    <form id="form1" name="form1" method="post" action="">
    <label for="textfield"></label>
    <input type="text" name="textfield" id="textfield" />
    <input type="submit" name="button" id="button" value="Submit" onSubmit="showUser(this.form)"/>
    </form>


    </body>
    </html>

  2. #2
    Join Date
    Sep 2006
    Posts
    4
    oops - I should have added the following in the body text.

    <span id=dummyspan></span>

    This doesn't solve the problem of submitting the text field via AJAX though

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    You have to change the second call with onSubmit="showUser(this.form.textfield.value)".

    Your code would more readable (with HTML tags) and with a function for all Ajax requests

    HTML Code:
    // Ajax from PPK http://www.quirksmode.org/js/xmlhttp.html
    var xmlObj=false;
    var xmlFct=[function(){return new XMLHttpRequest()}
    	,function(){return new ActiveXObject("Msxml2.XMLHTTP")}
    	,function(){return new ActiveXObject("Msxml3.XMLHTTP")}];
    for (var i=0;i<xmlFct.length;i++) {try{xmlObj = xmlFct[i]();}catch(e){continue;}break;}
    
    // sendRequest a function for Ajax calls
    // url : the url of called page with a parmeters string for GET calls
    // cllBck : the callback function
    // pstDta : the parmeter string for POST data
    
    function sndRqu(url,cllBck,pstDta){
    	var req=xmlObj;
    	if (!req) return;
    	var mth=(pstDta)? "POST":"GET";
    	req.open(mth,url,true);
    	req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    	if (pstDta) req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    	req.onreadystatechange=function(){
    		if (req.readyState!=4) return;
    		if (req.status!=200 && req.status!=304) {// 200 Ok, 304 Redirection Not modified
    //			alert('HTTP error ' + req.status);
    			return;}
    		cllBck(req);}
    	if (req.readyState==4) return;
    	req.send(pstDta);
    };
    Then you can write, for the first form, onchange="frsCll(this.value)" and for the second onSubmit="scnCll(this.form)" with :

    HTML Code:
    function frsCll(str){
       if (!str) {document.getElementById("txtHint").innerHTML="";return;}
       sndRqu("getuser2.php?q="+encodeURIComponent(str),
          function(r){document.getElementById("txtHint").innerHTML=r.responseText;})
    }
    function scnCll(frm){var str=frm.textfield.value;
       frsCll(str); // or a new sndRqu with a biger chain for a larger form
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles