How to combine two Javascript functions into one?

Question

Hi there I am currently working on two JavaScript function which works okay separated one from another.

My question is how I can combine these two function into one so they will work both.

Here is my first Javascript which i use for submiting data from my html form:

function uploadFiles(){
    if(checkFileNameFormat()){ return false; }
    if(checkDisallowFileExtensions()){ return false; }
    if(checkAllowFileExtensions()){ return false; }
    if(checkNullFileCount()){ return false; }
    if(checkDuplicateFileCount()){ return false; }
    
    var total_uploads = 0;
    
    for(var i = 0; i < upload_range; i++){
        if(document.form_upload.elements['upfile_' + i].value != ""){ total_uploads++; }
    }
    
    document.getElementById('total_uploads').innerHTML = total_uploads;
    document.form_upload.submit();
    document.getElementById('upload_button').disabled = true;
    
    iniProgressRequest();
    getElapsedTime();
    
    for(var i = 0; i < upload_range; i++){ document.form_upload.elements['upfile_' + i].disabled = true; }  
}

Here is my second Javascript which i use to show Upload progress bar:

function uploadPbar(){
    var file = _("upfile_0").files[0];
    //alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("upfile_0", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser1.php");
    ajax.send(formdata);
}

If it's needed here is my HTML form code:

    <form name="form_upload" method="post" enctype="multipart/form-data"  action="[var.path_to_upload_script]" style="margin: 0px; padding: 0px;">
    <noscript><input type="hidden" name="no_script" value="1" /></noscript>
    <input type="hidden" name="title" value="[var.title]" />
    <input type="hidden" name="description" value="[var.description]" />
    <input type="hidden" name="tags" value="[var.tags]" />
    <input type="hidden" name="location_recorded" value="[var.location_recorded]" />
    <input type="hidden" name="allow_comments" value="[var.allow_comments]" />
    <input type="hidden" name="allow_embedding" value="[var.allow_embedding]" />
    <input type="hidden" name="public_private" value="[var.public_private]" />
    <input type="hidden" name="channel" value="[var.channel]" />
    <input type="hidden" name="channel_name" value="[var.channel_name]" />
    <input type="hidden" name="sub_cat" value="[var.sub_cat]" />
    <input type="hidden" name="form_submitted" value="yes" />

    <div id="upload_slots"><span class="font5_16"><b>[var.lang_please_upload]</b></span><input type="file" name="upfile_0" id="upfile_0" /></div>
      <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
      <h3 id="status"></h3>
      <p id="loaded_n_total"></p>
    <noscript><br><input type="reset" name="no_script_reset" value="Reset" />&nbsp;&nbsp;&nbsp;<input type="submit" name="no_script_submit" value="Upload" /></noscript>
    </form>
    <br>
    <script language="javascript" type="text/javascript">
        document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');
    </script>

So please help me to combine this two functions into one and make them both works as intended.

Thanks in advance.

Answer 1

Why not just call the second function from the first function. Or create a wrapper function that calls both?

function CallBoth(){
    uploadFiles();
    uploadPbar();
}

Answer 2

One thing you could do is just add another function call to the onclick function:

document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();uploadPbar();">')

or try this:

var tempFunction = uploadFiles;
uploadFiles = function () {
    tempFunction();
    uploadPbar();
}

Answer 3

You might want to preserve the context and forward the arguments to the functions.

function combinedFunction()
{
    uploadFiles.apply(this, arguments);
    uploadPbar.apply(this, arguments);
}

The functions will now share the same this and arguments , so anything done with this will also appear in the second function, as if they were the same. Local scoped variables of course will not be shared by default.

If you're using jQuery and want to combine functions, this is the way.

Answer 4

I googled this for some reason so, hello - welcome to my necropost!

What you're talking about is super useful in functional-programming-land.

const createMergedFunction = functions => () => functions.forEach(func => func());

function uploadFile() {
  //
}

function uploadPbar(){
  //
}

const mergedFunction = createMergedFunction([uploadFile, uploadPbar]);

const resultOfCallingBothFunctions = mergedFunction();

A much better version of this is pipe in Ramda :

function uploadFile() {
  //
}

function uploadPbar(){
  //
}

const mergedFunction = R.pipe(uploadFile, uploadPbar);

const resultOfCallingBothFunctions = mergedFunction();