JS: Insert JS into jQuery/AJAX code

Question

I'd like to know how can I use my Javascript code in my jQuery-AJAX code:

JS Code

var error="";

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();

    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") { 
        return true;
    } else { return false; }
} // Checkfiles

function Checksize() { 
    var iSize;
    if ($("#flUpload")[0].files[0]){ iSize = ($("#flUpload")[0].files[0].size / 1024);}
    if(Checkfiles()==true && iSize < 51.200) { return true; } else { error += "- Only GIF, PNG, JPG images, smaller than 50 KB."; return false; }
} //Checksize

And this jQuery code:

$(document).ready(function() {

$("#ff1").submit(function(e){
    // prevent submit
    e.preventDefault();

    var email = document.getElementById("email").value;
    var title = document.getElementById("title").value;
    var url = document.getElementById("url").value; 
    var parametros = {"emaail":email, "tiitle":title, "uurl":url, "filee":file};

    $.ajax({
        data: parametros,
        url: 'validate.php',
        type: 'post',
        context: this,
        error: function (response) {
            alert("An error has occurred! Try Again!");
        },
        success: function (response) {
            if($.trim(response) == 'bien') { 
                this.submit(); // submit, bypassing jquery bound event
            } 
            else {
                $("#ajax_call_val").html('<div id="validation"><ul>'+response+'</ul></div>');
            }
        }
    });

});

});

I want to validate a file input with my Javascript code, if Checksize() returns true, in the AJAX code the following line should be:

$("#ajax_call_val").html('<div id="validation"><ul>'+response+'</ul></div>');

If Checksize() returns false, Should be:

$("#ajax_call_val").html('<div id="validation"><ul>'+response+'<li>Only GIF, PNG, JPG images, smaller than 50 KB</li></ul></div>');

Thanks in advance!

tymeJV · Accepted Answer · 2013-05-11 05:01:42Z

1

In the success function do:

if (Checksize()) {
    $("#ajax_call_val").html('<div id="validation"><ul>'+response+'</ul></div>');
} else {
    $("#ajax_call_val").html('<div id="validation"><ul>'+response+'<li>Only GIF, PNG, JPG images, smaller than 50 KB</li></ul></div>');
}

Combine your above to codes:

var error="";

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();

    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") { 
        return true;
    } else { return false; }
} // Checkfiles

function Checksize() { 
    var iSize;
    if ($("#flUpload")[0].files[0]){ iSize = ($("#flUpload")[0].files[0].size / 1024);}
    if(Checkfiles()==true && iSize < 51.200) { return true; } else { error += "- Only GIF, PNG, JPG images, smaller than 50 KB."; return false; }
} //Checksize

$(document).ready(function() { //blah });

edited May 11, 2013 at 5:01

answered May 11, 2013 at 3:41

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

4 Comments

Eduardo Go Over a year ago

It's not working, my main question is where should I put my JS code to call it from jQuery successfully and if it will work actually.

Eduardo Go Over a year ago

Thank you but for some reason is not working, if I don't add the JS code, works perfect but it doesn't validate what I want. And my JS alone works perfect either. So I think there's something wrong when trying to combine JS and jQuery. :(

tymeJV Over a year ago

There shouldn't be, let me update my answer with how it should look

Eduardo Go Over a year ago

Thanks man, the problem was actually in the 'var parametros', it should not have ' "filee":file ', that was the problem. Thanks!

Collectives™ on Stack Overflow

JS: Insert JS into jQuery/AJAX code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related