Call function onSubmit

Bobs390 · Aug 16, 2004

Hi,

Basically I have 2 frames called middle and bottom the middle frame holds a form and the bottom frame holds a javascript form submit buttom.

Code:

<a href="javascript:parent.middle.document.faultform.submit()">Submit</a>

If I click on this it submits the form fine, however there is a javascript error checking procedure called validform() written into the middle page that is normally called when the submit button is on the same frame:

Code:

<form name=faultform onSubmit="return validform();" action="next_page.asp" method="post">

However whrn the js submit button is clicked in the bottom frame the validate() function isn't called, it just submits.

So my question is how can I keep the submit button in the seperate frame but call the function in the other frame as the for is submitted?

BillyRayPreachersSon · Aug 16, 2004

Calling the submit method of a form always bypasses its "onsubmit" event handler. Suggest instead doing something like this:

Code:

<a href="javascript:submitForm();">Submit</a>

and have this code in your lower frame's head section:

Code:

<script type="text/javascript">
<!--
   function submitForm() {
      var formPage = parent.middle;
      if (formPage.validForm()) formPage.document.faultform.submit();
   }
//-->
</script>

I'm not aware of the circumstances surrounding your decision to put the submit button in a different frame (you didn't give much away), but if it's not too important to do it your way, spare a thought for those without JS and/or frames capable browsers and have a "normal" submit button which doesn't need JS to function.

Hope this helps,
Dan

Bobs390 · Aug 16, 2004

I have tried that, but it doesnt seem to work. I can get half of it done, getting the form validation to run from the following code...

Code:

function submitform(){
parent.middle.document.faultform.onsubmit();
}

but then I also need the form to submit if no errors are found as I have unsussefully tried below

Code:

function submitform(){
parent.middle.document.faultform.onsubmit();
if (parent.middle.document.faultform err ==0){
parent.middle.document.faultform.submit()
else if(err==0){ return false;} 
}
}

the full validation code I obtained form a tutorial site is below, I think I should be testing for:

if (err==0){ return false;}

Any ideas?

Code:

<script type="text/javascript" language="JavaScript" > 
<!-- 
// 
//Edit these variable to suit 
// 
//Build up the required fields array 
// 
var validfields = new Array(); 
validfields[0] = "name"; 
validfields[1] = "lastname"; 
//validfields[2] = "email"; 
//validfields[3] = "telephone"; 
// 
//what type of field is it 
//choices are 
//txt = textbox or textarea 
//radio = radio group 
//chkbx = checkbox 
//dropbox = select > option 
// 
var fieldtype = new Array(); 
fieldtype[0] = "txt"; 
fieldtype[1] = "txt"; 
//fieldtype[2] = "txt"; 
//fieldtype[3] = "txt"; 
// 
//whats allowed in the field  
  
//na = not applicable use for non txt validation 
//asc = a-z A-Z 0-9 _ and space 
//textonly = a-z A-Z - no spaces 
//email = valid email address 
//num = 0-9 and spaces 
//numonly = 0-9 no spaces 
//dateUK = date in the format dd/mm/yyyy 
//dateUS = date in the format mm/dd/yyyy 
  
// 
var fieldallow = new Array(); 
fieldallow[0] = "asc"; 
fieldallow[1] = "asc"; 
//fieldallow[2] = "asc"; 
//fieldallow[3] = "num"; 

//fieldallow[8] = "dateUK"; 
// 
//set this to the same value as the name of your form 
// 
var formname = "faultform"; 
  
// 
//Bg colours
//bcol = normal
//bcolerr = error 
// 
var bcol = "white"; 
var bcolerr = "FFFFFF"; 
  // 
//Text colours 
//tcol = same as bcol
//tcolerr = error colour
// 
var tcol= "white"; 
var tcolerr = "red"; 
  
// 
//Settings for NS4x 
// 
var nserrwidth=140; 
var nserrorpos ="center";//left right center  
  
// 
//End of user settings do not edit below this line 
// 
 
