mimic a dialog submit using OnClick

[Steve Wood]

Normally a Alpha Five submit button looks like this in the browser:

<input class="SunsetButton" style="" type="submit" value="Submit" name="submitButton">

I have changed it to add the following text just before the ">":

onClick="this.disabled=true; this.value='Please wait...';document.forms[0].submit();"

This effectively changes the button text from "Submit" to "Please wait..." and disables the button. But the form does not go on to run the AfterValidate event. It just submits the dialog to itself, without running the events.

Anyone know how to modify this onclick event to mimic what the Submit button would normally do, run the Events?

[Andiyanto Bun]

Re: mimic a dialog submit using OnClick

Hi Steve,

please try to use this

onClick="this.disabled=true; this.value='Please wait...';document.forms[0].submit();this.disabled=false; "

Regards,
abun

[Steve Wood]

Re: mimic a dialog submit using OnClick

Andiyanto,

I see this is your first post, welcome to the message board. If you have javascript skills, your knowledge will be especially welcome indeed! Let us know what Alpha Five questions you might have.

I also asked this question of Jerry, one of the Alpha engineers, so I will paste the response here for others to read. When I work out an exact solution, I'll copy that here too.

Response -->
A disabled control does not send any value on submit. The component is looking for a value to be submitted for "submitButton". The document.forms[0].submit() is redundant, as the form submits anyway as you clicked the submit, even though is sends no value.

Change the name of the submit button to something else and add a hidden field named "submitButton" with some value (any value) inside the form. When the form submits, the hidden control named "submitButton" is subbmitted and the component thinks it is getting the value from the submit button.
<<--

This jives with a response on another forum where someone posts this modified solution:

Send the the submit button�s name/value pair to the server�

<input type=hidden id=hidden1><input type=submit onclick=�this.disabled=true;hidden1.name=this.name;hidden1.value=this.value;this.form.submit()� name=send value=Send>

[Steve Workings]

Re: mimic a dialog submit using OnClick

Just checked in here. I've been struggling with the same thing all morning to submit a grid. One of us will solve this soon....

You'd sorta expect this to work, but it doesn't:

<input align="right" type="button" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].submit()">

[martin horzempa]

Re: mimic a dialog submit using OnClick

Hey Steves

S Wood:

What are you trying to accomplish??


S Working:

<input align="right" type="button" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].submit()">

might not work because of the type

<input align="right" type="submit" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].submit()">

just a thought

[Steve Wood]

Re: mimic a dialog submit using OnClick

I'm trying to accomplish exactly what I put in my first post. I purposely leave out extraneous information to keep the post on target. I want my Dialog Submit button to disable on first click, then continue to process the events as normal. There are lots of posts around this subject, but none of them come up with a concrete solution. Jerry's response (pasted in my last post) is probably the solution but I have not yet gone back to make it work in practice.

[Steve Workings]

Re: mimic a dialog submit using OnClick

Thanks Martin. Made the change you suggested, but still doesn't do the job.

<input align="right" type="submit" class="button-standard" value="TEST SUBMIT" onClick="document.forms['Grid_Cart'].submit()">

[martin horzempa]

Re: mimic a dialog submit using OnClick

Steve Workings.

i am assuming that you are trying to submit a grid with a different button than
the one that was created when a5 generated the grid
if thats the case
maybe this might work

<input align="right" type="button" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].originalsubmitbuttonname.click()">

assuming that you still have the original submitButton still on the grid
again just a quick thought

[Steve Workings]

Re: mimic a dialog submit using OnClick

Bravo Martin! That works.

Steve Wood: I'm doing much the same thing as you are -- I'll bet your solution is here too.

Now, one more thing:

The "off-grid" button I'm punching also needs to take me to a new page.

I tried the following, which didn't submit, but did load the new page:

onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click();window.location='Checkout_Instruct.a5w' "

I'll fiddle some more tonight but if someone wants to save me the time....

[martin horzempa]

Re: mimic a dialog submit using OnClick

Steve Workings

have you tried setting the action for the button

<input align="right" type="button" action="Checkout_Instruct.a5w" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">

