Inserting Text into <textarea>

Inserting Text into <textarea>

I'm creating a MySql 'query create box' trying to emulate the phpmyadmin() SQL routine.


The  code shown below  works fine. What I would like is a critique on the efficiency of using all those <button> control statements. ie: <button type="button" class='sqlcontrols'  id="insert"  >INSERT</button>. Could I use the :active pseudo class selector in conjunction with class.sqlcontrols so that when the cursor clicks the button it is triggered. That way you would have only one line of code instead of 9 or 10. Same goes for the    $('li[id="last"]').click     ( function() { insert(" `last` ") });  which inserts fields into the <textarea>.

Thanks in advance for your help,

R

  1. <!DOCTYPE html>

    <html>
        <head>

            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <title>Create phpadmin() style SQL box </title>
           
    <!-- =================== styles  ================ -->

    <link rel="stylesheet " type="text/css" href="css/test.css" />

    <!-- =================  scripts1 ================ -->

        <script  type="text/javascript" src="../../jquery/jquery-2.1.1.js"></script>   
        <script type="text/javascript" src="csv.js"></script>   
        <script type="text/javascript" src="insertAtCaret.js"></script>
               
        </head>

        <body>

    <!-- ======================= html ================ -->   
       
    <div id="div1">
           
            <p> Output of my code to create a MySql query.</p>

        <div id='list'>

            <ul>

            <li class='disp' id='allfields'>All</li>           <!-- list of fields to insert in <textarea> -->
            <li class='disp'></li>
            <li class='disp' id='last'>last</li>
            <li class='disp' id='first'>first</li>
            <li class='disp' id='display'>display</li>
            <li class='disp' id='married'>married</li>
            <li class='disp' id='spouse'>spouse</li>
            <li class='disp' id='address'>address</li>
            <li class='disp' id='city'>city</li>
            <li class='disp' id='state'>state</li>
            <li class='disp' id='zip'>zip</li>   
            <li class='disp' id='email'>email</li>

            </ul>

        </div>
       
        <div id='sql'>
           
            <textarea id='thesql' rows='8' cols='950' >SELECT * FROM `rhsdata` WHERE 1;</textarea>   <!-- <textarea w/default query--> 
         
        </div>
       
        <div id='sqlcontrols'>        <!--list of MySql button controls to insert into <textarea>-->
       
            <button type="button" class='sqlcontrols'  id="select"  >SELECT</button>   
            <button type="button" class='sqlcontrols'  id="select2" >SELECT *</button>
            <button type="button" class='sqlcontrols'  id="from"    >FROM</button>        
            <button type="button" class='sqlcontrols'  id="where"   >WHERE</button>
            <button type="button" class='sqlcontrols'  id="orderby" >ORDER BY</button>
            <button type="button" class='sqlcontrols'  id="like"    >LIKE</button>                               
            <button type="button" class='sqlcontrols'  id="insert"  >INSERT</button>     
            <button type="button" class='sqlcontrols'  id="update"  >UPDATE</button>
            <button type="button" class='sqlcontrols'  id="delete"  >DELETE</button>
            <button type="button" class='sqlcontrols'  id="clear"   >Clear</button>   
            <button type="button" class='sqlcontrols'  id="query"   >Execute Query</button>   
        </div>
        
    </div>

    <!-- ======================  scripts2  ================ -->

    <script type="text/javascript" >

    var table=" `rhsdata` ";

     // insert the MySql control in <textarea>

        $('button[id="select"]').click ( function() { insert('SELECT ') });      
        $('button[id="select2"]').click( function() { insert('SELECT * ') });
        $('button[id="from"]').click   ( function() { insert(' FROM '+table) });   
        $('button[id="where"]').click  ( function() { insert(' WHERE ') });
        $('button[id="orderby"]').click( function() { insert(' ORDER BY ') });
        $('button[id="like"]').click   ( function() { insert(' LIKE') });
        $('button[id="insert"]').click ( function() { insert(' INSERT INTO '+table+'(`id`, ) VALUE("", );') });   
        $('button[id="update"]').click ( function() { insert('UPDATE '+table+' SET ') });   
        $('button[id="delete"]').click ( function() { insert('DELETE FROM '+table+' WHERE ') });
        $('button[id="clear"]').click  ( function() { $('textarea').val(''); });    // erase the <textarea> query
        $('button[id="query"]').click  ( function() {
           var query=$('textarea').val();
           document.write("Query = "+query); // for now show the constructed query on screen
           });
        
         // insert fields into <textarea>
        
      $('li[id="last"]').click     ( function() { insert(" `last` ") });    
      $('li[id="first"]').click    ( function() { insert(" `first` ") });
      $('li[id="display"]').click  ( function() { insert(" `display` ") });
      $('li[id="married"]').click  ( function() { insert(" `married` ") }); 
      $('li[id="spouse"]').click   ( function() { insert(" `spouse` ") });
      $('li[id="address"]').click  ( function() { insert(" `address` ") });
      $('li[id="city"]').click     ( function() { insert(" `city` ") });
      $('li[id="state"]').click    ( function() { insert(" `state` ") });
      $('li[id="zip"]').click      ( function() { insert(" `zip` ") });
      $('li[id="email"]').click    ( function() { insert(" `email` ") });
      $('li[id="allfields"]').click( function() {
        var fields="`last`, `first`, `display`, `married`, `spouse`, `address`, `city`, `state`, `zip`, `email` ";
        insert(fields); 
         });
         
         // insert(choice) does the actual insertion of text into <textarea>
              
         function insert(choice) {
              $('#thesql').insertAtCaret(choice); // in the file insertAtCaret.js
         }
         
    </script>
            
    </body>
    </html>