/* 
 
  
 
*/ 
//browser detect 
// 
var Mac = (navigator.userAgent.indexOf("mac")!=-1) || (navigator.userAgent.indexOf("Mac")!=-1); 
var opera = (navigator.userAgent.indexOf('Opera')!=-1); 
var msie = (navigator.userAgent.indexOf('MSIE')!=-1); 
var moz = (navigator.userAgent.indexOf('Gecko')!=-1); 
var Nav4 = (document.layers);  
if (opera && msie || opera){var opera=1; msie=0;}  
if (msie && !opera){msie=1;} 
if(msie || moz){var dom =1;} 
// 
//End browser detect 
// 
  
  
  
function validform(){ 
var err=1; 
var etext=""; 
// 
//Internet Explorer 
//Mozilla 
//Netscape 6 
//Opera 
// 
if (dom || opera){ 
    var i=0; 
        //reset the styles to white 
        while (i != validfields.length ){ 
        eval("document.getElementById('err"+i+"').style.backgroundColor='"+bcol+"';"); 
        eval("document.getElementById('err"+i+"').style.color='"+tcol+"';"); 
        i++; 
        } 
  
    //check the required fields from array 
    var i=0; 
    while (i != validfields.length ){ 
    whatfield = "";     
    // 
    //text - textarea 
    if(fieldtype[i] == "txt"){ 
    whatfield = eval("document."+formname+"."+validfields[i]+".value");  
    } 
    //         
    //radio 
    if(fieldtype[i] == "radio"){ 
    radcount = eval("document."+formname+"."+validfields[i]+".length"); 
        for (var a = 0; a < radcount; a++){ 
            if (eval("document."+formname+"."+validfields[i]+"["+a+"].checked")){ 
            whatfield = "OK"; 
            } 
        } 
    } 
    // 
    //checkbox 
    if(fieldtype[i] == "chkbx"){     
        if (eval("document."+formname+"."+validfields[i]+".checked")){ 
        whatfield = "OK"; 
        }     
    } 
    // 
    //Select 
    if(fieldtype[i] == "dropbox"){         
        radstr = "document."+formname+"."+validfields[i]; 
        rs2 = eval(radstr+".options["+radstr+".selectedIndex].value");         
        whatfield = rs2;     
    }     
  
  
     
// 
// 
// Check Data  
// 
// 
  
  
//     
//email address 
    if (fieldallow[i] == "email" && whatfield != ""){ 
        var re=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i; 
        if (!re.test(whatfield)) { 
        whatfield=""; 
        } 
    } 
//END email address 
// 
  
  
// 
//a-z A-Z _ and space 
    if (fieldallow[i] == "asc" && whatfield != ""){ 
        var re = /^[\w ]+$/;  
        if (!re.test(whatfield)) {    
        whatfield=""; 
        } 
    } 
//END -z A-Z _ and space 
// 
  
  
// 
//a-z A-Z ONLY 
    if (fieldallow[i] == "textonly" && whatfield != ""){ 
        var re = /^[a-zA-Z]+$/;  
        if (!re.test(whatfield)) {    
        whatfield=""; 
        } 
    } 
//END a-z A-Z ONLY 
// 
  
  
// 
//0-9 and space 
    if (fieldallow[i] == "num" && whatfield != ""){ 
        var re = /^[0-9 ]+$/;  
        if (!re.test(whatfield)) {; 
       whatfield=""; 
        } 
    } 
//END 0-9 and space 
// 
     
// 
//0-9 
    if (fieldallow[i] == "numonly" && whatfield != ""){ 
        var re = /^[0-9]+$/;  
        if (!re.test(whatfield)) {; 
       whatfield=""; 
        } 
    } 
//END 0-9 
// 
     
// 
//Date UK and US date formats 
    if (fieldallow[i] == "dateUK" && whatfield != "" || fieldallow[i] == "dateUS" && whatfield != ""){ 
        var re = /^\d{2}\/\d{2}\/\d{4}$/;  
        var isitok=0; 
            if (re.test(whatfield)) { 
                var bits = whatfield.split("/"); 
                isitok = (bits.length == 3); // should be three components 
              if (isitok) 
               { 
                    if(fieldallow[i] == "dateUK"){ 
                     day = parseInt(bits[0]); 
                      month = parseInt(bits[1]); 
                     } 
                  
                     if(fieldallow[i] == "dateUS"){                     
                     day = parseInt(bits[1]); 
                      month = parseInt(bits[0]);                     
                     } 
                  
                 var year = parseInt(bits[2]); 
                 isitok = !isNaN(month) && (month > 0) && (month < 13) && !isNaN(day) && (day > 0) && (day < 32) && !isNaN(year) && (bits[2].length == 4); 
           } 
        } 
  
            if(!isitok || !re.test(whatfield)){ 
            whatfield="";   
           } 
//EndDate UK and US date formats 
// 
    } 
// 
// 
// End Check Data  
// 
// 
  
  
// 
//if the required fields are empty reveal the warning message 
        if(whatfield == "" ){ 
        eval("document.getElementById('err"+i+"').style.backgroundColor='"+bcolerr+"';"); 
        eval("document.getElementById('err"+i+"').style.color='"+tcolerr+"';"); 
        err=0; 
        } 
// 
//continue count     
    i++; 
    } 
} 
if(Nav4){ 
err=1; 
var i=0; 
var dateformat=""; 
var ErrString ="";  
var whatfield=""; 
  
//check the required fields from array 
  
    while (i != validfields.length ){ 
    whatfield=""; 
     
     
        // 
        //text - textarea 
        if(fieldtype[i] == "txt"){ 
        whatfield = eval("document."+formname+"."+validfields[i]+".value");  
        } 
        // 
        //radio 
        if(fieldtype[i] == "radio"){ 
        radcount = eval("document."+formname+"."+validfields[i]+".length"); 
             
            for (var a = 0; a < radcount; a++){                 
                if (eval("document."+formname+"."+validfields[i]+"["+a+"].checked")){ 
                 
                whatfield = "ok"; 
             
                } 
            } 
        } 
        // 
        //END Radio 
         
        // 
        //checkbox 
        if(fieldtype[i] == "chkbx"){     
            if (eval("document."+formname+"."+validfields[i]+".checked")){ 
            whatfield = "ok";             
            }     
        } 
        // 
        //Select 
        if(fieldtype[i] == "dropbox"){         
            radstr = "document."+formname+"."+validfields[i]; 
            rs2 = eval(radstr+".options["+radstr+".selectedIndex].value");         
            whatfield = rs2;     
        } 
         
  
// 
// 
//Check Data  
// 
// 
  
  
//     
//email address 
    if (fieldallow[i] == "email" && whatfield != ""){ 
        var re=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i; 
        if (!re.test(whatfield)) { 
        ErrString += ""+validfields[i]+" = Valid Email address only<br><br>";  
        whatfield="ok"; 
        } 
    } 
//END email address 
//     
  
     
//     
//a-z A-Z _ numbers and space 
    if (fieldallow[i] == "asc" && whatfield != ""){ 
        var re = /^[\w ]+$/;  
        if (!re.test(whatfield)) {  
        ErrString += ""+validfields[i]+" = letters _ Nos and spaces only<br><br>";    
        whatfield="ok"; 
        } 
    } 
//a-z A-Z _ numbers and space 
//     
  
  
//     
//a-z A-Z _ numbers and space 
    if (fieldallow[i] == "textonly" && whatfield != ""){ 
        var re = /^[a-zA-Z]+$/;  
        if (!re.test(whatfield)) {  
        ErrString += ""+validfields[i]+" = a-z A-Z only - No spaces allowed<br><br>";    
        whatfield="ok"; 
        } 
    } 
//END a-z A-Z ONLY 
//     
  
  
//     
//0-9 and space 
    if (fieldallow[i] == "num" && whatfield != ""){ 
        var re = /^[0-9 ]+$/;  
        if (!re.test(whatfield)) {; 
       whatfield="ok"; 
        ErrString += ""+validfields[i]+" = numbers and spaces only<br><br>"; 
        } 
    } 
//END 0-9 and space 
// 
  
  
//     
//0-9 and space 
    if (fieldallow[i] == "numonly" && whatfield != ""){ 
        var re = /^[0-9]+$/;  
        if (!re.test(whatfield)) {; 
       whatfield="ok"; 
        ErrString += ""+validfields[i]+" = numbers only - NO spaces<br><br>"; 
        } 
    } 
//END 0-9 and space 
// 
  
  
//         
//date UK and US 
    if (fieldallow[i] == "dateUK" && whatfield != "" || fieldallow[i] == "dateUS" && whatfield != ""){ 
        var re = /^\d{2}\/\d{2}\/\d{4}$/;  
        var isitok=0; 
        if (fieldallow[i] == "dateUK"){dateformat="(dd/mm/yyyy)";} 
        if (fieldallow[i] == "dateUS"){dateformat="(mm/dd/yyyy)";} 
            if (re.test(whatfield)) { 
                var bits = whatfield.split("/"); 
                isitok = (bits.length == 3); // should be three components 
              if (isitok) 
               { 
                    if(fieldallow[i] == "dateUK"){     
                                  
                     day = parseInt(bits[0]); 
                      month = parseInt(bits[1]); 
                      
                     } 
                  
                     if(fieldallow[i] == "dateUS"){ 
                      
                     day = parseInt(bits[1]); 
                      month = parseInt(bits[0]); 
                     
                     } 
                  
                 var year = parseInt(bits[2]); 
                 isitok = !isNaN(month) && (month > 0) && (month < 13) && !isNaN(day) && (day > 0) && (day < 32) && !isNaN(year) && (bits[2].length == 4); 
           } 
        } 
  
            if(!isitok || !re.test(whatfield)){ 
            whatfield="ok";  
            ErrString += ""+validfields[i]+" = "+dateformat+"<br><br>";  
           } 
//END date 
//     
    } 
// End Check Data  
//if the required fields are empty reveal the warning message     
if(whatfield == ""){ 
ErrString += validfields[i]+" required<br><br>"; 
err=0; 
} 
i++; 
} 
} 
//do not submit the form if there are errors 
//REQUIRED 
if (err==0){ return false;} 
}

