Key code value send jquery

Question

Everything is going fine jst a little bit mistake only

when i press enter it will send the value througn $.post(). after success the page refreshes why so

and if i use some other keycode it will remain same value inserted but no refresh

<script>
    $(document).ready(function(){
    $('#newNumber').focus();
    $('#newNumber').keypress(function(e){
            var code=e.keyCode;
            //alert(code);
            if(code==61)
                {
            var nno=$('#newNumber').val();
            $('#load').show();
            if(nno=="")
                {
                    $('#load').hide();
                    $('#alertBox').show();
                    $('#newNumber').focus();
                    $('#alertBox').html("<div class=error><span id=alerttext class='alerttext'>Empty Field</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                    $('#close').click(function(){$('#alertBox').fadeOut(2000);});

            }
            else
            {
                $.post("NumberAction/addAction.php",$('#contentForm').serialize(),function(result){
                    if(result=="yes")
                        {
                            $('#load').hide();
                            $('#alertBox').show();
                           $('#alertBox').html("<div class=warning><span id=alerttext class='alerttext'>Already Exists</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                           $('#newNumber').val("");
                           $('#newNumber').focus();
                           $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                    }
                    else if(result=="done")
                    {
                        $('#load').hide();
                        $('#alertBox').show();
                        $('#alertBox').html("<div class=success><span id=alerttext class='alerttext'>New number is added</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                           $('#newNumber').val("");
                           $('#newNumber').focus();
                           $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                    }
                    else if(result=="error")
                    {
                        $('#load').hide();
                        $('#alertBox').show();
                        $('#alertBox').html("<div class=error><span id=alerttext class='alerttext'>Error in adding</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                           $('#newNumber').val("");
                           $('#newNumber').focus();
                           $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                    }
                })
            }
            }
        })
    })
</script>

Now values is going but when i press enter it will send the value but also it will refresh the page so that i am not able to use the Enter key code

Without showing your code, we can only guess, and that would not help you much. It is a *code* problem, so please post your code. — Felix Kling, Aug 30 '11 at 08:53
Hardly to know your question.You mean the return fails to post sometimes? — Shisoft, Aug 30 '11 at 08:54

score 0 · Accepted Answer · answered Aug 30 '11 at 11:09

My guess is that you are detecting pressed key somewhere inside FORM tag and by pressing enter you not only send the ajax using $.post, but also tell the browser to submit the form regular way so the page is reloaded. To prevent this, you can do one of two things:

1) Prevent submission of the form, using:

$("#yourform").submit(function(e) {e.preventDefault()});

2) After doing "$.post("NumberAction/addAction.php",...." do return false;

<script>
$(document).ready(function(){
$('#newNumber').focus();
$('#newNumber').keypress(function(e){
        var code=e.keyCode;
        //alert(code);
        if(code==61)
            {
        var nno=$('#newNumber').val();
        $('#load').show();
        if(nno=="")
            {
                $('#load').hide();
                $('#alertBox').show();
                $('#newNumber').focus();
                $('#alertBox').html("<div class=error><span id=alerttext class='alerttext'>Empty Field</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                $('#close').click(function(){$('#alertBox').fadeOut(2000);});

        }
        else
        {
            $.post("NumberAction/addAction.php",$('#contentForm').serialize(),function(result){
                if(result=="yes")
                    {
                        $('#load').hide();
                        $('#alertBox').show();
                       $('#alertBox').html("<div class=warning><span id=alerttext class='alerttext'>Already Exists</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                       $('#newNumber').val("");
                       $('#newNumber').focus();
                       $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                }
                else if(result=="done")
                {
                    $('#load').hide();
                    $('#alertBox').show();
                    $('#alertBox').html("<div class=success><span id=alerttext class='alerttext'>New number is added</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                       $('#newNumber').val("");
                       $('#newNumber').focus();
                       $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                }
                else if(result=="error")
                {
                    $('#load').hide();
                    $('#alertBox').show();
                    $('#alertBox').html("<div class=error><span id=alerttext class='alerttext'>Error in adding</span><div id=close class='close'><img src='images/close.png'/></div></div>");
                       $('#newNumber').val("");
                       $('#newNumber').focus();
                       $('#close').click(function(){$('#alertBox').fadeOut(2000);});
                }
            })
            // return false to prevent regular form submission
            return false;
        }
        }
    })
})
</script>

Yes its working now that single line for prevent submission has done the work One more thing is this coding pattern ohk ohk, good, normal, average — Vivek Moyal, Sep 06 '11 at 09:09

Key code value send jquery

1 Answers1