My Objective: I want the user to input a client's name in an autocomplete field and select the desired client. Once selected, the Apply button should become enabled.
Upon clicking the Apply button, the ClientName and ClientId should be submitted to a different PHP page.
Current Challenge: Although everything is functioning correctly, the redirection or posting to the specified page URL in the form action is not occurring as expected.
If anyone could provide assistance, it would be greatly appreciated.
$(function() {
$("#btnCancelId").button();
$("#btnApplyId").button();
$('#btnApplyId').attr('disabled', true);
$("#btnAddId").button();
$('#btnAddId').click(function() {$divDialog.dialog('open'); return false;});
$('#txtClientName').bind('keyup', function() {
$('#txtClientId').val('');
$('#txtClientId').css({'background-color': '#FFC0C0'});
$("#btnApplyId:eq(0)").addClass("ui-state-disabled").attr("disabled", true);
});
var $divDialog = $('#divDialog');
$divDialog.dialog({
autoOpen: false,
modal: true,
title: 'Company name',
buttons: [{
id: 'btnCancelId',
text: 'Cancel',
click: function() {$divDialog.dialog('close');}
},{
id: 'btnApplyId',
text: 'Apply',
disabled: true,
click: function() {
$('#client_form').submit();
// $divDialog.dialog('close');
}
}]
});
$("#txtClientName").autocomplete({
source: "_ajcustlist.php",
minLength: 2,
select: function(event, ui) {
$("#btnApplyId:eq(0)").removeClass("ui-state-disabled").attr("disabled", false);
$('#txtClientId').val(ui.item.id);}
});
});
The HTML code:
<div id="divDialog">
<form id="client_form" name="client_form" method="post" action="editinv.php">
<input type="text" id="txtClientName" name="txtClientName" />
<input type='text' id='txtClientId' name='txtClientId' style='display:none'/>
</form>
</div>