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

by 6 replies
7
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.
#programming #clicks #execute #fix #form #image #requiring #submit
  • 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?
    • [1] reply
    • Optin skin.

      I changed it to use <button> code to execute and I'm still seeing the same error on my end. =/
  • Use Uploadify (I can't post link, so google it)
    You'll have instant upload with progressbar.
    It's pretty easy to use.
    • [1] reply
  • 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>
    • [1] reply
    • Thanks for the reply. I tried both methods and neither work.

      So frustrating! =(
  • Banned
    [DELETED]
Join the discussion

Next Topics on Trending Feed