Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Assitance needed JavaScript

    Very new to Javascript. I have a form that I would like to submit the data to my autoresponder. Pretty simple, right? The code below does submit to the autoresponder but the data fields are empty.

    Thanks for your help

    Code:
    <script type="text/javascript">var switchTo5x=true;</script>
    
    <script language="javascript">
    		function submitform()
    	    {
    		document.getElementById('crxs7s').submit();	
    		}
    </script>
    
    <!-- FORM ACTIONS -->
            <form action="http://LINKTOAUTOREPONDER/crxs7s" name="crxs7s" id="crxs7s" method="get" />
              <input name="first_name" id="first_name" value="First Name" type="hidden" />
              <input name="email_address" id="email_address" value="Email Address" type="hidden" />
              <input name="state" id="state" value="State or Province" type="hidden" />
              
                	<!-- Display the FORM & TEXT -->
                    <div class="paddL23">
                      <input class="inp" value="First Name" name="first_name" id="first_name" onClick="if(this.value==document.getElementById('first_name').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('first_name').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <div class="pad-inp">
                      <input class="inp" value="Email Address" name="email" id="email_address" onClick="if(this.value==document.getElementById('email_address').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('email_address').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <div class="pad-inp">
                      <input class="inp" value="State or Province" name="state" id="state" onClick="if(this.value==document.getElementById('state').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('state').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <!-- Graphical FORM SUBMIT Button -->
                    <div class="pad-sub">
                      <div class="sub-but">
                        <div class="sub-txt fac">
                        <a href="javascript:void(0)" onClick="submitform()">Get Instant Access</a></div>
                      </div>
                    </div>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    You have assigned the same ids to your hidden fields as the ones which the user is to fill out. ids must be unique. It is the defined and unchanged values of the hidden fields which are being submitted.

    Change the ids of your hidden fields and all then ought to be well. But the hidden fields seem to have no purpose.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You have assigned the same ids to your hidden fields as the ones which the user is to fill out. ids must be unique. It is the defined and unchanged values of the hidden fields which are being submitted.

    Change the ids of your hidden fields and all then ought to be well. But the hidden fields seem to have no purpose.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    By your suggestions I have made some changes and commented out the hidden fields. To no avail, I still get the same results. The autoresponder checks for mandatory fields "email_address" and "first_name".

    Code:
    <script type="text/javascript">var switchTo5x=true;</script>
    
    <script type = "text/javascript">
    		function submitform()
    	    {
    		document.getElementById('crxs7s').submit();	
    		}
    </script>
    
    <!-- FORM ACTIONS -->
            <form action="http://LINKTOAUTORESPONDER/crxs7s" name="crxs7s" id="crxs7s" method="get" />
              <!-- input name="first_name" id="first_name" value="First Name" type="hidden" />
              <input name="email_address" id="email_address" value="Email Address" type="hidden" />
              <input name="state" id="state" value="State or Province" type="hidden" / -->
              
                	<!-- Display the FORM & TEXT -->
                    <div class="paddL23">
                      <input class="inp" value="First Name" name="first_name" id="first_name" onClick="if(this.value==document.getElementById('first_name').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('first_name').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <div class="pad-inp">
                      <input class="inp" value="Email Address" name="email_address" id="email_address" onClick="if(this.value==document.getElementById('email_address').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('email_address').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <div class="pad-inp">
                      <input class="inp" value="State or Province" name="state" id="state" onClick="if(this.value==document.getElementById('state').value) this.value=''" onBlur="if(this.value==''){this.value=document.getElementById('state').value}" style="padding:2px 10px 0px 10px;" type="text" />
                    </div>
                    
                    <!-- Graphical FORM SUBMIT Button -->
                    <div class="pad-sub">
                      <div class="sub-but">
                        <div class="sub-txt fac">
                        <a href="javascript:void(0)" onClick="submitform()">Get Instant Access</a></div>
                      </div>
                    </div>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    This makes ZERO sense:
    Code:
    <input class="inp" value="First Name" name="first_name" id="first_name"
          onClick="if(this.value==document.getElementById('first_name').value) this.value=''"
          onBlur="if(this.value==''){this.value=document.getElementById('first_name').value}" 
          style="padding:2px 10px 0px 10px;" type="text" />
    document.getElementById('first_name') and this are ONE AND THE SAME THING!

    So you essentially wrote:
    Code:
        onclick = "if (this.value == this.value)..."
    and
        onblur="if ( this.value=-'') this.value=this.value;"
    which is utterly pointless.

    If you are going to do this, use
    Code:
    <input class="inp" value="First Name" name="first_name" 
          onfocus="if(this.value=='First Name') this.value=''; "
          onchange="if(this.value=='') this.value = 'First Name';"
          style="padding:2px 10px 0px 10px;" type="text" />
    And there's no reason at all to give the field an id.
    Last edited by Old Pedant; 05-06-2013 at 08:09 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    This is also wrong:
    Code:
    <a href="javascript:void(0)" onClick="submitform()">Get Instant Access</a>
    You are surely causing problems by that "javascript:" in the href.

    Just use
    Code:
    <a href="#" onclick="submitform()">Get Instant Access</a>
    But a better answer would be to simply use[code]
    Code:
    <input type="submit" value="Get Instant Access" />
    If you don't want that submit button to LOOK like a button, just use CSS to style it to look like an <a>.

    Example:
    Code:
    <input type="submit" value="Get Instant Access"
     style="border: none; background-color: transparent; text-decoration: underline;"/>
    Or, possibly easier, use something like
    Code:
    <button type="submit">Get Instant Access</button>
    and now the stylings available are even more flexible.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #6
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you for the help.

    Let me explain what I want this form to do and show you a sample.

    The form should show the text field in the box "First Name". When the box
    has focus the text disappears. When the box does not have focus and the
    user has not entered any data the text field "First Name" Reappears.

    The sample code comes from a functioning site, I removed the validation
    and some of the input forms, my autoresponder does the validation.

    Sample page: https://imglobal.me/3650/c/163

    My test page: http://onlinemoneyworks.com/capture/test.htm

    Viewing the code on these page will give a better example of what I am
    trying to accomplish.

    When I tried your code below, it did not function.

    Code:
    <input class="inp" value="First Name" name="first_name" 
          onfocus="if(this.value=='First Name') this.value=''; "
          onchange="if(this.value=='') this.value = 'First Name';"
          style="padding:2px 10px 0px 10px;" type="text" />
    The other code for the submit button works but so did the old one.

    Code:
    <input type="submit" value="Get Instant Access" />
    If you try to submit some Dummy values in My test page: http://onlinemoneyworks.com/capture/test.htm you will see the response from the autoresponder.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Sorry. You were right to be using onblur and it was my error to try to change that to onchange. Using onfocus, however, *IS* better than onclick because the user might arrive at the input field using just the TAB key, for example.

    So:
    Code:
    <input class="inp" value="First Name" name="first_name" 
          onfocus="if(this.value=='First Name') this.value=''; "
          onblur="if(this.value=='') this.value = 'First Name';"
          style="padding:2px 10px 0px 10px;" type="text" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    But you also could have fixed your code by simply NOT duplicating all those names and ids.
    The fields to be submitted need names, *NOT* ids.
    The hidden fields need ids, *NOT* names.

    So:
    Code:
    <form  name="crxs7s" id="crxs7s" method="get">
         <input id="first_name" value="First Name" type="hidden">
         <input id="email_address" value="Email Address" type="hidden">
         <input id="state" value="State or Province" type="hidden">
              
         <div class="paddL23">
              <input class="inp" value="First Name" name="first_name" 
                     onfocus="if(this.value==document.getElementById('first_name').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('first_name').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="Email Address" name="email" 
                     onfocus="if(this.value==document.getElementById('email_address').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('email_address').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="State or Province" name="state" 
                     onfocus="if(this.value==document.getElementById('state').value) this.value=''" 
                     onblur="if(this.value==''){this.value=document.getElementById('state').value}" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
                    
         <!-- Graphical SUBMIT Button -->
         <div class="pad-sub">
              <div class="sub-but">
                  <div class="sub-txt fac">
                       <button type="submit">Get Instant Access</button>
                  </div>
              </div>
         <div>
                        <div class="fl"><img src="http://onlinemoneyworks.com/capture/images/lock.png"></div>
                        <div class="text3">We respect your Privacy, Your details will never be shared with a third party</div>
                        <div class="cls"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div><img src="http://onlinemoneyworks.com/capture/images/in-box-bot.jpg" alt="in-box-bot"></div>
                <div><img src="http://onlinemoneyworks.com/capture/images/in-box-shadow.png" alt="shadow"></div>
              </div>
            </form>
    You don't have to use <button> as I have, instead of the ugly <a>, but give it a shot. I'll bet it works.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #9
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    But you also could have fixed your code by simply NOT duplicating all those names and ids.
    The fields to be submitted need names, *NOT* ids.
    The hidden fields need ids, *NOT* names.

    So:
    Code:
    <form  name="crxs7s" id="crxs7s" method="get">
         <input id="first_name" value="First Name" type="hidden">
         <input id="email_address" value="Email Address" type="hidden">
         <input id="state" value="State or Province" type="hidden">
              
         <div class="paddL23">
              <input class="inp" value="First Name" name="first_name" 
                     onfocus="if(this.value==document.getElementById('first_name').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('first_name').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="Email Address" name="email" 
                     onfocus="if(this.value==document.getElementById('email_address').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('email_address').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="State or Province" name="state" 
                     onfocus="if(this.value==document.getElementById('state').value) this.value=''" 
                     onblur="if(this.value==''){this.value=document.getElementById('state').value}" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
                    
         <!-- Graphical SUBMIT Button -->
         <div class="pad-sub">
              <div class="sub-but">
                  <div class="sub-txt fac">
                       <button type="submit">Get Instant Access</button>
                  </div>
              </div>
         <div>
                        <div class="fl"><img src="http://onlinemoneyworks.com/capture/images/lock.png"></div>
                        <div class="text3">We respect your Privacy, Your details will never be shared with a third party</div>
                        <div class="cls"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div><img src="http://onlinemoneyworks.com/capture/images/in-box-bot.jpg" alt="in-box-bot"></div>
                <div><img src="http://onlinemoneyworks.com/capture/images/in-box-shadow.png" alt="shadow"></div>
              </div>
            </form>
    You don't have to use <button> as I have, instead of the ugly <a>, but give it a shot. I'll bet it works.
    Very close now, your code works even faster

    But, the html form provided by my autoresponder works perfectly but does not use JavaScript.
    Code:
    <!-- subscription_form_crxs7s -->
    <div id='subscription_form_crxs7s'>
    
    <form method='post' action='http://www.onlinemoneyworks.com/arpreach/a.php/sub/1/crxs7s'>
    <div align="center"><label>First name</label>
    </div>
    <div align="center">
    <input type='text' id='first_name' name='first_name' value=''>
    </div>
    <div align="center"><label>Email address</label>
    </div>
    <div align="center">
    <input type='text' id='email_address' name='email_address' value=''>
    </div>
    <div align="center">
    <label>State or province</label></div>
    <div align="center">
    <input type='text' id='state' name='state' value=''>
    </div>
    <div align="center"><input type='submit' value='Submit'></div>
    </form>
    </div>
    <!-- subscription_form_crxs7s -->
    When I use the following code the autoresponder reports the same error message. (Email Address is required) Could maybe the autoresponder require the ID?
    Code:
    <!-- FORM ACTIONS -->
    	<form  name="crxs7s" id="crxs7s" method="get" action="http://www.onlinemoneyworks.com/arpreach/a.php/sub/1/crxs7s">
        	<input id="first_name" value="First Name" type="hidden">
        	<input id="email_address" value="Email Address" type="hidden">
         	<input id="state" value="State or Province" type="hidden">
              
         <div class="paddL23">
              <input class="inp" value="First Name" name="first_name" 
                     onfocus="if(this.value==document.getElementById('first_name').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('first_name').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="Email Address" name="email" 
                     onfocus="if(this.value==document.getElementById('email_address').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('email_address').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
         <div class="pad-inp">
              <input class="inp" value="State or Province" name="state" 
                     onfocus="if(this.value==document.getElementById('state').value) this.value=''" 
                     onblur="if(this.value==''){this.value=document.getElementById('state').value}" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
                    
                    <!-- Graphical SUBMIT Button -->
                    <div class="pad-sub">
                      <div class="sub-but">
                        <div class="sub-txt fac">
                        <a href="#" onclick="submitform()">Get Instant Access</a></div>
                        <!-- input type="submit" value="Get Instant Access" / -->
                        <!-- button type="submit">Get Instant Access</button -->
                        <!-- a href="javascript:void(0)" onClick="submitform()">Get Instant Access</a></div -->
                      </div>
    My SUBMIT button is already a graphical display. "Get Instant Access" text displays in the button.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    No, IDs are invisible to server-side code.

    Only the names of fields are sent to the server.

    Possibly the field should be named something *OTHER* than just "email"???

    No, comparing the working page to your code, indeed it also uses just "email".

    *HOWEVER*.... It does *NOT* use "first_name"!! It uses "fname".

    Perhaps it is just the error message from the autoresponder that is bogus? It actually is missing "fname" but reports it incorrectly?

    Hmmm...but your action= is nothing like the one that works, so who knows?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #11
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    No, IDs are invisible to server-side code.

    Only the names of fields are sent to the server.

    Possibly the field should be named something *OTHER* than just "email"???

    No, comparing the working page to your code, indeed it also uses just "email".

    *HOWEVER*.... It does *NOT* use "first_name"!! It uses "fname".

    Perhaps it is just the error message from the autoresponder that is bogus? It actually is missing "fname" but reports it incorrectly?

    Hmmm...but your action= is nothing like the one that works, so who knows?
    The working page can only be used as a comparison because my site uses a different autoresponder. My autoresponder is hosted on my domain, same location as the capture page.

    What is really making me crazy is the pure HTML form works perfectly, with the javascript it fails validation. I cannot change the validation for the 'email_address' as it is required and I have also set 'first_name' as required.

    Is it possible that this form of submit does not capture the '@' in the email address?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Quote Originally Posted by rlbewick View Post
    Is it possible that this form of submit does not capture the '@' in the email address?
    Nope.

    Maybe it's time to DEBUG using your server-side code?

    Assuming it is PHP code, why not simply add in:
    Code:
    echo "Email value from form is ::" . $_POST["email"] . "..<hr/>";
    ??

    And maybe do the same for the other fields, just in case?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rlbewick (05-08-2013)

  • #13
    New to the CF scene
    Join Date
    May 2013
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I should have looked closer at the code before I said it did not work.

    The issues was in the following code...
    Code:
    </div>
         <div class="pad-inp">
              <input class="inp" value="Email Address" name="email" 
                     onfocus="if(this.value==document.getElementById('email_address').value) this.value=''" 
                     onblur="if(this.value=='')this.value=document.getElementById('email_address').value" 
                     style="padding:2px 10px 0px 10px;" type="text">
         </div>
    The name="email' should have been name="email_address"

    Works perfectly now!

    Thank you so much for your help :-)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •