我有 3 个按钮,每个按钮打开一个不同的表单进入一个对话框。按钮显示对话框正常,但我想在表单中使用 jquery。每当我尝试在表单中包含一些 jquery 功能来操作输入中的数据时,它永远不会起作用。
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);
});
有人对为什么它不起作用有任何想法吗?
纽扣
<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" );
});
形式
<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;
}