www.webdeveloper.com
Results 1 to 9 of 9
  1. 12-05-2010, 10:01 AM #1
    jamesd
    jamesd is offline Registered User
    Join Date
    Dec 2010
    Posts
    5

    Ajax loading image and form fields required?

    Hi,
    I am new to javascript.
    I have a form which I need to add an ajax loading image.
    My question is how do I connect it to the camcheckrequired function so that if there is an error the image doesn't show?

    Code:
    <script language=javascript>
function camcheckrequired(theform) {
	var returnval=true //by default, allow form submission
	var checkit = document.getElementById('required_fields').value;
	var requireds=theform.required_fields.value.split(";") //split using blank space as delimiter
	for (i=0; i<requireds.length; i++){
		var fieldnamez = requireds[i];
		theform[fieldnamez].style.border = ''
		if(fieldnamez.length > 1){
			if (theform[fieldnamez].type=="text" || theform[fieldnamez].type=="textarea" || theform[fieldnamez].type=="file"){
				if (theform[fieldnamez].value==""){ //if empty field
					alert("Please make sure all required fields are filled out.") //alert error message
					theform[fieldnamez].style.border = '1px solid red'
					theform[fieldnamez].focus();
					returnval=false //disallow form submission
					break //end loop. No need to continue.
				}
			}
			if (theform[fieldnamez].type=="select-one"){
				if (theform[fieldnamez].value==""){
					alert("Please make sure all required fields are filled out.") //alert error message
					theform[fieldnamez].style.border = '1px solid red'
					theform[fieldnamez].focus();
					returnval=false //disallow form submission
					break //end loop. No need to continue.
				}
			}
			if(theform[fieldnamez].name=="emailaddr"){
				var str = theform.emailaddr.value
				var at="@"
				var dot="."
				var comma=","
				var lat=str.indexOf(at)
				var lstr=str.length
				var ldot=str.indexOf(dot)
				if (str.indexOf(at)==-1){
					alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
				}
				if (str.indexOf(comma)>0){
					alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
				}
				if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
   			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
  			}
  			if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
    			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
  			}
  			if (str.indexOf(at,(lat+1))!=-1){
    			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
  			}
  			if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
    			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
  			}
  			if (str.indexOf(dot,(lat+2))==-1){
    			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
  			}
  			if (str.indexOf(" ")!=-1){
    			alert("Invalid E-mail Address")
					theform.emailaddr.style.border = '1px solid red'
					theform.emailaddr.focus();
					returnval=false //disallow form submission
					return false; 
					break //end loop. No need to continue.
				}
			}
		}
		theform[fieldnamez].style.border = ''
	}
	return returnval; 
}
</script>
    PHP Code:
    echo "  <p style=\"visibility:hidden; padding-left:5px; padding-top:5px; font-size:10px; font-family: verdana\" id=\"progress\">\n";

    echo     "   <img align=\"absmiddle\" alt=\"Loading\" id=\"progress_image\" style=\"\" src=\"images/ajax-loader.gif\"/> please wait…\n";

    echo     "  </p>\n"; 
    Code:
    <script type="text/javascript">
    function loadSubmit() {

    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.visibility = "visible";
    setTimeout("ProgressImage.src = ProgressImage.src",100);
    return true;

    } 
</script>
    Many thanks
    James
    Reply With Quote Reply With Quote
  2. 12-06-2010, 01:00 AM #2
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove the return false; statements from the script; they are redundant and will prevent this change from working
    Code:
        }
    document.getElementById('progress').style.visibility = (returnval)? 'visible': 'hidden';
    return returnval; 
}
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
  3. 12-06-2010, 04:51 PM #3
    jamesd
    jamesd is offline Registered User
    Join Date
    Dec 2010
    Posts
    5
    Thanks for the reply.
    But with this change the image doesn't show at all.
    Reply With Quote Reply With Quote
  4. 12-07-2010, 04:50 AM #4
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Reverse the 'visible' and 'hidden'
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
  5. 12-07-2010, 03:02 PM #5
    jamesd
    jamesd is offline Registered User
    Join Date
    Dec 2010
    Posts
    5
    Still no luck.
    Would there be another solution?
    Reply With Quote Reply With Quote
  6. 12-08-2010, 12:56 AM #6
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Do you have a link?
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
  7. 12-08-2010, 03:29 PM #7
    jamesd
    jamesd is offline Registered User
    Join Date
    Dec 2010
    Posts
    5
    I can't post a link as it is in a password protected area.
    Here is the full code including the form. It is the original without any changes.
    There is too much text so I am placing the form code in the next post.

    Code:
    <script language=javascript>
