www.webdeveloper.com
Results 1 to 9 of 9

Thread: Ajax loading image and form fields required?

  1. #1
    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

  2. #2
    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

  3. #3
    Join Date
    Dec 2010
    Posts
    5
    Thanks for the reply.
    But with this change the image doesn't show at all.

  4. #4
    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

  5. #5
    Join Date
    Dec 2010
    Posts
    5
    Still no luck.
    Would there be another solution?

  6. #6
    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

  7. #7
    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>

  8. #8
    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>

  9. #9
    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

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles