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.

What is your reasoning for combining them into a single function? Why do you want to do that? — Robert Harvey
– Robert Harvey, Commented Nov 6, 2013 at 18:43
I want to add upload progress bar with my second Javascript funciton to the first one. — Tonny Struck
– Tonny Struck, Commented Nov 6, 2013 at 18:44

Smeegs · Accepted Answer · 2013-11-06 18:51:54Z

4

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

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

answered Nov 6, 2013 at 18:51

Smeegs

9,2346 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Da Stewie · Accepted Answer · 2013-11-06 18:52:12Z

0

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();
}

answered Nov 6, 2013 at 18:52

Da Stewie

1

2 Comments

Ingo Bürk Over a year ago

Please don't use document.write and use DOM methods instead. It is outdated, even the W3C advises against using it whenever possible, and it can be a potential vulnerability for XSS attacks.

Tonny Struck Over a year ago

with what i can replace this document.write ?

Mikael Dúi Bolinder · Accepted Answer · 2017-08-02 11:01:43Z

0

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.

answered Aug 2, 2017 at 11:01

Mikael Dúi Bolinder

2,2862 gold badges26 silver badges53 bronze badges

Comments

Cameron Wilby · Accepted Answer · 2021-05-19 04:28:41Z

0

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();

answered May 19, 2021 at 4:28

Cameron Wilby

2,3201 gold badge26 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to combine two Javascript functions into one?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related