7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Form submit image requiring 2 clicks to execute. How to fix?

by Robert M Gouge
6 replies
Looking for some help. I'm serving up a custom opt-in form via Optin Skin and for some reason, it's requiring two clicks of the submit image to function and I can't seem to figure out why.

Can anyone check my code and help me out?

Code:
<table style="text-align: left;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td
 style="background-image:  url(http://prosperityclicks.com/wp-content/uploads/2012/06/bg1.png);  height: 314px; width: 546px; vertical-align: top;">
      <table style="text-align: left; width: 546px; height: 45px;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
      <table style="text-align: left; width: 546px; height: 71px;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="width: 115px;"></td>
            <td
 style="background-image:  url(http://prosperityclicks.com/wp-content/uploads/2012/06/socialbg.png);  width: 410px; vertical-align: middle;">
            <table
 style="text-align: left; width: 409px; height: 24px;" border="0"
 cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td style="width: 69px;"></td>
                  <td style="width: 110px; vertical-align: middle;"
 allowtransparency="true" frameborder="0" scrolling="no"><iframe
 src="//www.facebook.com/plugins/like.php?href=%cur_url%&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=155303851207793"
 style="border: medium none ; overflow: hidden; width: 100px; height: 21px;"
 allowtransparency="true" frameborder="0" scrolling="no"></iframe>
                  </td>
                  <td style="width: 110px;"><a
 href="https://twitter.com/share" class="twitter-share-button">Tweet</a></td>
                  <td style="width: 110px;"><g:plusone
 size="medium"></g:plusone></td>
                  <td style="width: 10px;"></td>
                </tr>
              </tbody>
            </table>
            </td>
            <td style="width: 20px;"></td>
          </tr>
        </tbody>
      </table>
      <table style="text-align: left; width: 546px; height: 190px;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="width: 53px;"></td>
            <td
 style="background-image:  url(http://prosperityclicks.com/wp-content/uploads/2012/06/optinbg.png);  width: 473px; vertical-align: top;">
            <table
 style="text-align: left; width: 473px; height: 190px;"
 border="0" cellpadding="10" cellspacing="0">
              <tbody>
                <tr>
                  <td style="vertical-align: top;"><big><span
 style="font-weight: bold;">Subscribe to ProsperityClicks!</span></big><br>
Signup below to receive news and updates from Robert. You'll be alerted
anytime a new article is posted plus receive exclusive content not
available on the ProsperityClicks.com website.<br>
                  <br>
                  <br>
                  <form method="post"
 action="https://app.icontact.com/icp/signup.php"
 name="icpsignup" id="icpsignup12837"
 accept-charset="UTF-8" onsubmit="return verifyRequired12837();"><input
 name="redirect"
 value="http://www.prosperityclicks.com/subscribe-success/"
 type="hidden"><input name="errorredirect"
 value="http://www.prosperityclicks.com/subscribe-error/"
 type="hidden">
                    <div id="SignUp">
                    <table style="width: 453px; height: 60px;"
 border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td style="width: 234px;"><input
 size="30" name="fields_fname" value="First Name"></td>
                          <td style="width: 219px;"
 rowspan="2"><input type="image" value="Submit" name="Submit"  src="http://prosperityclicks.com/wp-content/uploads/2012/07/instantaccess.png"></td>
                        </tr>
                        <tr>
                          <td style="width: 234px;"><input
 size="30" name="fields_email" value="Email"></td><input type="hidden" name="listid" value="107788">
    <input type="hidden" name="specialid:107788" value="XG6W">

    <input type="hidden" name="clientid" value="951176">
    <input type="hidden" name="formid" value="12837">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="1">
                        </tr>
                      </tbody>
                    </table>
                    </div>
                  </form>
                  <script type="text/javascript">

var icpForm12837 = document.getElementById('icpsignup12837');

if (document.location.protocol === "https:")

    icpForm12837.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired12837() {
  if (icpForm12837["fields_email"].value == "") {
    icpForm12837["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }


return true;
}
</script>
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
            <td style="width: 20px;"></td>
          </tr>
        </tbody>
      </table>
      <table style="text-align: left; width: 546px; height: 1px;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
The live form can be found on this page at the end of the main content: Your "perfect" is possible. Prosperity defined. | Prosperity Clicks

Thanks in advance.
#clicks #execute #fix #form #image #requiring #submit
  • Profile picture of the author KirkMcD
    I'm not sure what is wrong yet, but with javascript disabled, the submit works fine.
    What are you using to make the form fade-in?
    {{ DiscussionBoard.errors[6675574].message }}
    • Profile picture of the author Robert M Gouge
      Originally Posted by KirkMcD View Post

      I'm not sure what is wrong yet, but with javascript disabled, the submit works fine.
      What are you using to make the form fade-in?
      Optin skin.

      I changed it to use <button> code to execute and I'm still seeing the same error on my end. =/
      {{ DiscussionBoard.errors[6676881].message }}
  • Profile picture of the author 26medias
    Use Uploadify (I can't post link, so google it)
    You'll have instant upload with progressbar.
    It's pretty easy to use.
    Signature
    600+ graphics and 200+ html templates for your WSO and sales pages!
    {{ DiscussionBoard.errors[6676026].message }}
    • Profile picture of the author Robert M Gouge
      Originally Posted by 26medias View Post

      Use Uploadify (I can't post link, so google it)
      You'll have instant upload with progressbar.
      It's pretty easy to use.
      Try reading the thread before posting.
      {{ DiscussionBoard.errors[6676889].message }}
  • Profile picture of the author hitmobi
    Hey!

    I'm sorry, i left you a comment by accident.

    What i would do is test it without the e-mail, name validation script.
    onsubmit="return verifyRequired12933();"
    This can cause problems sometimes. Your problem would be unexpected but you never know.

    By the way the function verifyRequired12933 is useless because you already have default values inside the inputs, which it checks for.

    I understand that this is probably a plugin. Maybe you can disable form validation or something and test it. If it works, there's your problem.


    If that doesn't work, i wrote you a simple workaround until you can figure out what is wrong. (i haven't tested it but it's worth a try)

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#SignUp').children('input[type="image"]').live('click',function(e){
    e.preventDefault();
    $(this).closest('form').submit();
    })
    })
    </script>
    {{ DiscussionBoard.errors[6677837].message }}
    • Profile picture of the author Robert M Gouge
      Originally Posted by hitmobi View Post

      Hey!

      I'm sorry, i left you a comment by accident.

      What i would do is test it without the e-mail, name validation script.
      onsubmit="return verifyRequired12933();"
      This can cause problems sometimes. Your problem would be unexpected but you never know.

      By the way the function verifyRequired12933 is useless because you already have default values inside the inputs, which it checks for.

      I understand that this is probably a plugin. Maybe you can disable form validation or something and test it. If it works, there's your problem.


      If that doesn't work, i wrote you a simple workaround until you can figure out what is wrong. (i haven't tested it but it's worth a try)

      <script type="text/javascript">
      jQuery(document).ready(function(){
      jQuery('#SignUp').children('input[type="image"]').live('click',function(e){
      e.preventDefault();
      $(this).closest('form').submit();
      })
      })
      </script>
      Thanks for the reply. I tried both methods and neither work.

      So frustrating! =(
      {{ DiscussionBoard.errors[6678277].message }}

Trending Topics