appendTo

appendTo

I'm trying to append these tips to a ul with info from a form.

This is what I have so far. Here is the form code. I'm trying to call the inputs "tip" and "name" to the function presented in the second bit of code.

Here is the form:

<form id="addTip" method="post">
      <table align="center" bgcolor="#CCCCCC" >
          <tr>
              <td style="font-weight: bold;">Name:</td>
              <td><input name="name" type="text" maxlength="20" /></td>
           </tr>
           <tr>
               <td style="font-weight: bold;">Tip:</td>
               <td><input name="tip" type="text" value="Enter your tip here!" size="30" maxlength="140" /></td>
           </tr>
           <tr>
               <td><a href="#" id="add" style="font-weight: bold;">Add a Tip!</a></td>
               <td style="font-size: 9px; text-align: right;">140 Maximum Characters.</td>
           </tr>
      </table>
</form>


And here is what I've got for my script:



$(function() {
            var i = $('#tips li').size() + 1;
            
            $('a#add').click(function() {
                                $('<li>' + i + '. </li><br />').appendTo('#tips');
                                i++;
                               
                                });
         });


So basically, I'm trying to have someone input their name, and a quick tip twitter style to which when the a tag is hit, the info gets posted to the ul that i have set with an id of #tips.

The code works so far, I just haven't called the info from the form to the script yet. What's my next move?