Form with jquery not working in dialog

Question

I have 3 buttons each opening a different form into a dialog. The buttons show the dialog ok but i want to use jquery within the form. Anytime i try to include some jquery functionilty to the form to manipulate data within the inputs it never works.

eg using: $("#doc").datepicker(); //dosnt seem to work
//OR
var $output = $("#length_of_service");
$("#doc").keyup(function() {
    var value = parseFloat($(this).val());
    $output.val(value*2);
});

Anybody have any ideas as to why it would not work?

BUTTONS

<a href="business_form.php" class="menubutton" id="add_business" title="Add Business Entitlement">Add Business Entitlement</a>
<a href="line_managers_form.php" class="menubutton" id="add_line_managers" title="Add Line Manager">Add Line Manager</a>
<a href="divisions_form.php" class="menubutton" id="add_divisions" title="Add Division">Add Division</a>

        $("#add_business")
            .button()
            .click(function() {
                $("#business-form").dialog( "open" );

            });
        $("#add_line_managers")
            .button()
            .click(function() {
                $("#line-managers-form").dialog( "open" );
            });

        $("#add_divisions")
            .button()
            .click(function() {
                $("#divisions-form").dialog( "open" );
            });

FORM

<div>
<form id="business_form" action="insert_business_entitlement.php" method="POST" class="cmxform">

<fieldset style="float:left;">
   <legend><p class="subheadertext">Employee</p></legend>

<table width="100%" border="0">
  <tr>
    <td width="100px" valign="middle"><label for="acyear">Start of year:</label></td>
    <td valign="top">
    <select id="acyear" name="acyear">
      <option value="20120801">01/08/2012</option>
      <option value="20130801">01/08/2013</option>
      <option value="20140801">01/08/2014</option>
      <option value="20150801">01/08/2015</option>
    </select>
    </td>
    <td width="100px" valign="middle" align="right"><label for="length_of_service">Service length:</label></td>
    <td width="100px" valign="top" align="right"><input type="text" name="length_of_service" id="length_of_service" disabled="disabled"/></td> 
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="employee">Name:</label></td>
    <td valign="top"><input type="text" name="employee" id="employee" class="required"/></td> 
    <td width="100px" valign="middle" align="right"><label for="band">Band:</label></td>
    <td width="100px" valign="top" align="right"><input type="text" name="band" id="band" disabled="disabled"/></td>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="doc">Commencement:</label></td>
    <td valign="top"><input type="text" name="doc" id="doc" class="required"/></td>
    <td width="100px" valign="middle" align="right"><label for="new_entitlement">New entitlement:</label></td>
    <td width="100px" valign="top" align="right"><input type="text" name="new_entitlement" id="new_entitlement" disabled="disabled"/></td>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="ftpt">FT/PT:</label></td>
    <td valign="top">    
    <select id="ftpt" name="ftpt">
      <option value="FT">FT</option>
      <option value="PT">PT</option>
      <option value="SNR_MAN">SNR MAN</option>
    </select></td>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="weekly">Weekly Hours:</label></td>
    <td valign="top" colspan="3"><input type="text" name="weekly" id="weekly" class="required"/></td>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="entitlement">Entitlement:</label></td>
    <td valign="top" colspan="3"><input type="text" name="entitlement" id="entitlement" class="required"/>
    <select id="units" name="units" disabled="disabled">
      <option value="days">Days</option>
      <option value="hours">Hours</option>
    </select>
    </td>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="division">Division:</label></td>
    <td valign="top" colspan="3">
    <select id="division" name="division">
    <?php
    $connection = mysql_connect("localhost", "***", "***") or die ("Unable to connect!");   
    mysql_select_db("holidays", $connection) or die ("Unable to select database!");    

    $divisions_result = mysql_query("SELECT * from divisions");
    while($divisions = mysql_fetch_array($divisions_result)) {
    echo'<option value="'.$divisions['name'].'">'.$divisions['name'].'</option>';
    }
    ?>
    </select>
  </tr>
  <tr>
    <td width="100px" valign="middle"><label for="line_manager">Line Manager:</label></td>
    <td valign="top" colspan="3">
    <select id="line_manager" name="line_manager">
    <?php    
    $line_managers_result = mysql_query("SELECT * from line_managers");
    while($line_manager = mysql_fetch_array($line_managers_result)) {
    echo'<option value="'.$line_manager['name'].'">'.$line_manager['name'].'</option>';
    }
    ?>
    </select>
  </tr>
  </table>
<br/>
</fieldset>

</form>
</div> 

JS

   $(document).ready(dialogForms);
    function dialogForms() {
      $('a.menubutton').click(function() {
        var a = $(this);
        $.get(a.attr('href'),function(resp){
          var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
          $('body').append(dialog);
          dialog.find(':submit').hide();
          dialog.dialog({
            title: a.attr('title') ? a.attr('title') : '',
            modal: true,
            buttons: {
              'Save': function() {
                    submitFormWithAjax($(this).find('form'));
                    $(this).dialog('close');
                    },
              'Cancel': function() {$(this).dialog('close');}
            },
            close: function() {$(this).remove();},
            width: 600,
            height: 500,        
            show: "fade",
            hide: "fade"
          });
        }, 'html');
        return false;
      });
    }
    function submitFormWithAjax(form) {
      form = $(form);
      $.ajax({
        url: form.attr('action'),
        data: form.serialize(),
        type: (form.attr('method')),
        dataType: 'script',
        success: function(data){
        $(this).dialog('close');
        // Refresh table
       }
      });
      return false;
    }

Answer 1

try something like this

 function dialogForms() {
          $('a.menubutton').click(function() {
            var a = $(this);
            $.get(a.attr('href'),function(resp){
              var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
              $('body').append(dialog);
              dialog.find(':submit').hide();
              dialog.dialog({
                title: a.attr('title') ? a.attr('title') : '',
                modal: true,
                buttons: {
                  'Save': function() {
                        submitFormWithAjax($(this).find('form'));
                        $(this).dialog('close');
                        },
                  'Cancel': function() {$(this).dialog('close');}
                },
                close: function() {$(this).remove();},
                width: 600,
                height: 500,        
                show: "fade",
                hide: "fade"
              });

                 // do initialization here
                 $("#doc").datepicker();
                 var $output = $("#length_of_service");
                 $("#doc").keyup(function() {
                   var value = parseFloat($(this).val());
                   $output.val(value*2);
                 });

            }, 'html');
            return false;
          });
        }

Answer 2

If I got your question right your problem seems to be that you load the forms via ajax and want some jquery-stuff to be applied to the newly loaded elements. If you declare your jquery before your elements were loaded, the declarations will not work as jquery can only work on elements that already exist on the dom.

The solution for that is to use the $.on() function: http://api.jquery.com/on/

Example: http://jsfiddle.net/7gQ32/

Answer 3

Not sure if I understand your question, but you want to open a different dialog for each button right? And each dialog has a different form?

Can't you create all 3 forms in html and then create the dialogs and whenever you click on a button, you open the corresponding form?

Something like this: http://jsfiddle.net/v8bDe/44/

This is just a quick example, obviously you have to make sure you don't have elements with the same id (I just copied the form 2 times).

Also, the datepicker works fine as you can see in the jsfiddle link