Why is my jQuery/Javascript function not being called correctly with onsubmit?

Question

I have this jQuery function that is using another jQuery library called html5csv.js (which explains some of the CSV stuff you will see)

Here is it:

function validateNewQuiz()
{
    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        var fullString = s;

        if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
        {
            return true;
        }
        else
        {
            return false;
        }

    });
}

Here is how I am trying to call my function, from an onsubmit within my form:

<form method="post" action="createplay.php" onsubmit="return validateNewQuiz();" enctype="multipart/form-data">

My function has been thoroughly tested, along with my regex to make sure it was working. When I decided to implement it into my large document, and wrap it around function validateNewQuiz(){ //my function here } , it stopped working.

I did not make my tests with the onsubmit part within my form either.

I tried fixing it two ways. One way was like this, splitting them into two functions:

var fullString = "";
CSV.begin("#upload_csv").go(function(e,D)
{ 
    if (e) 
    {
        return console.log(e); 
        alert("Sorry, an error occured");
    }

    var s = "";


    for (var i = 0; i <= D.rows.length - 1; i++) 
    {
        s +=D.rows[i].join(',');
        s += "\n";
    }

    fullString = s;
});


function validateNewQuiz()
{
    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
    {
        return true;
    }
    else
    {
        return false;
    }
}

And the second way, by added the return outside of the CSV part:

var fullString = "";
function validateNewQuiz()
{
    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        fullString = s;
    });

    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
    {
        return true;
    }
    else
    {
        return false;
    }
}

Does anyone have any suggestions to why my form is always submitting, even when my function should be returning false?

Here is another edit that I tried to make, although it is still submitting to my PHP and the console messages are not being displayed since that page is being submitted to PHP, therefore reloading

jQuery("#newQuizID").click(function(e)
{
    e.preventDefault();

    CSV.begin("#upload_csv").go(function(e,D)
    { 
        if (e) 
        {
            return console.log(e); 
            alert("Sorry, an error occured");
        }

        var s = "";


        for (var i = 0; i <= D.rows.length - 1; i++) 
        {
            s +=D.rows[i].join(',');
            s += "\n";
        }

        var fullString = s;

        if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString))
        {
            console.log("Working");
            jQuery("#form-step2").submit();
        }
        else
        {
            console.log("Not Working");
        }

    });
});

well inside the go callback the returns only return true/false within the callback function so they have to be outside it as with your second try, and is the go function an asynchronous function? If so the check against fullString wont work because it wont have been set, because the function returns immediately and lets the work happen in the background making fullString not set at the time of checking. — Patrick Evans
– Patrick Evans, Commented Aug 25, 2013 at 9:37
@PatrickEvans - I believe it is an asynchronous function, yes. Is there another way around this? — Fizzix
– Fizzix, Commented Aug 25, 2013 at 9:40
see my answer, you want to use a click handler instead of onsubmit — Patrick Evans
– Patrick Evans, Commented Aug 25, 2013 at 9:47

Patrick Evans · Accepted Answer · 2013-08-25 13:05:00Z

1

html5csv puts a event handler on the file input so it only triggers when a file is added so you need to set a valid flag somewhere and then check it before submitting

function checkValidCSV(e) {
    var isValid = jQuery("#form-step2").data("hasValidData");
    if( typeof(isValid) != "undefined" && isValid ) {
        jQuery("#form-step2").submit();
    } else {
        //Do whatever invalid data cals you want to do here
        alert("csv file was invalide so i am not submitting the form");
        e.preventDefault();
    }
}

function csvFileLoaded(e,D) {
    if (e) {
        return console.log(e); 
        alert("Sorry, an error occured");
    }

    var s = "";
    for (var i = 0; i <= D.rows.length - 1; i++) {
        s +=D.rows[i].join(',');
        s += "\n";
    }
    var fullString = s;
    if(/^(([^,]+,){4}[^,]+\n){3}$/.test(fullString)){
        console.log("Valid Data");
        jQuery("#form-step2").data("hasValidData",true);
    } else {
        console.log("Invalid Data");
        jQuery("#form-step2").data("hasValidData",false);
    }
}

jQuery(document).ready(function() {
    CSV.begin("#upload_csv").go(csvFileLoaded);
    jQuery("#newQuizID").click(checkValidCSV);
});

edited Aug 25, 2013 at 13:05

answered Aug 25, 2013 at 9:46

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

9 Comments

Fizzix Over a year ago

Thanks for that. One question, what is stopping my PHP from posting to itself since this is within my form method="post" action="createplay.php"

Patrick Evans Over a year ago

'.submit' just programmatically submits the form instead of manually so the url in "action" is still used.

Fizzix Over a year ago

So what is stopping the action from being used when the submit button is pressed at the beginning before the Javascript is even called?

Patrick Evans Over a year ago

in the click event you will see e.preventDefault(), e here is a reference to the event object, this prevents the default action of the event from happening, in this case it prevents the submission of the form, click event happens before the submit event, and since preventDefault is called in the click event, it prevents submit from being triggered.

Fizzix Over a year ago

I just tested it. Although, it is still posting to my PHP... Any suggestions?

|

Collectives™ on Stack Overflow

Why is my jQuery/Javascript function not being called correctly with onsubmit?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related