function camcheckrequired(theform) {
    var returnval=true //by default, allow form submission
    var checkit = document.getElementById('required_fields').value;
    var requireds=theform.required_fields.value.split(";") //split using blank space as delimiter
    for (i=0; i<requireds.length; i++){
        var fieldnamez = requireds[i];
        theform[fieldnamez].style.border = ''
        if(fieldnamez.length > 1){
            if (theform[fieldnamez].type=="text" || theform[fieldnamez].type=="textarea" || theform[fieldnamez].type=="file"){
                if (theform[fieldnamez].value==""){ //if empty field
                    alert("Please make sure all required fields are filled out.") //alert error message
                    theform[fieldnamez].style.border = '1px solid red'
                    theform[fieldnamez].focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
            }
            if (theform[fieldnamez].type=="select-one"){
                if (theform[fieldnamez].value==""){
                    alert("Please make sure all required fields are filled out.") //alert error message
                    theform[fieldnamez].style.border = '1px solid red'
                    theform[fieldnamez].focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
            }
            if(theform[fieldnamez].name=="emailaddr"){
                var str = theform.emailaddr.value
                var at="@"
                var dot="."
                var comma=","
                var lat=str.indexOf(at)
                var lstr=str.length
                var ldot=str.indexOf(dot)
                if (str.indexOf(at)==-1){
                    alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
                }
                if (str.indexOf(comma)>0){
                    alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
                }
                if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
               alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
              }
              if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
              }
              if (str.indexOf(at,(lat+1))!=-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
              }
              if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
              }
              if (str.indexOf(dot,(lat+2))==-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
              }
              if (str.indexOf(" ")!=-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    return false; 
                    break //end loop. No need to continue.
                }
            }
        }
        theform[fieldnamez].style.border = ''
    }
    return returnval; 
}
</script>


<script type="text/javascript">
    function loadSubmit() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.visibility = "visible";
    setTimeout("ProgressImage.src = ProgressImage.src",100);
    return true;
    } 
</script>
    Reply With Quote Reply With Quote
  8. 12-08-2010, 03:30 PM #8
    jamesd
    jamesd is offline Registered User
    Join Date
    Dec 2010
    Posts
    5
    Here is the form.

    Code:
    <!-- 

###########################################################
### ADD FORM NOW
###########################################################

--> 

<DIV ALIGN=CENTER>

          <form enctype="multipart/form-data" method="post"  onSubmit="return camcheckrequired(this)" action="pgm-form_submit.php"  accept-charset="utf-8">

          <input type=hidden id="EMAILTO" name=EMAILTO value="sales@mysite.com">
          <input type=hidden name=PAGEREQUEST value="Contact">
          <input type=hidden name=DATABASE value="contact">

          <input type=hidden name=PAGEGO value="2459444338">
          <input type=hidden name=RESPONSEFROM value="noreply@mysite.com">
          <input type=hidden name=SUBJECTLINE value="Thank you for your enquiry">


          <style title="userform-inline_css">
          /* Generated CSS theme for user-created form */
          
          /* Hack to fix border on floated elements in IE */
          .ie_cleardiv {
          display: block;
          clear: both;
          float: none;
          margin: 0;
          /*border: 1px dotted red;*/
          }
          
          .field-container {
          display: block;
          clear: both;
          margin-bottom: 6px;
          vertical-align: top;
          font-family: Trebuchet MS, arial, helvetica, sans-serif;
          /*border: 1px solid red;*/
          }
          .asterisk {
          color: red;
          }
          
          .instructions {
          margin-top: 0;
          color: #2e2e2e;
          font-family: Trebuchet MS, arial, helvetica, sans-serif;
          font-size: 12px;
          line-height: 1.1em !important;
          }
          
          .myform-field_title-top,
          .myform-field_title-left {
          font-size: 11px;
          font-weight: normal;
          font-family: Trebuchet MS, arial, helvetica, sans-serif;
          margin-bottom: 0;
          color: #595959;
          border-width: 1px;
          border-color: #ccc;
          border-style: hidden;
          }
          .myform-field_title-left {
          display: block;
          float: left;
          margin-right: 15px;
          /*margin-top: 12px;*/
          margin-top: 2px;
          text-align: left;
          /*border: 1px solid red;*/
          }
          
          .myform-field_title-hidden {
          display: none;
          }
          
          .myform-input_container, .myform-formfield_container {
          display: block;
          float: left;
          margin-top: 0;
          font-size: 11px;
          }
          
          #form_body_container h1,
          #form_body_container h2,
          #form_body_container h3,
          #form_body_container h4,
          #form_body_container h5,
          #form_body_container h6 {
          font-family: Trebuchet MS, arial, helvetica, sans-serif;
          margin-bottom: 0;
          }
          </style>

          <!---Begin form display-->
          <div id="form_body_container" style="text-align:  left;background-color: transparent;margin: 10;padding: 10px;width:  400;border-style: dashed;border-width: 1px;border-color: #DCDCDC;">
          <div class="field-container">
          <h2 style="color: #595959;">Contact Form</h2>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">

          <p class="myform-field_title-left" style="width: 75px;">Name:<span class="asterisk">*</span>
          </p>
          <p class="myform-input_container"><input type="text"  name="Name" style="width: 180px;" maxlength="30"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">
          <p class="myform-field_title-left" style="width: 75px;">Company:</p>

          <p class="myform-input_container"><input type="text"  name="Company" style="width: 180px;" maxlength="30"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">
          <p class="myform-field_title-left" style="width: 75px;">Address:<span class="asterisk">*</span>
          </p>
          <p class="myform-input_container"><input type="text" name="Address" style="width: 220px;"/></p>

          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">
          <p class="myform-field_title-left" style="width: 75px;"></p>
          <p class="myform-input_container"><input type="text" name="" style="width: 220px;"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>

          <div class="field-container">
          <p class="myform-field_title-left" style="width: 75px;">City:<span class="asterisk">*</span>
          </p>
          <p class="myform-input_container"><input type="text"  name="City" style="width: 220px;" maxlength="30"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">

          <p class="myform-field_title-left" style="width: 75px;">County:<span class="asterisk">*</span>
          </p>
          <p class="myform-input_container"><input type="text"  name="County" style="width: 220px;" maxlength="30"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">
          <p class="myform-field_title-left" style="width: 75px;">Comments:<span class="asterisk">*</span>

          </p>
          <p class="myform-formfield_container"><textarea  name="Comments" style="width: 220px;"></textarea></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <div class="field-container">
          <p class="myform-field_title-left" style="width:  75px;">Email Address:<span class="asterisk">*</span>

          </p>
          <p class="myform-input_container"><input type="text"  name="emailaddr" id="emailaddr" style="width: 220px;"  maxlength="50"/></p>
          <div class="ie_cleardiv">
          </div>
          </div>
          <input type="hidden" name="required_fields"  id="required_fields"  value="Name;Address;City;County;Comments;emailaddr;"/>
          <div id="userform-submit_btn-container" style="text-align: center;">
          <input class="contSubmit" onclick="return loadSubmit()"  id="userform-submit_btn" type="submit" value="Submit &gt;&gt;"  style="font-size: 10px;font-weight: bold;">
          <p style="visibility:hidden; padding-left:5px;  padding-top:5px; font-size:10px; font-family: verdana" id="progress">

          <img align="absmiddle" alt="Loading" id="progress_image" style="" src="images/ajax-loader.gif"/> please wait…
          </p>
          </div>
          
          </form>
          <script type="text/javascript">
          function mailMe(sDom, sUser){
              return(sUser+"@"+sDom.replace(/%23/g,"."));
          }
          var x = mailMe('mysite.com','sales');
          var y = document.getElementsByName("EMAILTO");
          y[0].value=x;
          </script>