or
<input align="right" type="submit" action="Checkout_Instruct.a5w" class="button-standard" value="test submit >>>" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">

just a thought

[Steve Wood]

Re: mimic a dialog submit using OnClick

Steve / Martin,

Do any of these you are proposing disable the button as soon as it is clicked the first time? I don't see anything in your syntax that will do this.

[Steve Workings]

Re: mimic a dialog submit using OnClick

Steve - until I get some of my current stuff straight, I really can't try the disabling.

Martin: still not there.

Buttons 1,2,3 and 5 properly run the Submit, but don't navigate to the next page. Button 4 navigates, but doesn't submit.

<input align="right" type="button" class="button-standard" value="test submit1" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">
<BR>
<input align="right" type="button" action="Checkout_Instruct.a5w" class="button-standard" value="test submit2" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">
<BR>
<input align="right" type="submit" action="Checkout_Instruct.a5w" class="button-standard" value="test submit3" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">
<BR>
<input align="right" type="submit" class="button-standard" value="test submit4" onClick="document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click();window.location='Checkout_Instruct.a5w'">
<BR>
<input align="right" type="submit" class="button-standard" value="test submit5" onClick="window.location='Checkout_Instruct.a5w';document.forms['Grid_Cart'].Grid_Cart_Button_Submit.click()">

[martin horzempa]

Re: mimic a dialog submit using OnClick

S. Workings

sorry steve the "action" property doesnt belong to the button but to the
form that its on -- really sorry -


so

i am really not up on inline javascript
maybe one of the gurus like Peter Wayne might jump in and help if you need all this inline

but i think you can do what you want with a javascript function


<input align="right" type="submit" class="button-standard" value="test submit6" onClick="submitter()">


with the function submitter

<script type="text/javascript" language="javascript">
// click a submit button from a link or other button
function submitter()
		{
		var myform = document.getElementsByName("Grid_Cart");
		myform.action ="Checkout_Instruct.a5w";		
		// get a reference to the original submit button and then click it	
		var fadd=document.getElementsByName("Grid_Cart_Button_Submit"); 
		if (fadd[0] != undefined)
			{
			var fadder = fadd[0];
			fadder.
			fadder.click() 
			}
		}

</script>

S. Woods

i think you want to have the aftervalidate events to run when your button is first clicked to validate the form before its submitted and then continue on with the submission when the button is pushed again???
and the method that you posted seems fine


hth

[Steve Workings]

Re: mimic a dialog submit using OnClick

Thanks Martin. I was thinking about going to a function. I'll try it tomorrow.

Steve Woods:

I see what you're trying. It's a cool idea if it can be made to work.

I can add everything except the disabling and get what you want.

i.e., I can add this:

onClick=" this.value='Please wait...';document.forms[0].submit()"

and it works. But haven't had any success adding in the this.disabled

I'm wondering/thinking that Martin's suggestion for me to build a function is also a good solution for you for this.

Well, done for tonight. Tomorrow's another javascript day. This is the stuff that makes us boring to others ain't it?

[Steve Wood]

Re: mimic a dialog submit using OnClick

This code will disable the button on first click, then continue to run the dialog events. If you deploy this you cannot have any other AdvancedButtons on your dialog, they won't work. I bet that can be resolved too, but this is what I have so far. But ignoring that issue, this is a very generic cure to the problem of double clicks on a submit button.

This would be placed anywhere on the A5W page as a code block. The code below assumes your dialog is named DIALOGNAME. It causes the HTML to be modified at runtime. It effectively fools the server in to thinking the hidden field is the real submit button, even though you clicked the visible one. The visible one disables when clicked, and the hidden one continues to run the dialog events. Note that I am changing the name of my real "submitButton" to "xsubmitButton" at runtime.

x_DIALOGNAME.Output.Body.Dialog_HTML = stritran(x_DIALOGNAME.Output.Body.Dialog_HTML,"name=\"submitButton\"","name=\"xsubmitButton\" onClick= \"this.disabled=true; this.value='Please wait...'; this.form.submit();\">
<input type=hidden id=submitButton name=submitButton value=1")