2
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
    $("input[name='search_user_submit']").click(function() {
        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
        });

    });
});
});//]]>  
</script>

This works fine when i hit the button, but when i press enter key all the variables and its values get shown in the address bar.

So how can i add a keypress event for this purpose:-

I have tried this code for keypress still its not working:-

<script type="text/javascript">
$(window).load(function(){
    $(document).ready(function() {
    function Script(e) {
        if (e.keyCode == 13) {
             var cv = $('#newInput').val();
            var cvtwo = $('input[name="search_option"]:checked').val();
            var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
            $("#SR").html('<img src="loading.gif"/>').show();
            var url = "user.php";
            $.post(url, data, function(data) {
                $("#SR").html(data).show();
            });
        }
    }
    });
});
</script>

Also for the keypress i am creating the textbox on a click of option button and in my javascript i have specified this:-

input.onkeypress = 'return Script(event)';

1
  • Is there an enclosing form that is getting submitted? Also, you should do a return false from your event handler Commented Apr 18, 2012 at 5:17

3 Answers 3

2

You should be using forms, and having a onsubmit event rather than handling the enter key.

<form id="myform">
    <!-- ... -->
    <input type="submit">
</form>

<script>
document.getElementById("myform").onsubmit = function (ev) {
    ev.preventDefault();
    // ...
}
</script>

No error checking done, but hope you get the idea.

Sign up to request clarification or add additional context in comments.

Comments

1

I thin you want to execute ajax call and tiger the button on enter

try this

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
    $("input[name='search_user_submit']").keyup(function(event){

    if(event.keyCode == 13)
{


        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
}
        });

    });
});
});//]]>  
</script>

Comments

0

To answer your question, I think hitting enter is sending the form to the browser, and it must be a form with the action set to GET (or nothing, which default to GET). This causes the browser to refresh and the form variables appear in the URL as a query string. The browser refresh prevents your script from really being executed (or it's being executed as the page reloads, so you don't see it).

If you do e.preventDefault() if the Script(), that will prevent that default action from occurring.

[edit] Gopal just beat me to giving pretty much the same answer.

I do want to add that jQuery handles event binding and stuff and maybe for a better flow, you can replace function Script(e) with

$('input').keypress(function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
        });
    }
});

and then you don't need input.onkeypress = 'return Script(event)'; anywhere. jQuery has a function like .keypress() (see jQuery's keypress) for pretty much any event, and you can even use .bind() for binding multiple events. Refer to the documentation to learn more.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.