javascripthtmljqueryjquery-eventsjquery-ui-tabs

Js creating issue on enter key event


I am trying to check some conditions on enter key. For that purpose I wrote some code but that code executes some other code also. I tried but not found why the issue occur. Like I have text field and I am loading data on that using ajax character search and now I am trying to add new condition that if enter key is pressed check the field and do some work, but it checks and send the form without clicking my submit button. I am confused why this happening. Below is my code:

jQuery(function(){
    jQuery("#name").keyup(function(event) 
    { 
        // this is code to check whether enter key is pressed or not
        if(event.keyCode == 13){
            if(jQuery('#name').val()==''){
                alert("Please select Product name First.")
                jQuery('#name').focus();
                jQuery('#name').css('border','1px solid red');
            }else{ 
                // jQuery('#checkpname').click();
                changetab('step2'); // I want to stop code after this
            }
        // this is code to check whether enter key is pressed or not
        }else{ 
            var searchid = jQuery(this).val();
            var dataString = 'search='+ searchid;
            if(searchid!='')
            {
                jQuery.ajax({
                    type: "POST",
                    url: '<?php echo Mage::helper('core/url')->getHomeUrl();?>pmembers/packages/searchproducts/key/e0603b30a8d5802f6df3jhyd87f31ddb/',
                    data: dataString,
                    cache: false,
                    success: function(html) {
                        jQuery("#result").html(html).show();
                    }
                });
            }   
        }
    });
    //jQuery('body').on('click', '#result',function(e){
    jQuery("#result").live("click",function(e){ 
        var $clicked = jQuery(e.target);
        // var $name = $clicked.find('.name').html();
        //var decoded = jQuery("<div>").html($name).text();
        jQuery('#name').val(jQuery(e.target).text());
    });
    jQuery(document).on("click", function(e) { 
        var $clicked = jQuery(e.target);
        if (! $clicked.hasClass("search")){
            jQuery("#result").fadeOut(); 
        }
    });
    jQuery('#name').click(function(){
        jQuery("#result").fadeIn();
    });
});

This is the changetab function :

function changetab(hrf){
    jQuery('a.btn').each(function () {
    jQuery(this).click(function () {
      //var thisid = $('#sell .tab-pane.active').attr('id');
      jQuery('.wizard a[data-toggle="tab"]').removeClass('current');
      jQuery('.wizard a[href="#'+hrf+'"]').click();
    });
  });
}

This function basically change tabs. I only want to check the textfield with enter if not empty then load second tab. The tab function works fine on other condition only enter creating issue. Hope someone understands what I am trying to say.


Solution

  • First of all, you should handle key's event. But you're not. try:

    if(event.keyCode == 13){
        event.preventDefault();
        if(jQuery('#name').val()==''){
            alert("Please select Product name First.")
            jQuery('#name').focus();
            jQuery('#name').css('border','1px solid red');
        }else{ 
            // jQuery('#checkpname').click();
            changetab('step2'); // I want to stop code after this
        }
        // I always return a false and never trust preventDefault
        return false;
    // this is code to check whether enter key is pressed or not
    }else{ /* rest of code */
    

    And: as I remember, you can handle key's events on keydown event, not keyup. So try that. It should work.

    jQuery("#name").keydown(function(event){ /* rest of your code... */