Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2010
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to pass select form value to Ajax

    I have found an auto suggest script that is working. I am trying to add some codes in order for html select form to pass its value to ajax.js then from there it will pass the value to script_page.php something like these,
    PHP Code:
    $str2strtolower($_GET['content2']); 
    so I can create at script_page.php a condition on what sql query to do.
    But to no avail, it does not pass the value. I get warning of undefined index content2. Below is the 2 main files.

    Ajax.js
    Code:
    subject_id = '';
    	function handleHttpResponse() {
    		if (http.readyState == 4) {
    			if (subject_id != '') {
    				document.getElementById(subject_id).innerHTML = http.responseText;
    			}
    		}
    	}
    	function getHTTPObject() {
    		var xmlhttp;
    		/*@cc_on
    		@if (@_jscript_version >= 5)
    			try {
    				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (E) {
    					xmlhttp = false;
    				}
    			}
    		@else
    		xmlhttp = false;
    		@end @*/
    		if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    			try {
    				xmlhttp = new XMLHttpRequest();
    			} catch (e) {
    				xmlhttp = false;
    			}
    		}
    		return xmlhttp;
    	}
    	var http = getHTTPObject(); // We create the HTTP Object
    
    	function getScriptPage(div_id,content_id)
    	{
    		subject_id = div_id;
    		content = document.getElementById(content_id).value;
    		http.open("GET", "script_page.php?content=" + escape(content), true);
    		http.onreadystatechange = handleHttpResponse;
    		http.send(null);
    		if(content.length>0)
    			box('1');
    		else
    			box('0');
    
    	}
    	
    	
    	
    
    	function highlight(action,id)
    	{
    	  if(action)	
    		document.getElementById('word'+id).bgColor = "#C2B8F5";
    	  else
    		document.getElementById('word'+id).bgColor = "#F8F8F8";
    	}
    	function display(word)
    	{
    		document.getElementById('text_content').value = word;
    		document.getElementById('box').style.display = 'none';
    		document.getElementById('text_content').focus();
    	}
    	function box(act)
    	{
    	  if(act=='0')	
    	  {
    		document.getElementById('box').style.display = 'none';
    
    	  }
    	  else
    		document.getElementById('box').style.display = 'block';
    	}
    search_page.php
    PHP Code:
    <?php
        
    include('config.php'); 
        
        
    $str strtolower($_GET['content']);
        if(
    strlen($str))
        {   
             
            
    $sel mysql_query("select * from table1 where fname like '".trim($str)."%'");
            if(
    mysql_num_rows($sel))
            {
                echo 
    " <table align =\"center\" border =\"0\" width=\"50%\">\n";
                if(
    mysql_num_rows($sel))
                {
                    echo 
    "<script language=\"javascript\">box('1');</script>";
                    while(
    $row mysql_fetch_array($sel))
                    {
                        
    $fname str_ireplace($str,"<b>".$str."</b>",($row['fname']));
                        
                     
                        echo 
    "<tr id=\"word".$row['id']."\" onmouseover=\"highlight(1,'".$row['id']."');\" onmouseout=\"highlight(0,'".$row['id']."');\" onClick=\"display('".$row['fname']."'  );\" >\n<td>".$fname."</td> \n</tr>\n";
                    }
                }
                echo 
    "</table>";
            }
        }
        else
        {
            echo 
    "<script language=\"javascript\">box('0');</script>";
        }
    ?>
    index.php page have select form like this. I tried adding something, and I think I am not doing it right, cause it does not pass the value.
    Code:
     <Select NAME="search_field" onClick="getScriptPage2('select_content')" id="select_content"  >
     <Option VALUE="fname">First Name</option>
     <Option VALUE="lname">Last Name</option>
    
     </Select>
    I added this to ajax.js, but it does not work.

    Code:
    	
    		function getScriptPage2(select_id)
    	{
    		subject_id = div_id;
    		content2 = document.getElementById(select_id).value;
    		http.open("GET", "script_page.php?content2=" + escape(content2), true);
    		http.onreadystatechange = handleHttpResponse;
    		http.send(null);
    		
    	}

    Hope somebody can help me with this, I am just starting out with ajax and javascript. Thanks.
    Last edited by Anishgiri; 07-08-2010 at 01:54 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Rather than trying to do the "get" request, have you tried simply using alert() to test the value of "content2"?

    If so, does that alert contain the appropriate value? If the value is not correct, what does it show instead?

    I can't tell from the code snippets you have posted but it looks like you are sending the variable "content2" with the javascript but only testing for the variable "content" in the PHP. If the javascript is producing the correct value for content2, then we need to look at the PHP instead as it is probably just a matter of having the wrong variable title.

    Take a look into that and let me know what you find.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    May 2010
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by criterion9 View Post
    This looks a little fishy to me. Are you trying to check if that variable has a value? (isset)?
    I remove it, but I think it's not related on the problem.

    Thanks for the reply.
    I Included this before on search_page.php,
    PHP Code:
    $str =  strtolower($_GET['content2']); 
    but I get a notice of Undefined index: content2.

    I even tried
    Code:
     http.open("GET", "script_page.php?content2=" + escape('HELLO'), true);
    , on ajax.js to see if it will set content2 on script_page.php, but it does not, cause I still get the notice of undefined index: content2.

    So I guess the below code did not work??
    Code:
    		function getScriptPage2(select_id)
    	{
    		subject_id = div_id;
    		content2 = document.getElementById(select_id).value;
    		http.open("GET", "script_page.php?content2=" + escape(content2), true);
    		http.onreadystatechange = handleHttpResponse;
    		http.send(null);	
    	}

    Ajax.js passes value for input box (for search query).
    Code:
    	function getScriptPage(div_id,content_id)
    	{
    		subject_id = div_id;
    		content = document.getElementById(content_id).value;
    		http.open("GET", "script_page.php?content=" + escape(content), true);
    		http.onreadystatechange = handleHttpResponse;
    		http.send(null);
    		if(content.length>0)
    			box('1');
    		else
    			box('0');
    
    	}
    I wonder why the value for input box is getting pass, but I can't pass another value with select form. From my understanding
    Code:
     http.open("GET", "script_page.php?content=" + escape(content2), true);
    , can pass a value on php pages.
    Last edited by Anishgiri; 07-09-2010 at 04:12 AM.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Have you tried using alert(content2) inside the getScriptPage2 function to test the value of "content2"?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Regular Coder
    Join Date
    May 2010
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a noob question, I am not familiar with javascript, what is the proper code to test content2 with alert? I know what is alert, but I don't know how to code it to test content2.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try something like this:
    Code:
    function getScriptPage2(select_id)
    	{
    		subject_id = div_id;
    		content2 = document.getElementById(select_id).value;
    alert(content2);
    		http.open("GET", "script_page.php?content2=" + escape(content2), true);
    		http.onreadystatechange = handleHttpResponse;
    		http.send(null);
    		
    	}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder
    Join Date
    May 2010
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response,I appreciate the help. But I finally achieve my desired result. I am not sure it seems with Ajax, once you click another form, the stored value of a variable will be lost?

    Assuming the index content is being set by a click on another page.
    PHP Code:
    $str strtolower($_GET['content']);
    $str2 strtolower($_GET['content2']); 
    When you click another form that set the index for content2, the data stored on $str will be lost?

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Anishgiri View Post
    Thanks for the response,I appreciate the help. But I finally achieve my desired result. I am not sure it seems with Ajax, once you click another form, the stored value of a variable will be lost?

    Assuming the index content is being set by a click on another page.
    PHP Code:
    $str strtolower($_GET['content']);
    $str2 strtolower($_GET['content2']); 
    When you click another form that set the index for content2, the data stored on $str will be lost?
    Yes, an ajax page call only passes that particular set of data to the server and the server isn't storing old variable values. It's not being "reset" but actually hasn't been set at all in that page load because you haven't specified it in that page load.

    If you want to keep data between ajax requests you will need to use the "session" feature of PHP to save $_GET['content'] into $_SESSION['content'] and to save $_GET['content2'] into $_SESSION['content2']. Then those variables will be available to you for as long as you like if you access them through the $_SESSION variable.

    It would look something like this:
    PHP Code:
    <?
    session_start
    ();

    if(isset(
    $_GET['content'])){
        
    $_SESSION['content'] = $_GET['content'];
    }
    if(isset(
    $_GET['content2'])){
        
    $_SESSION['content2'] = $_GET['content2'];
    }
    if(isset(
    $_SESSION['content']) && isset($_SESSION['content2'])){
        print 
    "Content: ".$_SESSION['content']."<br />\n";
        print 
    "Content 2: ".$_SESSION['content2']."<br />\n";
    }
    ?>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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