Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9457
  • Last Modified:

onClick Submit on link (href)

I put 'onClick document submit fuction' on 'Submit' button as:

onClick = "document.pressed=this.value;this.disabled=true;this.value='Please wait...';this.form.submit()"

I want to put this onClick submit function on 'href' as well.   If needed, the message 'Please wait...' can be taken out.

For instance,

When this link <a href="../../SimpleCredits.cfm"><B>Simple Credits</B></a> is clicked,
it MUST execute the onClick submit function first, and then take the page to the link (SimpleCredits.cfm).
0
ethanjohnsons
Asked:
ethanjohnsons
  • 11
  • 8
  • 3
2 Solutions
 
ZvonkoSystems architectCommented:
Like this:

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

0
 
callrsCommented:
<!-- Submit via link and submit button: Demo -->
<!-- type c:\temp\google.htm into address bar after saving this from notepad with same name -->

<form name="magic" target=_self method="GET" action="http://www.google.com/search">
<input type=submit id="sendme">
<input type=text name=q size=31 maxlength=2048 value="key" title="Search">
<a href="#" onclick="document.magic.action='http://www.google.com/search';return document.magic.submit();"><B>Search Google</B></a>
</form>
0
 
ZvonkoSystems architectCommented:


<a href="../../SimpleCredits.cfm" onClick="this.disabled=true;this.innerHTML='Please wait...';document.forms[0].submit();"><B>Simple Credits</B></a>

The sequence is always that onClick of the link is completely executed first before the page is redirectd to href destination. but... that scenario is not a good idea because you do not know how the web server handles the submitted form when the response page is killed by a page redirect. Most times is the submit handled correct on web server side, but you have disturebed the submit response page.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ethanjohnsonsAuthor Commented:
This does not submit the form.
onClick="this.disabled=true;this.innerHTML='Please wait...';document.forms[0].submit();"

No error returns though.    Any ideas?
0
 
ZvonkoSystems architectCommented:
That what I said before: you cannot have it both.
Either the submit kills the redirection or redirection kills the submit.
Here a demo:
<form action="javascript:alert(33)">
<input type=text name=myField value=myVal>
</form>

<a href="http://www.experts-exchange.com/" onClick="this.disabled=true;this.innerHTML='Please wait...';document.forms[0].submit();//location=this.href"><B>Simple Credits</B></a>


If you remove the comment slashes // , the you loose the alert()  but get EE page.



0
 
callrsCommented:
Updated demo at
http://www.experts-exchange.com/Web/Web_Languages/Q_21905916.html     Web Languages: Auto Stop Loading Script ?

I don't know as much javascript Zvonko though.  But let me know if the demo does what you need or not...

Does innerHTML work in FF?

0
 
ethanjohnsonsAuthor Commented:
I think the big difference is href="#" vs href="../../SimpleCredits.cfm".

href="#" onclick="document.magic.action='http://www.google.com/search';document.magic.submit();"

href="../../SimpleCredits.cfm" onClick = "document.pressed=this.value;this.disabled=true;this.value='Please wait...';this.form.submit()"

In my case, it has to submit the page FIRST, and then direct to the link (../../SimpleCredits.cfm).

Can we use a sort of IF logic here??
0
 
ZvonkoSystems architectCommented:
ethanjohnsons, both statements, the submit() and the href change the outcome what the next page on the window will show. If you do the submit, then next page on the same window will be the submit response. If you let the link continue to change the window URL then the next page cannot be the submit response. So you cannot have it in a sequence.

The sequence way of doing that stuff you want to do is to have a hidden form field where you can copy the href value. Then the submit form processor can redirect  the submit response to that target URL. But that redirect cannot be done on browser side by script. It has to be done on server side by ASP, PHP, Perl or whatever CGI process your form submit.

0
 
callrsCommented:
Was able to do it...but only by setting target=_blank in the form. Meaning that the submit opens a new window, while the original window gets the href.
Without a new window target, then as Zvonko indicated, either one or the other ends up in the window.

Is there a way of targeting to a _blank hidden window? Or failing that, then to target to the tiniest window possible & then close it immediately?
0
 
