Alizain Prasla Alizain Prasla - 1 month ago 8
jQuery Question

SUBMIT FORM with mouse clicking and enter button

I am Submiting form through MOUSE CLICK and ENTER too.

Ajax Call is checking is there any designation which i already in DATABASE.. If not, user can submit form otherwise SUBMIT button will DISABLE

JQUERY

function check_designation(e){

text = $('#req1').val();
data = "data=" + text;
text_length = text.length

if(text_length == 0)
{
$('#result_span').html('');
}

if(text_length > 3 ){
$.ajax({
url: "designation_ajax.php",
type: "POST",
data: data,
cache: false,
success: function (response) {
if ($.trim(response) == "access") {
$("#result_span").html('<div class="green">' + text + ' is available '+'</div>');
$('#create_desg').removeAttr('disabled');
}
else if ($.trim(response) == "no access") {
$("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>');
$('#create_desg').attr('disabled','disabled');
}

else {

alert('Sorry, unexpected error. Please try again later.');

}
}
});
}
else{
$("#result_span").html('');

}

return true;
}


HTML FORM

<form id="formID" class="formular" method="POST" action="" onsubmit="formSubmit()" >
<fieldset>
<legend>Create Desination</legend>
<label> Designation<br clear="all" />
<input autocomplete="off" onkeyup="check_designation(event)" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" />
<span id="result_span"></span>
</label>
<br clear="all" />
<input id="create_desg" value="Submit" type="button" />
</fieldset>
</form>


PROBLEM::::

Now what happen DISABLE button is not a solution... if there is already a DESIGNATION in a table.. submit button will disable but By ENTER it will submitted and i dont want to reload the page. and AJAX is not working when i PRESS ENTER

Answer

You must return false from your onsubmit handler in order to cancel the default action. But I would probably clean your code a bit and subscribe to the submit event unobtrusively:

<form id="formID" class="formular" method="POST" action="">
    <fieldset>
        <legend>Create Desination</legend>
        <label>
            Designation<br clear="all" />
            <input autocomplete="off" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" />
            <span id="result_span"></span>
        </label>
        <br clear="all" />
        <input id="create_desg" value="Submit" type="button" />
    </fieldset>
</form>

You will notice that I have intentionally removed the onkeyup event from the input field. Hammering your server with AJAX requests every time some user hits a key while inside this field won't do any good to your server. If you want to implement this I would recommend you waiting for some input to accumulate and throttle before sending the AJAX request.

and then:

$(function() {
    $('#formID').submit(function() {
        var text = $('#req1').val();
        if(text.length == 0) {
            $('#result_span').html('');
        }       

        if(text.length > 3) {
            $.ajax({
                url: 'designation_ajax.php',
                type: 'POST',
                data: { data: text },
                cache: false,
                success: function (response) {
                    if ($.trim(response) == 'access') { 
                        $('#result_span').html('<div class="green">' + text + ' is available '+'</div>');
                        $('#create_desg').removeAttr('disabled');
                    }
                    else if ($.trim(response) == 'no access') {
                        $("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>'); 
                        $('#create_desg').attr('disabled', 'disabled');
                    } else { 
                        alert('Sorry, unexpected error. Please try again later.');
                    }
                }      
            }); 
        } else {
            $('#result_span').html('');     
        }

        // return false to prevent the default action
        return false;
    });
});

Also I would have the designation_ajax.php script return JSON instead of some access and no access strings that you are parsing and trimming in your success callback.

Comments