Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

Javascript timing?/caching? problem

I'm having an issue with what appears to be a caching or timing issue with javascript.

Essentially I have a form page - in the head is the following function:

<script language="Javascript">
<!--
function mailThis()
{
        alert("debug");
     if (document.getElementById("eAddress").value.length < 8){
          alert("Please enter a valid email address.");
          return false;
          }
     document.getElementById("htmlString").value = document.getElementById("mailpart").innerHTML;
        document.getElementById('inv').submit();
}
//-->
</script>

mailPart is a div surrounding some of the HTML in the body of the page, while htmlString is a hidden input in a form, the declaration of which looks like this:

<form action="email.asp" id ="inv" method="POST">

<input type="hidden" id="htmlString" name="htmlString" value="">
<INPUT TYPE=button onClick="mailThis()" VALUE="Email Results">
</p>
</form>

So the idea is pretty obvious - on clicking the button I want the function to transfer the div contents to the hidden input and submit the form to email.asp.

The problem:
*Most* of the time it works, but sometimes it seems as if some of the javascript is selectively not being processed.  There is no pure submit button for the form - the only way to get to email.asp is to run the mailThis() function and submit programatically - yet sometimes when I click the button I end up at email.asp without even seeing the alert box - in these cases, the div contents have also not been copied to the hidden input...  When this happens it usually does so the first time I click the "Email Results" button.  If I use the back button on the browser and click it again I get the alert and the content copy.
0
baal32
Asked:
baal32
  • 2
1 Solution
 
baal32Author Commented:
I should also note that I'm not really looking for cross-browser compataibility or better ways to implement the same functionality.  Im only looking for an answer to my specific problem.
0
 
gator4lifeCommented:
Instead of using an <input type="button"> element to submit the form through script, you should use an <input type="submit"> element and call the mailThis() function from within the onsubmit event handler of the form.  If you are experiencing a timing problem, then the onsubmit event handler of the form element is the absolute best way to ensure that dynamic functionality you want occurs right before the form gets submitted, especially since you have validation code within the mailThis() function (i.e. validation code should always be handled through the onsubmit event handler of the form).  Here is how I would set this up:

<script type="text/javascript">
<!--
     function mailThis() {

          if (document.getElementById('eAddress').value.length < 8) {

               window.alert('Please enter a valid email address.');
               return(false);
          }

          document.getElementById('htmlString').value = document.getElementById('mailpart').innerHTML;
          return(true);
     }
//-->
</script>

<form action="email.asp" id="inv" method="post" onsubmit="return(mailThis())">
     .....
     <input type="hidden" id="htmlString" name="htmlString">
     <input type="submit" id="submit" name="submit" value="Email Results">
     .....
</form>

Let me know if you still run into problems if you try this out.

gator4life
(chomp, chomp)
0
 
baal32Author Commented:
Hi Gator

Its taking a little while because I'm still trying to reproduce the errors so I can apply your fix.  In any case I was wondering i f you might be able to explain a possible scenario (event timeline) that might account for my problems.  I still cant get over the fact that in my original code the *only* way for the form to be submitted was by calling the javascript function yet somehow it managed to submit without processing the function (the alert, the copy, etc.)  It would be my understanding that in the code no operation could be started until the previous one had completed ie.
   document.getElementById('inv').submit(); could only occur after
 document.getElementById("htmlString").value = document.getElementById("mailpart").innerHTML;
had finished its operation.
I'm raising the points for this question 10 to account for the explanation.
0

Featured Post

Industry Leaders: 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!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now