ZvonkoSystems architectCommented:
I hate this. You propose something what I wanted to propose when I wrote this statement: "So you cannot have it in a sequence."

You can have it in a sequence by server side redirect (easy), and you can do the sequence on browser side by a much bigger investment of efforts for the serialization.
The sequence goes like this:
1.) your form need to have a target set to the NAME of a hidden iframe on the same page.
2.) your link needs to store the href clicked in a global script var and call the form submit()
3.) your iframe needs to check for that global var and if the var is not empty redirect the parent page to stored href location.

The reson for the iframe onload var check for empty var is that onload fires also by the initial parent page load and not only when the form is submited to that iframe.

You see the overhead for that sequence serialization? Therefore I stated: "So you cannot have it in a sequence." ;-)

0
 
ethanjohnsonsAuthor Commented:
>> You can have it in a sequence by server side redirect (easy)

How do you do this?
0
 
ZvonkoSystems architectCommented:
The form tag itself has an action= attribute. That property calls a script on server side to process the submitted form data.
Most times is that form submit data processor doing beside the form data storing into a repository like a database also doing a submit data feedback, like ThankYou text display. If you want to redirect the reponse page to a new location, then you have to use a html redirect feature which is sent as page header. But you can send html page header only when no page text is sent before the header (make sense).
So the easy part of server side redirect looks like this:
1.) your for action= script process all form data and does no document.write
2.) after processing is done does the action= script look for a form field for the new target addres
3.) the script redirects to that target by calling the redirect header creation method.
In ASP is that redirect done like this:
<%
  Response.Redirect  Request.Form("TargetURL"))
%>

0
 
ethanjohnsonsAuthor Commented:
this is in ColdFusion.  I am unsure what needs to be done.
0
 
ZvonkoSystems architectCommented:
Redirection works in ColdFucion like this:

 <cflocation url="#Form.TargetURL#">





0
 
ethanjohnsonsAuthor Commented:
So, what you are saying is making:

1) <a href="#" onClick="this.disabled=true;this.innerHTML='Please wait...';document.forms[0].submit();//location=this.href"><B>Simple Credits</B></a>

and then

2) <cflocation url="../../SimpleCredits.cfm"> ?
0
 
ZvonkoSystems architectCommented:
Look on your page where your form is that you want to submit (in browser). There is a <form> tag.
Add a field below that form tag with type=hidden and name=TargetURL
Like this in html:
<form name="yourCFform" action="yourpage.cf">
<input type="hidden" name="TargetURL">


And your link looks then like this:

<a href="#" onClick="this.disabled=true;this.innerHTML='Please wait...';f=document.forms[0];f.TargetURL=this.href;f.submit();return false"><B>Simple Credits</B></a>

And on the action= CF page you need this redirect:

<cflocation url="#Form.TargetURL#">


JavaScript is CaseSensitive, so use the same Upper/Lower chars for field names and script assignments.






0
 
ethanjohnsonsAuthor Commented:
In js, can we do this?

If the link (<a href="#" onClick="this.disabled=true;this.innerHTML='Please wait...';f=document.forms[0];f.TargetURL=this.href;f.submit();return false"><B>Simple Credits</B></a>) is clicked,

let the Browser see <cflocation url="#Form.TargetURL#">.

Otherwise, let it NOT see <cflocation url="#Form.TargetURL#">.
0
 
ZvonkoSystems architectCommented:
I am not ColdFusion programmer, but isnt there something like:
<cfif #Form.TargetURL# GT "">
  <cflocation url="#Form.TargetURL#">
</cfif>

0
 
ethanjohnsonsAuthor Commented:
but, it doesn't figure whether the link is CLICKED or not.
So, js can't do that at all?
0
 
ZvonkoSystems architectCommented:
OK, on the form where the link is, there is also a hidden form field named TrgetURL.
If no link is clicked, then is the hidden field empty value.
If the link is clicked, then is the link href copied to that hidden field with the name TargetURL
If the Form.TargetURL is not empty on ColdFusion side at form submit time, then does ColdFusion redirect you to taht target URL.

0
 
ethanjohnsonsAuthor Commented:
that helps!
0
 
ZvonkoSystems architectCommented:
fine that you can decode my English :-)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now