Link to home
Start Free TrialLog in
Avatar of ethanjohnsons
ethanjohnsons

asked on

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).
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Like this:

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

Avatar of callrs
callrs

<!-- 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>


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

Avatar of ethanjohnsons

ASKER

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

No error returns though.    Any ideas?
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="https://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.



Updated demo at
https://www.experts-exchange.com/questions/21905916/Auto-Stop-Loading-Script.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?

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??
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.

SOLUTION
Avatar of callrs
callrs

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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." ;-)

>> You can have it in a sequence by server side redirect (easy)

How do you do this?
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"))
%>

this is in ColdFusion.  I am unsure what needs to be done.
Redirection works in ColdFucion like this:

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





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"> ?
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.






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#">.
I am not ColdFusion programmer, but isnt there something like:
<cfif #Form.TargetURL# GT "">
  <cflocation url="#Form.TargetURL#">
</cfif>

but, it doesn't figure whether the link is CLICKED or not.
So, js can't do that at all?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
that helps!
fine that you can decode my English :-)