[bullyrai]

I am trying to change the submit function of a button so that upon clicking it the value changes to 'Please Wait...' and the button is disabled. This is primarily to avoid duplication of form submission as it can take a few seconds for the form to be successfully submitted.

I had envisaged this to work in a similar way to how the login button operates when first logging into processmaker ('Verifying').

The problem I have is that if I simply have a function to change the button to disabled (and the value to 'Please Wait...') the form does not get validated, and therefore it is possible to submit empty forms!

To combat this I use this code:

function submitted() {
var ret = validateForm(document.getElementById("DynaformRequiredFields").value);
if (ret)
theButton = getField("enquiryFormSubmit");
theButton.disabled = "disabled";
theButton.value = "Please Wait...";
submitForm();
}
getField("enquiryFormSubmit").onclick = submitted;

This works as expected and the submit button is not changed unless the form is validated. The problem is that if the form fails the validation I get 2 browser alerts (identical) telling me which fields are required. This is a little annoying especially as within Chrome on the second appearance of the alert there is an option to disable future dialog boxes: 'Prevent this page from creating additional dialogs'.

I cannot figure out why 2 alerts are being displayed one after the other, it is as if the form is being validated as it would normally be and then again because of the validateForm javascript in my function.

I suppose this could be avoided if I could query the result of the hidden field 'DynaformRequiredFields' without running validateForm again.

Any help would be much appreciated!

Thanks

[chieunh]

It is easy,
I drag a button in form, button id: btnComplete
when user click button call js funtion :

Code: Select all

$("#btnComplete").on("click" , function() {
	//validate  xxxx
	......
	//if validate OK
	$("#formId").showFormModal();
	$("#formId").submitForm();
    $("#formId").hideFormModal();		
	}  	
});