SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populate textarea with select using database query (ajax)

    As the title says, i'm looking for a way to have a select dropdown that will automatically populate 2 textareas depending on the value chosen. The text to be populated needs to come from the mysql db.

    I had it partially working using a combination of php/js, but i'd rather just use ajax to query the db.

    ca anyone point me in the right direction or show me some code?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Point in you into as where you can learn Ajax? Google "xmlhttprequest apple", they have a very good tutorial.

    If you meant that you already have some code, but have some issues with it, then please post the code here so you can get help.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My suggestion is, take a look at the Jquery library. They really make the use of Ajax much easier.

    Dave

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks.

    specifically i'm looking at pulling text from a db and placing it inside the textarea (with tinymce editor on it)
    i found tizag's tutorial (http://www.tizag.com/ajaxTutorial/ajax-javascript.php) which seems to show a form that will display results from a db, so i guess i can adapt that , but i'd need a way to self submit the form on changing the select dropdown...

  5. #5
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to make some assumptions of code here - bear with me (this code is untested - it's just meant to illustrate):
    HTML Code:
    <select id="select1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    </select>
    <textarea id="destination"></textarea>
    Code:
    function handleAjax(formElement) {
      //do ajaxrequest using the passed element's value
      //using whatever XHRObject you create
    
      XHRObject.onreadystatechange = popTextArea;
    }
    function popTextArea() {
      if (XHRObject.readyState == 4) {
        document.getElementById("destination").value = XHRObject.responseText;
      }
    }
    window.onload = function() {
      document.getElementById("select1").onchange = function() {
        handleAjax(this);
      };
    };
    Here's what I've done:
    1. Assigned the onchange event to the select box
    2. Assigned a function to the ajax onreadystatechange event handler
    3. Populated the textarea with whatever text was returned

    There's a lot more to it, but this is just a brief thing to demonstrate how you could use Ajax to populate the textarea based on a dropdown.

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice!


    Ok so how can i merge these concepts...i have the ajax displaying what i want in a table so far, on clicking the submit (from tizag)...

    Code:
    <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 id = document.getElementById('id').value;
    	var queryString = "?id=" + id;
    	ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
    	ajaxRequest.send(null); 
    }
    
    //-->
    </script>
    
    
    <form name='myForm'>
    Id: <select id='id'>
    <option>1</option>
    <option>2</option>
    </select>
    <input type='button' onclick='ajaxFunction()' value='Query MySQL' />
    <textarea id="emailsubject"></textarea>
    <textarea id="emailtext"></textarea>
    </form>
    <div id='ajaxDiv'>Your result will display here</div>

    and the php script:

    PHP Code:
    <?php

    $dbhost 
    "******";
    $dbuser "******";
    $dbpass "******";
    $dbname "******";
    mysql_connect($dbhost$dbuser$dbpass);
    mysql_select_db($dbname) or die(mysql_error());

    $id $_GET['id'];
    $id mysql_real_escape_string($id);

    $query "SELECT * FROM ******* WHERE id = '$id'";
    $qry_result mysql_query($query) or die(mysql_error());

        
    //Build Result String
    $display_string "<table>";
    $display_string .= "<tr>";
    $display_string .= "<th>Sub</th>";
    $display_string .= "<th>Text</th>";
    $display_string .= "</tr>";

        
    // Insert a new row in the table for each person returned
    while($row mysql_fetch_array($qry_result)){
        
    $display_string .= "<tr>";
        
    $display_string .= "<td>$row[email_subject]</td>";
        
    $display_string .= "<td>$row[email_text]</td>";
        
    $display_string .= "</tr>";
        
    }
    echo 
    "Query: " $query "<br />";
    $display_string .= "</table>";
    echo 
    $display_string;
    ?>
    1. i need to remove the submit and have it self activate on using the select.
    2. i see that i could change the
    Code:
    var ajaxDisplay = document.getElementById('ajaxDiv');
    for
    Code:
    var ajaxDisplay = document.getElementById('emailsubject');
    but i need 2 seperate textareas to be populated at the same time...

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah bugger, this doesn't work anyway with TinyMCE editor

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so text editors aside (maybe i can find one that works with ajax )...

    i've managed to get the from self submitting on select change...and populate 1 text area...

    BUT, how can i use this script to populate 2 textareas with 2 different strings?

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe there is a way to integrate what you've done with the tinyMCE editor. They have some functions to allow more interesting things to be done, you will want to read their documentation.

    Dave

  10. #10
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skyline View Post
    ok, so text editors aside (maybe i can find one that works with ajax )...

    i've managed to get the from self submitting on select change...and populate 1 text area...

    BUT, how can i use this script to populate 2 textareas with 2 different strings?
    You could have your PHP script return a JSON encoded array. The first array element is the string for textarea1 and the second is for textarea2


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
  •