Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member waynarchy's Avatar
    Join Date
    Jun 2005
    Posts
    28
    Member #
    10428
    Hi there

    I hope someone can help. I'm sure its just a small thing, but I haven't been able to get it right.

    I'm working on this site: http://www.biblewhereur.com

    The subscription form on the homepage is the form in question. I need to add a "terms and Conditions" checkbox that validates, before submitting the form.

    This is the code for the form:
    Code:
      <!-- BEGIN WEBFORM -->
      <form name="webForm" id="webForm">
        <p>Phone Number:(eg: 12125551212)
          <input id="msisdn" name="msisdn" value="Phone Number" type="text" />
          <br />
        Carrier:
        <select id="carrier" name="carrier">
          <option value="31002"> AT&amp;T</option>
          <option value="31003"> Verizon Wireless</option>
          <option value="31004"> T-Mobile®</option>
          <option value="31005"> Sprint</option>
          <option value="31006"> Cellular One/Dobson</option>
          <option value="31007"> Nextel</option>
          <option value="31008"> Boost</option>
          <option value="31009"> Alltel</option>
          <option value="31010"> Virgin Mobile</option>
          <option value="31012"> US Cellular</option>
        </select>
        <br />
        <input id="subscribe" name="subscribe" value="yes" type="radio" />
        Subscribe
        <input id="subscribe" name="subscribe" value="no" type="radio" />
        Unsubscribe<br />
        <label>
        <input type="checkbox" name="terms" id="terms" />
        I accept Terms and Conditions</label><br />
          <input id="button" name="button" value="Submit" onclick="WebOptin(this.form.msisdn.value,  this.form.carrier.options[this.form.carrier.selectedIndex].value)" type="button" />
        </p>
      </form>
      <!-- END WEBFORM -->
    <
    I have found this code, to validate the checkbox has been checked:
    Code:
    function ValidateForm(form){
    ErrorText= "";
    if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; }
    if (ErrorText= "") { form.submit() }
    }
    
    <form name="feedback" action="mailto:webgimmicks@email.com" method=post>
    Your Gender: <input type="checkbox" name="terms" value="Yes"> Yes
    <input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
    <input type="reset" value="Reset">
    </form>
    What I'm confused about is mainly the 'onClick' variable. How do I combine the two, so that it first validates, then submits??

    The form has script that goes in the head tags as well. Please let me know if you will need that to assist.

    thanks in advance.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hello.

    I have made an example for you.

    It uses the onsubmit event on the form tag. Which pretty much gives you the same effect as having the onclick event on the submit button.

    If you submit this form without clicking the checkbox you will receive an error message and the form will not submit.

    HTML Code:
    <html>
    
    <head>
    
    	<title>Checkbox</title>
    
    	<script type="text/javascript">
    
    		validateForm = function(elem_id)
    		{
    			if(document.getElementById( elem_id ).checked == true)
    			{
    				return true;
    			}
    			else
    			{
    				window.alert( 'You did not agree to my conditions, that makes me angry' );
    				return false;
    			}
    		return false;
    		}
    
    	</script>
    
    </head>
    
    <body>
    
    	<form name="example" action="process.php" method="post" onsubmit="return validateForm( 'tac' );">
    		<p>Please click the textbox below.</p>
    		<p><input type="checkbox" name="tac" id="tac" /> I agree to your conditions, just give me what I want!</p>
    
    		<input type="submit" name="submit" value="Do something.." />
    	</form>
    
    </body>
    
    </html>

  4. #3
    Junior Member waynarchy's Avatar
    Join Date
    Jun 2005
    Posts
    28
    Member #
    10428
    thank you very much.

    Do I need to have a .php page to call, or would it work if I replace "process.php" with this code:
    Code:
    "WebOptin(this.form.msisdn.value,  this.form.carrier.options[this.form.carrier.selectedIndex].value)"

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Well if thats what you want the form to do when it passes your validation (ensuring the checkbox is checked) then you do not need to have the form submit to any page.

    So you can simply delete the action="" and method attributes from the form, see below.

    HTML Code:
    <form name="example" onsubmit="return validateForm( 'tac' );">

  6. #5
    Junior Member waynarchy's Avatar
    Join Date
    Jun 2005
    Posts
    28
    Member #
    10428
    Oh, I see. thanks!

    testing it now and will post result shortly.

  7. #6
    Junior Member waynarchy's Avatar
    Join Date
    Jun 2005
    Posts
    28
    Member #
    10428
    I must be doing something wrong, as it is submitting even if the box isn't checked.

    Please can you have a look at the code, and see whats wrong. Thank you for your time!

    This is in the head of index.php:

    Code:
    <!-- BEGIN WebOptin SCRIPT -->
    
    <script type="text/javascript" src="http://instaconnect.golivemobile.com/js/icjsrequest.js"></script>
    
    <script language="javascript">
    
     
    
    function WebOptin(_msisdn, _carrier) {
    
      var req = new InstaConnJSRequest();
    
      
    
      var _form = window.document.forms["webForm"];
    
      var _source = document.location;  
    
      var _keyword = '';
    
      
    
      for(var i=0; i < _form.length; i++) {
    
                var _type = _form.elements[i].type;
    
                
    
        if((_type == "radio") && (_form.elements[i].checked))  
    
                  _subscribe = _form.elements[i].value;    
    
      }
    
                
    
      if(_subscribe=='yes') _keyword = 'YES+BIBLE';
    
      else _keyword = 'STOP+BIBLE';
    
                
    
      req.onreadystatechange = function() {
    
                if (req.readyState == 4) {
    
                  if(req.responseJS.rec > 0) { 
    
                            alert(req.responseJS.responsetext);                                 
    
                  } else { alert(req.responseJS.error); }
    
                }
    
      }
    
      
    
      req.caching = false;
    
      req.open(null, 'http://instaconnect.golivemobile.com/include/w2m.inc.php', true);
    
                
    
      var data = {   
    
                msisdn: _msisdn,
    
                carrier: _carrier, 
    
                host: escape(_source), 
    
                keyword: _keyword 
    
      };
    
                
    
      req.send( data );
    
    }
    
    <!-- SCRIPT from forum -->
    validateForm = function(elem_id)
    		{
    			if(document.getElementById( elem_id ).checked == true)
    			{
    				return true;
    			}
    			else
    			{
    				window.alert( 'Please click the checkbox to accept terms and Conditions' );
    				return false;
    			}
    		return false;
    		}
    
                
    
    </script>
    
    <!-- END WebOptin SCRIPT -->
    And this is in the HTML of the page:
    Code:
    <!-- BEGIN WEBFORM -->
      <form name="webForm" id="webForm" onsubmit="return validateForm( 'terms' );">
        <p>Phone Number:(eg: 12125551212)
          <input id="msisdn" name="msisdn" value="Phone Number" type="text" />
          <br />
        Carrier:
        <select id="carrier" name="carrier">
          <option value="31002"> AT&amp;T</option>
          <option value="31003"> Verizon Wireless</option>
          <option value="31004"> T-Mobile®</option>
          <option value="31005"> Sprint</option>
          <option value="31006"> Cellular One/Dobson</option>
          <option value="31007"> Nextel</option>
          <option value="31008"> Boost</option>
          <option value="31009"> Alltel</option>
          <option value="31010"> Virgin Mobile</option>
          <option value="31012"> US Cellular</option>
        </select>
        <br />
        <input id="subscribe" name="subscribe" value="yes" type="radio" />
        Subscribe
        <input id="subscribe" name="subscribe" value="no" type="radio" />
        Unsubscribe<br />
        <input type="checkbox" name="terms" id="terms" />
        I accept Terms and Conditions<br />
        <input id="button" name="button" value="Submit" onclick="WebOptin(this.form.msisdn.value,  this.form.carrier.options[this.form.carrier.selectedIndex].value)" type="button" />
        </p>
      </form>
      <!-- END WEBFORM -->

  8. #7
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    It is doing that because you do not have a submit button, you have a normal button acting as a submit button.

    All you have to do is take out the onsubmit part of the form tag and add it to your button.

    See below.
    HTML Code:
      <form name="webForm" id="webForm">
        <p>Phone Number:(eg: 12125551212)
          <input id="msisdn" name="msisdn" value="Phone Number" type="text" />
          <br />
        Carrier:
        <select id="carrier" name="carrier">
          <option value="31002"> AT&amp;T</option>
          <option value="31003"> Verizon Wireless</option>
          <option value="31004"> T-Mobile®</option>
          <option value="31005"> Sprint</option>
          <option value="31006"> Cellular One/Dobson</option>
          <option value="31007"> Nextel</option>
          <option value="31008"> Boost</option>
          <option value="31009"> Alltel</option>
          <option value="31010"> Virgin Mobile</option>
          <option value="31012"> US Cellular</option>
        </select>
        <br />
        <input id="subscribe" name="subscribe" value="yes" type="radio" />
        Subscribe
        <input id="subscribe" name="subscribe" value="no" type="radio" />
        Unsubscribe<br />
        <input type="checkbox" name="terms" id="terms" />
        I accept Terms and Conditions<br />
        <input id="button" name="button" value="Submit" onclick="WebOptin(this.form.msisdn.value,  this.form.carrier.options[this.form.carrier.selectedIndex].value), return validateForm( 'terms' );" type="button" />
        </p>
      </form>
    When you click the button 2 functions will be called. WebOptin and validateForm


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com