jquery ui problem...

Line 72 is wrong. If the form have id="form1", it should be like this:

$('#form1').submit();

hmmm... still having a problem. I removed the "submit" line 82 and I'm assuming that the dialog should close after the values for the following are set, or am I doing this wrong?

                                 document.getElementById("form1").elements["gross_amount"].value = gross;
                                                document.getElementById("form1").elements["photo_amount"].value = photo;
                                                document.getElementById("form1").elements["mileage_amount"].value = mileage;
                                                document.getElementById("form1").elements["miscfees_amount"].value = miscfees;


Thanks,

>> I removed the "submit" line 82

I assume you mean line 72, there is no submit in line 82. Why did you remove it, didn't you want it to submit?

>> I'm assuming that the dialog should close after the values for the following are set

The dialog should close when you execute line 73:

$(this).dialog('close');

>> am I doing this wrong?

document.getElementById("form1").elements["gross_amount"].value = gross;

This should work, assuming the field "gross_amount" exists in the form with id="form1".

Sorry, yes I meant line 72 and I ultimately I do want the form to be submitted after the user clicks the button "Post Invoice Amounts".

I removed the "submit" just for testing purposes since the dialog is not closing when I click the button,actually its not doing anything.

It doesn't appear to be running any portion of the the "Post Invoice Amounts" function()?

NG,

Can you post your complete script (html+js), so that I can test it?

cxr, I found a couple of typos and fixed now the dialog does close but it still is not submitting the form... I would post the entire form but some of this is publishable, sorry.

Does the order play some role in execution - should I close the dialog then try the submit?


$(this).dialog('close');
$('form1').submit();

Thanks.

NG,

>> Does the order play some role

When the form is within the dialog, you must submit before you close, but that is not the case here, if I have understood correctly.

This is wrong:

$('form1').submit();

To match the element with id="form1", you must use #form1 (same as in CSS), like this:

$('#form1').submit();

Sorry, I posted the incorrect submit... the source does have it correct. I've posted the most recent version of what I have for the script below.

The dialog is closing but the form doesn't appear to be submitting or maybe I'm going about this incorrectly... the form action is as follows.

<form action="<?php echo $editFormAction; ?>" method="post" id="form1" enctype="multipart/form-data">


NG,

<script type="text/javascript">
	$(function() {
 
		var gross = $("#gross_amount"),
			photo = $("#photo_amount"),
			mileage = $("#mileage_amount"),
			miscfees = $("#miscfees_amount"),
			allFields = $([]).add(gross).add(photo).add(mileage).add(miscfees),
			tips = $("#validateTips");
 
		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}
 
		function checkLength(o,n,min,max) {
 
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("Length of " + n + " must be between "+min+" and "+max+".");
				return false;
			} else {
				return true;
			}
 
		}
 
		function checkRegexp(o,regexp,n) {
 
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}
 
		}
 
 
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			width: 375,
			modal: true,
			buttons: {
				'Post Invoice Amounts': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
 
					bValid = bValid && checkLength(gross,"gross",1,15);
					bValid = bValid && checkLength(photo,"photo",1,15);
					bValid = bValid && checkLength(mileage,"mileage",1,15);
					bValid = bValid && checkLength(miscfees,"miscfees",1,15);
 
					bValid = bValid && checkRegexp(gross,/^[0-9.]+$/,"Please enter amounts in 0.00 format.");
					bValid = bValid && checkRegexp(photo,/^[0-9.]+$/,"Please enter amounts in 0.00 format.");
					bValid = bValid && checkRegexp(mileage,/^[0-9.]+$/,"Please enter amounts in 0.00 format.");
					bValid = bValid && checkRegexp(miscfees,/^[0-9.]+$/,"Please enter amounts in 0.00 format.");
 
					if (bValid) {
						
						document.getElementById('form1').elements["gross_amount"].value = gross;
						document.getElementById('form1').elements["photo_amount"].value = photo;
						document.getElementById('form1').elements["mileage_amount"].value = mileage;
						document.getElementById('form1').elements["miscfees_amount"].value = miscfees;
						$('#form1').submit();
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
 
 
 
		$('#create-user').click(function() {
			$('#dialog').dialog('open');
		})
		.hover(
			function(){
				$(this).addClass("ui-state-hover");
			},
			function(){
				$(this).removeClass("ui-state-hover");
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active");
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});
 
	});
	</script>

Select allOpen in new window

I think I know why its not working... there is no submit button.

When the button "Save Changes" was set as type "Submit" the form submitted and dismissed the dialog without user input. so I changed it to a type='button" and the dialog worked but I think now that is my problem..

