Solved

onClick Submit on link (href)

Posted on 2006-07-01
22
8,381 Views
Last Modified: 2008-02-20
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
Comment
Question by:ethanjohnsons
  • 11
  • 8
  • 3
22 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17024772
Like this:

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

0
 
LVL 30

Expert Comment

by:callrs
ID: 17024828
<!-- 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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17024844


<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
 

Author Comment

by:ethanjohnsons
ID: 17025071
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17025091
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
 
LVL 30

Expert Comment

by:callrs
ID: 17025587
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
 

Author Comment

by:ethanjohnsons
ID: 17025610
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17027756
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
 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 total points
ID: 17027792
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17027847
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
 

Author Comment

by:ethanjohnsons
ID: 17028483
>> You can have it in a sequence by server side redirect (easy)

How do you do this?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 63

Expert Comment

by:Zvonko
ID: 17029016
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
 

Author Comment

by:ethanjohnsons
ID: 17029396
this is in ColdFusion.  I am unsure what needs to be done.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17029729
Redirection works in ColdFucion like this:

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





0
 

Author Comment

by:ethanjohnsons
ID: 17031383
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17031448
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
 

Author Comment

by:ethanjohnsons
ID: 17040399
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17040676
I am not ColdFusion programmer, but isnt there something like:
<cfif #Form.TargetURL# GT "">
  <cflocation url="#Form.TargetURL#">
</cfif>

0
 

Author Comment

by:ethanjohnsons
ID: 17042994
but, it doesn't figure whether the link is CLICKED or not.
So, js can't do that at all?
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 300 total points
ID: 17043069
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
 

Author Comment

by:ethanjohnsons
ID: 17063930
that helps!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17065166
fine that you can decode my English :-)
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now