Required Feild Script + Form Submit New Window script.. HELP!

UbH · January 10, 2008

I have two scripts.

The first one is to require certain fields I have in a form are filled out.

The second one is to open a new window with height/width control of the new window.

My problem is that when the scripts are running as separate scripts I get the "fields required script" to pop up its message

if a field is not filled out, but also the new window pop up too.

The process should be

A)if you get notified a field is not filled out you must fill it out before the new window pops up.

Not

B)Pop up the new window if you get a field needs to be filled out...

So my thoughts were to combine the scripts together so that the window pops up when my field validation is complete.. but I am having trouble.. and this is why I am here.

how would I combine these two?

Script One (Form Fields Required)

var FormName = "nominationForm";
var RequiredFields = "Your_First_Name,Your_Last_Name,Your_Title,Your_Address,Your_City,Your_State,Your_Zip,Your_Telephone,Your_Email,Confirm_Email,Your_School,Your_Principal,relationship,Their_First_Name,Their_Last_Name,Their_Title,Their_District,Their_School,Their_Address,Their_City,Their_State,Their_Zip,How_Many_Years";
function ValidateRequiredFields()
{
var FieldList = RequiredFields.split(",")
var BadList = new Array();
for(var i = 0; i < FieldList.length; i++) {
var s = eval('document.' + FormName + '.' + FieldList[i] + '.value');
s = StripSpacesFromEnds(s);
if(s.length < 1) { BadList.push(FieldList[i]); }
}
if(BadList.length < 1) { return true; }
var ess = new String();
if(BadList.length > 1) { ess = 's'; }
var message = new String('\n\nThe following field' + ess + ' are required:\n');
for(var i = 0; i < BadList.length; i++) { message += '\n' + BadList[i]; }
alert(message);
return false;
}


function StripSpacesFromEnds(s)
{
while((s.indexOf(' ',0) == 0) && (s.length> 1)) {
s = s.substring(1,s.length);
}
while((s.lastIndexOf(' ') == (s.length - 1)) && (s.length> 1)) {
s = s.substring(0,(s.length - 1));
}
if((s.indexOf(' ',0) == 0) && (s.length == 1)) { s = ''; }
return s;
}

Script Two (Open New Window with Width/Height Control)

function sendme() 
{ 
    window.open("","myNewWin","width=500,height=300,toolbar=0"); 
    var a = window.setTimeout("document.nominationForm.submit();",500); 
}

emehrkay · January 10, 2008

i cleaned it up a little, but it was a pretty simple addition. I also got rid of that evil eval

function ValidateRequiredFields(){
    var FieldList   = RequiredFields.split(",")
    var BadList     = []; //no need to use the new array object here 
    var len         = FieldList.length;
    var error       = false;
    var message     = ''; //no need to use the new object here
    
    for(var i = 0; i < len; i++){
        var s = document.forms[FormName][FieldList[i]].value;
        s = StripSpacesFromEnds(s);
        if(s.length < 1){
            BadList.push(FieldList[i]);
            message += '\n' + FieldList[i];
            error = true;
        }
    }
    
    if(error){
        var ese     = (BadList.length > 1) ? 's' : '';
        var title   = '\n\nThe following field' + ess + ' are required:\n';
        alert(title + message);
    }else{
        //call your popup function
    }
}

UbH · January 16, 2008

emehrkay,

thank you for taking the time to help me with this.

I tried to implement your cleaned up version but I still get an error with IE and the script wont even validate the required fields on FF.

Here is what I have:

var FormName = "nominationForm";
var RequiredFields = "Your_First_Name,Your_Last_Name,Your_Address,Your_City,Your_State,Your_Zip,Your_Telephone,Your_Email,Confirm_Email,Your_School,Your_Principal,relationship,Their_First_Name,Their_Last_Name,Their_District,Their_School,Their_Address,Their_City,Their_State,Their_Zip,How_Many_Years";
function ValidateRequiredFields(){
    var FieldList   = RequiredFields.split(",")
    var BadList     = []; //no need to use the new array object here 
    var len         = FieldList.length;
    var error       = false;
    var message     = ''; //no need to use the new object here
    
    for(var i = 0; i < len; i++){
        var s = document.forms[FormName][FieldList[i]].value;
        s = StripSpacesFromEnds(s);
        if(s.length < 1){
            BadList.push(FieldList[i]);
            message += '\n' + FieldList[i];
            error = true;
        }
    }
    
    if(error){
        var ese     = (BadList.length > 1) ? 's' : '';
        var title   = '\n\nThe following field' + ess + ' are required:\n';
        alert(title + message);
    }else{
    function sendme() 
	{ 
		window.open("","myNewWin","width=500,height=300,toolbar=0"); 
		var a = window.setTimeout("document.nominationForm.submit();",500); 
	} 
    }
}