<input type="submit" name="submit" id="submit" value="Save Changes" onClick="onSubmit()"/>

<input type="button" name="submit" id="submit" value="Save Changes" onClick="onSubmit()"/>


Any ideas?

I would send the entire page to you but I don't want it posted publicly - is that against experts policy's?

NG,

What is in the onSubmit() function? If this function returns false, the form is not submitted, but in this case it should return false, because you are submitting from the dialog... if you cancel the dialog, the form should not submit, right?

You might need to change this:

<input type="submit" name="submit" id="submit" value="Save Changes" onClick="onSubmit()"/>

...into this:

<input type="submit" name="submit" id="submit" value="Save Changes" />

...and in the form tag:

onsubmit="return onSubmit();"

For making a test page, you could remove all content from the page, just keep the form and the javascript. You can rename the form fields if needed, just call them "field1", "field2" and so on. That way we could have a test page to work with, and when that page works, it should be easy for you to implement the correct code on the real page.

Below is the onsubmit() function...

I agree changing the button back to a type=submit is how it has to be... the problem is that somehow the dialog is seeing the submit and being dismissed?

NG,

<script>
function onSubmit() {
    if (confirm("Finalize for Management review?")) {
		if (confirm("Have you uploaded your Invoice for the claim?")) {
			$('#dialog').dialog('open');
		}
    } else {
		document.getElementById("form1").elements["submit_for_review"].value = '0';
		document.getElementById("form1").submit();
    }
return false;
}
</script>

Select allOpen in new window

Sorry, yes you are correct if I cancel the dialog the form should not submit.

Here is a link to the php... http://docs.google.com/Doc?docid=0AW9P52s_hY-XZGdjZmI1M2hfMDhzamN2N2d3&hl=en

For some reason the onSubmit() function is not working. I commented out the whole dialog scenario for testing purposes and simply added an exit() function to the script and the form still posts, I don't understand???? arrgh!!!

<script>
function onSubmit() {
    if (confirm("Finalize for Management review?")) {
                if (confirm("Have you uploaded your Invoice for the claim?")) {
                       // $('#dialog').dialog('open');
                       exit();
                }
    } else {
                document.getElementById("form1").elements["submit_for_review"].value = '0';
                document.getElementById("form1").submit();
    }
return false;
}
</script>


I just tried making your suggested changes to the <form> tag with the same effect... the page continues to post. I removed the onClick from the button.

<form action="<?php echo $editFormAction; ?>" method="post" id="form1" onSubmit="return onSubmit()" enctype="multipart/form-data">

NG,

Sorry, you should also remove the onclick attribute:

<input type="submit" id="submit" value="Save Changes" />

The field "submit_for_review" is never set to 1, as far as I can see.

Well, we got half a loaf... this is what I'm using for the <form> tag -

<form action="<?php echo $editFormAction; ?>" method="post" id="form1" onSubmit="return onSubmit()" enctype="multipart/form-data">


and this for the submit -

<input type="submit" id="savechanges" value="Save Changes" />

Now when I "Save Changes" I am prompted by the modal dialog, allowed to input my information and then "Post Invoice Amounts" however it never actually posts the form or runs <?php echo $editFormAction; ?>...

Is there a way to redirect to another <script> maybe that's the approach to take?

Ideas?

Thanks.

Do you still have this code for the save button in the dialog:

                                        if (bValid) {                                                
                                                document.getElementById('form1').elements["gross_amount"].value = gross;
                                                document.getElementById('form1').elements["photo_amount"].value = photo;
                                                document.getElementById('form1').elements["mileage_amount"].value = mileage;
                                                document.getElementById('form1').elements["miscfees_amount"].value = miscfees;
                                                $('#form1').submit();
                                                $(this).dialog('close');
                                        }

The line with $('#form1').submit(); should submit your form.

yes, I do... I'll paste it for your reference.

					if (bValid) {
 
						document.getElementById('form1').elements["gross_amount"].value = gross;
						document.getElementById('form1').elements["photo_amount"].value = photo;
						document.getElementById('form1').elements["mileage_amount"].value = mileage;
						document.getElementById('form1').elements["miscfees_amount"].value = miscfees;
						$('form1').submit();
						$(this).dialog('close');
 
NG,

Select allOpen in new window

This is wrong:

$('form1').submit();

...it should be:

$('#form1').submit();

Sweet!!! great catch I missed it twice... all seems to be in working order at the moment. I'll do some testing on it further this evening.

Many thanks for your help, if I get hung on anything else I'll post a new Q.

Thanks again.

NG,