dongyuli0964
dongyuli0964
2012-04-13 17:02

通过鼠标单击提交表单并输入按钮

已采纳

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duan1227 duan1227 9年前

    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.

    点赞 评论 复制链接分享

相关推荐