Need help merging 2 JS functions

How can I call another function on validation

[fredfletcher]

Hello, I am trying to merge 2 Javascripts together in order to check if:

User has entered info in all required fields, and if all fields were filled, to process the next function being (attach/upload a file), will show a "Uploading... Please wait." message (in DIV below).

I tried onsubmit="return checkFields(); ray.ajax();"> but that did not work, as it did not show the "Uploading... Please wait." message/popup box when the file is uploading.

Any help is appreciated.

Here is my full present code:

<script LANGUAGE="Javascript">


<!-- Begin
function checkFields(f) {
date1 = document.form1.date1.value;
header1 = document.form1.header1.value;
description1 = document.form1.description1.value;


//check required field
if ((date1 == "") || (header1 == "")|| (description1 == "") ) {
alert("Please fill in all fields.");
return false;
}


// End -->
</script>

This is the next function to execute if user has filled in all required fields.

<script type="text/javascript">
var ray={
ajax:function(st)
{
this.show('load');
},
show:function(el)
{
this.getID(el).style.display='';
},
getID:function(el)
{
return document.getElementById(el);
}
}
</script>

<style type="text/css">
#load{
position:absolute;
z-index:1;
border:3px double #999;
background:#f7f7f7;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
top:50%;
left:50%;
text-align:center;
/*line-height:300px;*/
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:18pt;
}
</style>

<div id="load" style="display:none;"><br><br>Uploading... Please wait.<br><hr><br>Do not close this window until it has finished.</div>

<form action="process_form.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return checkFields();">

[Fotiman]

I'll answer your question, but first I'm going to go on a brief rant. Please bear with me. :)

1. Don't use the "LANGUAGE" attribute on your script tag. It's invalid. Use just <script> (html5) or <script type="text/javascript"> (html 4.01 or XHTML)

2. Don't put HTML comments inside of script tags:
<!-- Begin
// End -->
That was required with Netscape 1, and just adds bloat and looks sloppy.

3. The best place for your script code is in an external file (not in the same file as your HTML). Likewise for your CSS. Clean separation of content, presentation, and behavior code.
<script src="yourscript.js"></script>

Now, on to your issue.

You either need a third function that wraps the functionality of both your other functions, or you need to change your checkFields function to call your ray.ajax function.

function fetchWithAjax() {
  if (checkFields) {
    ray.ajax();
  }
  return false; // prevent default form submit
}

then onsubmit="return fetchWithAjax();"

[fredfletcher]

Thanks for the "rant", I understand and appreciate it as a matter 'o fact. Yes, I understand what you mean about placing Javascript and CSS in seperate files; just wanted to show my entire code that I was working with.

I tried the following with your supplied code and "onsubmit", yet I am not seeing the popup alert of the fields not all being filled, only the popup "Uploading... please wait" message.

Here is my updated code, could you tell me where I've gone wrong please?:

(in .JS file)

<script type="text/javascript">

var ray={
ajax:function(st)
{
this.show('load');
},
show:function(el)
{
this.getID(el).style.display='';
},
getID:function(el)
{
return document.getElementById(el);
}
}

function checkFields(f) {
date1 = document.form1.date1.value;
header1 = document.form1.header1.value;
description1 = document.form1.description1.value;


//check required field
if ((date1 == "") || (header1 == "")|| (description1 == "") ) {
alert("Please fill in all fields.");
return false;
}

return false;
}

function fetchWithAjax() {
 if (checkFields) {
 ray.ajax();
 }
 return false; // prevent default form submit
}

</script>

[daveVk]

if (checkFields) {

assuming you wish to execute checkFields it should be

if ( checkFields(x) ) {

replace x with whatever is required, if anything ?

[fredfletcher]

Thanks (DaveVk) and others; I found the following answer from another post I had on another forum and am sharing with others, in case it should be needed:

function checkFields(f) {
date1 = document.form1.date1.value;
header1 = document.form1.header1.value;
description1 = document.form1.description1.value;

//check required field
if ((date1 == "") || (header1 == "")|| (description1 == "") ) {
alert("Please fill in all fields.");
return false;
}
else{
ray.ajax();
return true;
}
}