jquery ui problem...

nike_golf
nike_golf used Ask the Experts™
on
I'm trying to get the last piece of this puzzle solved so I think this should be an easy question for someone with the knowledge.

My script is below, all is working fine except when I actually try to "submit" the amounts in the modal dialog, its not submitting the form.

Can someone help with this?

NG,
<script type="text/javascript">
	$(function() {
 
		var gross = $("#gross"),
			photo = $("#photo"),
			mileage = $("#mileage"),
			miscfees = $("#miscfees"),
			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(miscfee,"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) {
						//$('#users tbody').append('<tr>' +
							//'<td>' + gross.val() + '</td>' +
							//'<td>' + photo.val() + '</td>' +
							//'<td>' + mileage.val() + '</td>' +
							//'<td>' + miscfees.val() + '</td>' +
							//'</tr>');
						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');
				alert("now3");
			}
		});
 
 
 
		$('#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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2008

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

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

Author

Commented:
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,
Top Expert 2008

Commented:
>> 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".
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

Author

Commented:
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,

Top Expert 2008

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

Author

Commented:
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,
Top Expert 2008

Commented:
>> 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();

Author

Commented:
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>

Open in new window

Author

Commented:
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,
Top Expert 2008

Commented:
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.

Author

Commented:
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>

Open in new window

Author

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

Author

Commented:
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,
Top Expert 2008
Commented:
exit() is not a javascript function. Use "return false;" to cancel the submit. Because you return false at the end of the function, you can just remove the line with "exit();".

You must have onSubmit="return onSubmit()" in the form element for this to work.

Your form submit button has name="submit", this is a problem. The name "collides" with the form.submit() function.

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

Rename this button, or just remove the name if you don't need it.

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

Commented:
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.

Author

Commented:
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.

Top Expert 2008

Commented:
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.

Author

Commented:
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,

Open in new window

Top Expert 2008

Commented:
This is wrong:

$('form1').submit();

...it should be:

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

Author

Commented:
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,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial