Disable submit button until hidden field has content

I have a hidden f开发者_JAVA技巧ield that is populated when the user does a specific AJAX call. I want to find a way to disable the submit button until the hidden field is populated with content.

   <input  type="hidden" name="lat" id="t1">
    <input type="hidden" name="long" id="t2"> 

Just set it to disabled and enable it at the same place you're setting the hidden value. I think you're trying to make it harder than it is.

$('#yourForm').submit(function() {
    if ( !$('#t1')[0].value && !$('#t2')[0].value ) { return false; }
});

Initially set:

<input id="GO" type="submit" style="display: none" />

After your ajax call:

$('#GO').show();

Try this:

$('input[type="submit"]').attr('disabled', 'disabled');

$('#t1, #t2').change(function() {
    var enable = $('#t1').val() && $('#t2').val();
    $('input[type="submit"]').attr('disabled', enable ? null : 'disabled');
});

Just make sure your Ajax call triggers the change event of the hidden inputs.

I usually do the following:

In with the rest of my JavaScript:

$.ajax({ //ajax options go here
    success: function(result) {
        //Do the rest of your success stuff here.

        $("#submit").removeAttr("disabled");
    }
});

Then, in my HTML markup:

<button type="submit" name="submit" id="submit" disabled="true">Submit</button>