LFI · Aug 16, 2004

Change your submitForm() function to return false if it encounters an error and true otherwise.

Then update your function as such:

Code:

function submitform(){
 [b]if([/b]parent.middle.document.faultform.onsubmit()[b])[/b]
  parent.middle.document.faultform.submit()
}

That should do it (I hope!).

--Dave

vbkris · Aug 16, 2004

dan:
>>Calling the submit method of a form always bypasses its "onsubmit" event handler

this is new to me, i have done it before, never gave me nay problems (except making debugging of javascript code in the called funtion a miserable task)...

Known is handfull, Unknown is worldfull

BillyRayPreachersSon · Aug 16, 2004

this is new to me, i have done it before, never gave me nay problems

Really? Try this test harness out:

Code:

<html>
<head></head>
<body>
	<form onsubmit="alert('Submitting!');">
		<input type="button" onclick="this.form.submit();" value="Fake submit">
		<input type="submit" value="Real submit">
	</form>
</body>
</html>

As you can see, calling the "submit" event totally bypasses the onsubmit handler.

Dan

BillyRayPreachersSon · Aug 16, 2004

Sorry - I should have said "submit method", not "submit event".

So calling the submit method bypasses the onsubmit event.

Dan

Bobs390 · Aug 16, 2004

If I call the onsubmit() and add the following to the end of the procedure, why doesn't this work?

Code:

if (err==0){return false;} 
else {return true;}
}

Hope someone can help?

Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Call function onSubmit

Bobs390

Technical User

BillyRayPreachersSon

Programmer

Bobs390

Technical User

LFI

Programmer

vbkris

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Bobs390

Technical User

Similar threads

Part and Inventory Search

Sponsor