</DIV>
    Reply With Quote Reply With Quote
  9. 12-09-2010, 12:56 AM #9
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Control the form validation through 1 function
    Code:
    function camcheckrequired(theform) {
    var returnval=true //by default, allow form submission
    var checkit = document.getElementById('required_fields').value;
    var requireds=theform.required_fields.value.split(";") //split using blank space as delimiter
    for (i=0; i<requireds.length; i++){
        var fieldnamez = requireds[i];
        theform[fieldnamez].style.border = ''
        if(fieldnamez.length > 1){
            if (theform[fieldnamez].type=="text" || theform[fieldnamez].type=="textarea" || theform[fieldnamez].type=="file"){
                if (theform[fieldnamez].value==""){ //if empty field
                    alert("Please make sure all required fields are filled out.") //alert error message
                    theform[fieldnamez].style.border = '1px solid red'
                    theform[fieldnamez].focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
            }
            if (theform[fieldnamez].type=="select-one"){
                if (theform[fieldnamez].value==""){
                    alert("Please make sure all required fields are filled out.") //alert error message
                    theform[fieldnamez].style.border = '1px solid red'
                    theform[fieldnamez].focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
            }
            if(theform[fieldnamez].name=="emailaddr"){
                var str = theform.emailaddr.value
                var at="@"
                var dot="."
                var comma=","
                var lat=str.indexOf(at)
                var lstr=str.length
                var ldot=str.indexOf(dot)
                if (str.indexOf(at)==-1){
                    alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
                if (str.indexOf(comma)>0){
                    alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
                if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
               alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
              }
              if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
              }
              if (str.indexOf(at,(lat+1))!=-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
              }
              if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
              }
              if (str.indexOf(dot,(lat+2))==-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
              }
              if (str.indexOf(" ")!=-1){
                alert("Invalid E-mail Address")
                    theform.emailaddr.style.border = '1px solid red'
                    theform.emailaddr.focus();
                    returnval=false //disallow form submission
                    break //end loop. No need to continue.
                }
            }
        }
        theform[fieldnamez].style.border = ''
    }
    return returnval; 
}

    function loadSubmit(f) {
    return camcheckrequired(f);
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.visibility = "visible";
    setTimeout("ProgressImage.src = ProgressImage.src",100);
    return true;
    }
    Code:
              <form enctype="multipart/form-data" method="post"  onSubmit="return loadSubmit(this)" action="pgm-form_submit.php"  accept-charset="utf-8">
.
.
          <input class="contSubmit" id="userform-submit_btn" type="submit" value="Submit &gt;&gt;"  style="font-size: 10px;font-weight: bold;">
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles