I have an interesting issue. I want to take advantage of HTML form validation and have been successful in doing so using the following code:
$( "#form_0000" ).dialog({
autoOpen: false,
show: {
effects: "fade",
duration: 200
},
hide: {
effects: "face",
duration: 200
},
height: 300,
width: 600,
modal: true,
buttons: {
"Sign On": function() {
console.log('#form_0000.dialog- Force click on hidden submit button.');
$('#btnSignOn_0000').click();
},
"Forgot Password": function () {
$('#formSignOn')[0].reset();
UpdateError_0000(DefMsg_0000);
$("#form_0000").dialog( "close" );
$("#form_0001").dialog( "open" );
},
"Sign Up": function() {
$('#formSignOn')[0].reset();
UpdateError_0000(DefMsg_0000);
$(this).dialog( "close" );
$("#form_0002").dialog('option','title','Add Member to Delbert Hunter Arboretum');
$("#form_0002").dialog( "open" );
},
Help: function() {
$("#help_0000").dialog("open");
},
Cancel: function() {
$('#formSignOn')[0].reset();
UpdateError_0000(DefMsg_0000);
$(this).dialog( "close" );
}
},
close: function() {
$('#formSignOn')[0].reset();
UpdateError_0000(DefMsg_0000);
$(this).dialog( "close" );
}
});
The sign on button forces a click on a hidden form submit button and that causes the next event to occur:
$('#formSignOn').submit(function(){
var username = $("#EMAIL_0000").val(),
password = $("#PASSWORD_0000").val(),
$form = $(this),
$inputs = $form.find("input, select, button, textarea");
serializedData = 'func=logon&' + $form.serialize();
console.log('#formsiginon.submit- serialized data: ' + serializedData);
result = '';
ajax_request = $.ajax({
url: ajax_php,
type: "post",
data: serializedData
});
console.log('#formsignon.submit- return from $.ajax');
$("#form_0000").dialog("refresh");
ajax_request.success(function(data){
console.log('#formsignon.submit- request.success data: ' + data);
switch(data) {
case "OK":
console.log('#formsignon.submit- Sign on successful.');
break;
default:
UpdateError_0000(data);
console.error('#formsignon.submit- Sign on failed: ' + data);
};
});
// ajax_request.done(function(response,textStatus,jqXHR){
// console.log("Hooray, it worked!");
// $("#form_0000").dialog("open");
// });
ajax_request.fail(function(jqXHR,textStatus,errorThrown){
console.error(
"The following error occurred: " +
textStatus, errorThrown
);
});
})
The problem is when I've completed the formsignon submit function, the dialog closes. As you can see, after processing the ajax_request success function I try to re-open the dialog. I don't want the dialog to close since the user may not be valid and they should have the option to sign up or request to reset their password. How can I keep the dialog window open after processing the ajax function?
Here is the form:
<div id="form_0000" title="Sign On to Delbert Hunter Arboretum">
<p id="error_0000" class="dha-form-text-error">All form fields are required.</p>
<form id="formSignOn">
<table>
<tr>
<td>Username: </td>
<td>
<input
type="email"
name="EMAIL_0000"
id="EMAIL_0000"
tabindex="12"
size="40"
placeholder="Username"
value=""
required/>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input
type="password"
name="PASSWORD_0000"
id="PASSWORD_0000"
tabindex="13"
pattern="<?php echo $PasswordPattern; ?>"
value=""
placeholder="Password"
title="See help valid password."
required/>
</td>
</tr>
</table>
<!--
<br/><br/>
-->
<button id="btnSignOn_0000" class="dha-form-button dha-form-button-submit" type="submit">Sign On</button>
</form>
</div>
Here is the console log:
#form_0000.dialog- Force click on hidden submit button.
#formsiginon.submit- serialized data: func=logon&EMAIL_0000=rich%40richware.net&PASSWORD_0000=S1xxxxxxx
#formsignon.submit- return from $.ajax
HTML1300: Navigation occurred.
File: www.testsite.com
#formsignon.submit- request.success data: Username entered not a member
#formsignon.submit- Sign on failed: Username entered not a member
You can see this in action by going to http://www.delberthunterarboretum.org/TestSite/index.php.
Thanks in advance for taking time to look into this.
Regards,
Rich R