views:

41

answers:

1

If the submit button is clicked, prevent the default action and see if the field 'account_name' is already in use. If the $.get() returns a result, alert the user of the results. If it doesn't, submit form with id="add_account_form".

My problem is that my else{} statement is not submitting the form. I get no response when submit is clicked & there is no value returned.

Also I would like to change my code where it goes $("#add_account_form").submit(..) instead of .click() however, would that cause a problem when trying to submit the form later in the script?

    <script type="text/javascript">
        $(document).ready( function () { 

            $("#submit").click( function () { 
                 var account_name = $("input[name=account_name]").val();
                    $.get(
                        "'.url::site("ajax/check_account_name").'", 
                    {account_name: account_name}, 
                    function(data){ 
                        if(data.length > 0){            
                                    confirm( "The account name you entered looks like the following:\n"
                                                        +data+
                                            "Press cancel if this account already exists or ok to create it."
                                                ); 
                        }else{
                            $("#add_account_form").submit();
                        }                   
                    });
                    return false;                
                });
            });
    </script>
                                                    <p>
                                                        <input type="submit" id="submit" class="submit small" name="submit" value="Submit" />
                                                    </p>
                                                </form> 

Thanks for your help.

EDIT

So anyone who runs into my problems, it's that $.get() is asynchronous, so it will always return false, or true depending on what submitForm is defined as. $.ajax() however, allows async to be set as false, which allows the function to finish before moving on. See what I mean:

        $(document).ready( function () {                                
            $("#add_account_form").submit( function () { 
                var submitForm = true;
                 var account_name = $("input[name=account_name]").val();
                    $.ajax({
                        type: "GET",
                        async: false,
                        url: "'.url::site("ajax/check_account_name").'", 
                        data: ({account_name: account_name}), 
                        success:
                    function(data){ 
                        if(data.length > 0){            
                                    if(!confirm( "The account name you entered looks like the following:\n"
                                                        +data+
                                                        "Press cancel if this account already exists or ok to create it."
                                                )){ 
                                                submitForm = false;
                                            }
                        }   
                    }
                    });

                        if (submitForm == false ) {
                    return false;     
                        }

                });
            });

Thanks for your help @Dan

+1  A: 

Taking a bit of a guess, but perhaps data.length is always true?

I'd try returning a boolean or just a bit.

then:

if(data) {
  confirm();
} else {
  $('#form-id').submit();
}

Hope that helps :)

EDIT: Mis-read question

What may be happening is when the submit button is clicked, the form submits after the click. In other words, you may have to have a form.submit event caught:

$('form').submit(function() {
    var submitForm = true;
    var account_name = $("input[name=account_name]").val();
    $.get(
        "'.url::site("ajax/check_account_name").'", 
    {account_name: account_name}, 
    function(data){ 
        if(data.length > 0){
            if (!confirm("The account name you entered looks like the following:\n"
                        +data+
                        "Press cancel if this account already exists or ok to create it."
                        )) {
                submitForm = false;
        }                   
    });
    if (!submitForm) {
        return false;                
    }
});
Dan
@Dan Thanks but I'm not having a problem with the returned data. data.length works fine - and it does always return true, which is why I used it like this. My problem comes with the `$('#form-id').submit();` not doing anything.
bradenkeith
Ah, my apologies for mis-reading. See my edits :) - hoping they make sense/help
Dan
Thanks for your help. If var submitForm is not set to false at the beginning, the $.get() won't work and wont' return data. However if it is set to false the $.get() works but the form doesn't. I actually tried this approach...any ideas what would be the cause of that?
bradenkeith
Ok so my problem was that the $get() was being completed after the !submitForm ... which means it would never return false. So changing my get() to ajax() and turning async to false would allow the information to process before deciding what to do with it. Thanks @Dan!
bradenkeith
You're welcome - glad I could help!
Dan