Here is the form that starts on line #186

<form method="POST" action="nominationSubmit.php" name="nominationForm" onsubmit="return ValidateRequiredFields();" target="myNewWin">
        <fieldset>
            <legend><strong>Nominator Contact Information</strong></legend>
            <blockquote>
            <input id="Your_First_Name" name="Your_First_Name" type="text" /> First Name<br />
            <input id="Your_Last_Name" name="Your_Last_Name" type="text" /> Last Name<br />
            <input  name="Your_Title" type="text" /> Title (if applicable)<br />
            <input  name="Your_Address" type="text" /> Address<br />
            <input  name="Your_City" type="text" /> City<br />
            <input  name="Your_State" type="text" /> State<br />
            <input  name="Your_Zip" type="text" /> Zip<br />
            <input  name="Your_Telephone" type="text" /> Telephone<br />
            <input  name="Your_Email" type="text" /> Email<br />
            <input  name="Confirm_Email" type="text" /> Email Confirmed<br />
            <input  name="Your_School" type="text" /> High School/Organization<br />
            <input  name="Your_Principal" type="text" /> Principal Name<br />
            </blockquote><br /><br />
        </fieldset>
        <fieldset>
            <legend><strong>Relationship to Nominee (Please check the appropriate box)</strong></legend>    
            <blockquote>
		  <select name="relationship">
			<option selected="selected"></option>
			<option value="School Administrator">School Administrator</option>
			<option value="Staff/Faculty">Staff/Faculty</option>
			<option value="Student's Parent">Student's Parent</option>
			<option value="Student">Student</option>
		  </select><br /><br />
             
              And/or Other:
              <input type="checkbox" onclick="javascript:InsertContent('other');"/>
		  
              <div id="other" style="display:none;">
		  If other please tell us more: 
              <input name="otherDescipt"/>
              </div>
              
		</blockquote>
            <br />

        </fieldset>
        <fieldset>
            <legend><strong>Nominee Contact Information</strong></legend>
            <blockquote>
            <input name="Their_First_Name" type="text" /> First Name<br />
            <input name="Their_Last_Name" type="text" /> Last Name<br />
            <input name="Their_Title" type="text" /> Title<br />
            <input name="Their_District" type="text" /> School District<br />
            <input name="Their_School" type="text" /> High School<br />
            <input name="Their_Address" type="text" /> School Address<br />
            <input name="Their_City" type="text" /> City<br />
            <input name="Their_State" type="text" /> State<br />
            <input name="Their_Zip" type="text" /> Zip<br /><br />
            Number of years as a college counselor: <input name="How_Many_Years" type="text" /><br />                   
            </blockquote>
        </fieldset>
        <br />
        <input style="margin-left:40em; margin-bottom:2em;" type="submit" value="Next Step" onclick="sendme();"/>
        </form>

IE's error happens upon required fields being left blank and you hit the submit button

Line: 231

Char: 1

Error: Object expected

Code:0

The funny thing is that Line:231 is

<input name="Their_Last_Name" type="text" /> Last Name<br />

Any thoughts?

emehrkay · January 16, 2008

I made a few changes - got rid of the sendme() added to the onclick of the submit button since it is called in the validate function, and corrected a few var names.

It works in all browsers that I was able to test in - safari, oprea, ie6&7, ff2

