ajax problem with sending form

ajax problem with sending form

Hi so i'm working on this new project, just to learn new things. One of those things is ajax and a thickbox. this is what i got

i have a php file named template_all.php inthere i call all the "pieces of a page i want, trought an array" (i work with codeigniter). In the head i have :
   <script type="text/javascript" src="../js/jquery.js"></script>
   <script type="text/javascript" src="../js/thickbox.js"></script>
   <script type="text/javascript" src="../js/jquery.validate.js"></script>
   <script type="text/javascript" src="../js/regform.js"></script>   

ok so that's that. I load in the following peaces into template_all.php:

the loginbox and it containts:
   <div class="loginRight">
         Password recovery &nbsp;<img src="<?php base_url();?>/img/slot.png" width="20" height="26" alt="lock" /><br />
         <a href="<?php echo base_url();?>authenthification/regform?height=500&width=550&modal=true" class="thickbox" title="">Not a member yet?</a>
      </div>

so i load a thickbox within it i call the controller and function "authenthification/regform. It loads the registrationview into the thickbox:
(so 3 different pages are used (template_all, v_login and v_register)
In the v_registerfile i have:


<script type="text/javascript" >
   $(function() {
            $("#button").click(function() {
               var name = $("#name").val();
            
               var dataString = 'name='+ name;
               
               if(name=='')
               {
                  alert(name);
                  $('.success').fadeOut(200).hide();
                  $('.error').fadeOut(200).show();
                  return false;
               }
            //   else
            //   {
                     $.ajax({
                     type: "POST",
                     url: "http://localhost/authenthification/register",
                     data: dataString,
                     //cache: false;
                         success: function(msg){
                              if(msg == 1){
                                 alert('Could not send "'+name+'" to db.');
                                 $('.error').fadeOut(200).show();
                              }else{
                                 $('.success').show();
                                 $('.error').fadeOut(200).hide();
                                 $('#regform').hide();                     
                              }
                           }   
                     });
            //   }
            return false;
            });
   });
</script>

<?php

$this->load->helper('form_helper');
echo '<div id="container">';

$options =array(
"id" => "regform",
"name" => "regform"
);
echo form_open('http://localhost/authenthification/register',$options);
//echo '<form  id="regform" name="regform">';
$desc = "Firstname:";
$name = "firstname";
echo formtext($desc, $name);

$desc = "Name:";
$options = array(
"name" => "name",
"id" => "name"
);
echo formtext($desc, $options);
...
...
$options =array(
"name" => "register",
"id" => "button"
);

echo form_button($options, "Register");
?>

As you can see, the action on the form is "authenthification/register"
which just loads a model to input the form into the DB.


The problem is that f:
var name = $("#name").val(); always seems to be empty. If i remove the
if(name=='')
it wil send the empty form. If i type something in it, it gives me an empty alertbox.

I think is has to do with the fact that the regform is loaded into the thickbox but i don't know the solution? any ideas pls?