How do I toggle between enabling and disabling a form submittion?

Question

Here's the skinny: In the below code #new-org-btn is an input of type submit and I want it to only submit its containing form if the click function reaches the else statement. As of now, it is submitting even it doesn't reach the else statement.

$('#new-org-btn').click(function() {
    var newOrgName = $('#new-org-ipt').val();
    console.log(newOrgName.length);;
    if (newOrgName.length == 0)
    {
        $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot be blank.");
    }
    else if (newOrgName.indexOf('-') == -1)
    {
        $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot contain any '-' characters.");  
    }
    else
    {
        $('#new-org-output-msg').css('color', 'green');
        $('#new-org-form').submit();                
    }                            
});

I know that $('#new-org-form').submit(function() { return false; }); would disable the form from doing anything when it submits, but the problem is that if I do

$('#new-org-btn').click(function() {
    var newOrgName = $('#new-org-ipt').val();
    console.log(newOrgName.length);;
    if (newOrgName.length == 0)
    {
        $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot be blank.");
        $('new-org-form').submit(function() { return false; });

    }
    else if (newOrgName.indexOf('-') == -1)
    {
        $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot contain any '-' characters.");
        $('new-org-form').submit(function() { return false; });  
    }
    else
    {
        $('#new-org-output-msg').css('color', 'green');
        $('#new-org-form').submit();                
    }                            
});

then when I actually enter the else statement and want to submit the form as usual, it may have been deactivated from a previous call to the function. I therefore need a way to "reactivate" the form. How do I do that?

Answer 1

Since #new-org-btn is of type submit , it is going to submit regardless. Therefore, you need to return false in the if and else if

$('#new-org-btn').click(function() {
        var newOrgName = $('#new-org-ipt').val();
        console.log(newOrgName.length);;
        if (newOrgName.length == 0)
        {
            $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot be blank.");
            return false;
        }
        else if (newOrgName.indexOf('-') == -1)
        {
            $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot contain any '-' characters.");
            return false;  
        }
        else
        {
            $('#new-org-output-msg').css('color', 'green');
            //$('#new-org-form').submit(); not need if new-org-form is the form itself                
        }                            
    });

Regarding

> ...need a way to "reactivate" the form...

$('form')[0].reset();//may need to change selector if you have multiple forms

should do the trick.

See How to reset a form using jQuery with .reset() method

Answer 2

I would do it a bit differently:

Do checking only upon submit, not on click itself - this is better as both submit button and "enter" key would be handled:

$('#form').submit(function(ev) {

        var newOrgName = $('#new-org-ipt').val();
        if (newOrgName.length == 0)
        {
            $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot be blank.");
            ev.preventDefault();
        }
        else if (newOrgName.indexOf('-') == -1)
        {
            $('#new-org-output-msg').css('color', 'red').text("New organization not submitted. Name cannot contain any '-' characters.");
            ev.preventDefault();
        }
        else
        {
            $('#new-org-output-msg').css('color', 'green');
        }                            
    });