<html>
    
    <head>
        <script type="text/javascript">
        var FormName = "nominationForm";
        var RequiredFields = "Your_First_Name,Your_Last_Name,Your_Address,Your_City,Your_State,Your_Zip,Your_Telephone,Your_Email,Confirm_Email,Your_School,Your_Principal,relationship,Their_First_Name,Their_Last_Name,Their_District,Their_School,Their_Address,Their_City,Their_State,Their_Zip,How_Many_Years";
        function ValidateRequiredFields(){
            var FieldList   = RequiredFields.split(",")
            var BadList     = []; //no need to use the new array object here 
            var len         = FieldList.length;
            var error       = false;
            var message     = ''; //no need to use the new object here
            
            for(var i = 0; i < len; i++){
                var s = document.forms[FormName][FieldList[i]].value;
                s = StripSpacesFromEnds(s);
                if(s.length < 1){
                    BadList.push(FieldList[i]);
                    message += '\n' + FieldList[i];
                    error = true;
                }
            }
            
            if(error){
                var ese     = (BadList.length > 1) ? 's' : '';
                var title   = '\n\nThe following field' + ese + ' are required:\n';
                alert(title + message);
                return false;
            }else{
        			window.open("","myNewWin","width=500,height=300,toolbar=0"); 
        			var a = window.setTimeout("document.nominationForm.submit();",500); 
        	
            }
        }
        
        function StripSpacesFromEnds(s)
            {
            while((s.indexOf(' ',0) == 0) && (s.length> 1)) {
            	s = s.substring(1,s.length);
            	}
            while((s.lastIndexOf(' ') == (s.length - 1)) && (s.length> 1)) {
            	s = s.substring(0,(s.length - 1));
            	}
            if((s.indexOf(' ',0) == 0) && (s.length == 1)) { s = ''; }
            return s;
            }
        </script>
    </head>
        
    <body>
      <form method="POST" action="nominationSubmit.php" name="nominationForm" onsubmit="return ValidateRequiredFields();" target="myNewWin">
        <fieldset>
            <legend><strong>Nominator Contact Information</strong></legend>
            <blockquote>
            <input id="Your_First_Name" name="Your_First_Name" type="text" /> First Name<br />
            <input id="Your_Last_Name" name="Your_Last_Name" type="text" /> Last Name<br />
            <input  name="Your_Title" type="text" /> Title (if applicable)<br />
            <input  name="Your_Address" type="text" /> Address<br />
            <input  name="Your_City" type="text" /> City<br />
            <input  name="Your_State" type="text" /> State<br />
            <input  name="Your_Zip" type="text" /> Zip<br />
            <input  name="Your_Telephone" type="text" /> Telephone<br />
            <input  name="Your_Email" type="text" /> Email<br />
            <input  name="Confirm_Email" type="text" /> Email Confirmed<br />
            <input  name="Your_School" type="text" /> High School/Organization<br />
            <input  name="Your_Principal" type="text" /> Principal Name<br />
            </blockquote><br /><br />
        </fieldset>
        <fieldset>
            <legend><strong>Relationship to Nominee (Please check the appropriate box)</strong></legend>    
            <blockquote>
		  <select name="relationship">
			<option selected="selected"></option>
			<option value="School Administrator">School Administrator</option>
			<option value="Staff/Faculty">Staff/Faculty</option>
			<option value="Student's Parent">Student's Parent</option>
			<option value="Student">Student</option>
		  </select><br /><br />
             
              And/or Other:
              <input type="checkbox" onclick="javascript:InsertContent('other');"/>
		  
              <div id="other" style="display:none;">
		  If other please tell us more: 
              <input name="otherDescipt"/>
              </div>
              
		</blockquote>
            <br />

        </fieldset>
        <fieldset>
            <legend><strong>Nominee Contact Information</strong></legend>
            <blockquote>
            <input name="Their_First_Name" type="text" /> First Name<br />
            <input name="Their_Last_Name" type="text" /> Last Name<br />
            <input name="Their_Title" type="text" /> Title<br />
            <input name="Their_District" type="text" /> School District<br />
            <input name="Their_School" type="text" /> High School<br />
            <input name="Their_Address" type="text" /> School Address<br />
            <input name="Their_City" type="text" /> City<br />
            <input name="Their_State" type="text" /> State<br />
            <input name="Their_Zip" type="text" /> Zip<br /><br />
            Number of years as a college counselor: <input name="How_Many_Years" type="text" /><br />                   
            </blockquote>
        </fieldset>
        <br />
        <input style="margin-left:40em; margin-bottom:2em;" type="submit" value="Next Step"/>
        </form> 
    </body>
</html>

Sign In

Required Feild Script + Form Submit New Window script.. HELP!

Recommended Posts

UbH

Link to comment

Share on other sites

emehrkay

Link to comment

Share on other sites

UbH

Link to comment

Share on other sites

emehrkay

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information