How to trigger a function after hitting enter

Discussion in 'JavaScript' started by Devtard, Oct 9, 2012.

0
  1. #1
    Hello. I have a JS code which is used to send POST data after clicking a button. The second part (function apt_enter_submit) prevents sending the form if the enter key is pressed.

    I need to merge these scripts to make it send data from inputs if the button is clicked or if I press enter. Any idea how to do that?

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>  
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('#apt_create_a_new_tag_ajax_button').click(function () { 
 
 
    var apt_box_tag_name = $('#apt_box_tag_name').val(); 
    var apt_box_tag_related_words = $('#apt_box_tag_related_words').val(); 
 
    var data = { 
        action: 'apt_custom_box_save_tag', 
        apt_box_tag_name: apt_box_tag_name, 
        apt_box_tag_related_words: apt_box_tag_related_words, 
        }; 
 
    $.ajax ({ 
        type: 'POST', 
        url: ajaxurl, 
        data: data, 
        success: function() { 
                jQuery('#apt_box_tag_name, #apt_box_tag_related_words').val(''); 
 
                jQuery("#apt_box_message").fadeIn("fast"); 
                document.getElementById("apt_box_message").innerHTML="OK"; 
                jQuery("#apt_box_message").delay(1000).fadeOut("slow"); 
            } 
        }); 
    }); 
});
function apt_enter_submit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
} 
</script>
    HTML:
    Thanks.
     
    Solved! View solution.
    Devtard, Oct 9, 2012 IP
  2. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #2
    Does anybody know how to do this?
     
    Devtard, Oct 15, 2012 IP
  3. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #3
     
    Rukbat, Oct 15, 2012 IP
    Devtard likes this.
  4. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #4
    Cool. Any idea how to call it so I won't have to copy the whole first function there? I am total Javascript analphabet. :)
     
    Devtard, Oct 15, 2012 IP
  5. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #5
    The same way you call any function.

    
//function you want to call
function myFunction(myArgument) {
    //whatever
}
function apt_enter_submit(e) {
    if (e.which == 13) {
    myFunction("xyz");
    }
}
    PHP:
     
    Rukbat, Oct 15, 2012 IP
  6. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #6
    Yeah but there is that jQuery thing which is even more unclear to me than "normal" Javascript.

    So I think that I whould create another function for submitting the data via AJAX and this function should be called by jQuery and in case that the condition is true. Could you help me with this (practical example or rather the solution of my problem would be nice :))?
     
    Devtard, Oct 15, 2012 IP
  7. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #7
    jQuery is only half the AJAX package - you'll need PHP on the server to accept the AJAX call and return some data.

    The jQuery AJAX function is simple.

    

        $.ajax({
            url: 'ajax.php', //this is the PHP file that will handle the server-side stuff
            data: { //any additional data you want to send to the PHP file
                'mode' : 'update',
                'loc' : $('#loc').val()
            },
            success: function(result) {
               //do what you want with result - it's the data PHP echos back
            }
        });
    Code (markup):
     
    Rukbat, Oct 15, 2012 IP
  8. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #8
    Okay but how should I call the previously declared AJAX function in the condition so I won'T have to repeat the entire code as shown in the code below?

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>  
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('#apt_create_a_new_tag_ajax_button').click(function () { 
 
 
    var apt_box_tag_name = $('#apt_box_tag_name').val(); 
    var apt_box_tag_related_words = $('#apt_box_tag_related_words').val(); 
 
    var data = { 
        action: 'apt_custom_box_save_tag', 
        apt_box_tag_name: apt_box_tag_name, 
        apt_box_tag_related_words: apt_box_tag_related_words, 
        }; 
 
    $.ajax ({ 
        type: 'POST', 
        url: ajaxurl, 
        data: data, 
        success: function() { 
                jQuery('#apt_box_tag_name, #apt_box_tag_related_words').val(''); 
 
                jQuery("#apt_box_message").fadeIn("fast"); 
                document.getElementById("apt_box_message").innerHTML="OK"; 
                jQuery("#apt_box_message").delay(1000).fadeOut("slow"); 
            } 
        }); 
    }); 
}); 
function apt_enter_submit(e) { 
    if (e.which == 13) {






[B]  //TODO:this should not be repeated again[/B]
var apt_box_tag_name = $('#apt_box_tag_name').val(); 
    var apt_box_tag_related_words = $('#apt_box_tag_related_words').val(); 
 
    var data = { 
        action: 'apt_custom_box_save_tag', 
        apt_box_tag_name: apt_box_tag_name, 
        apt_box_tag_related_words: apt_box_tag_related_words, 
        }; 
 
    $.ajax ({ 
        type: 'POST', 
        url: ajaxurl, 
        data: data, 
        success: function() { 
                jQuery('#apt_box_tag_name, #apt_box_tag_related_words').val(''); 
 
                jQuery("#apt_box_message").fadeIn("fast"); 
                document.getElementById("apt_box_message").innerHTML="OK"; 
                jQuery("#apt_box_message").delay(1000).fadeOut("slow"); 
            } 
        });

[B]  //-TODO:this should not be repeated again[/B]

 
        var $targ = $(e.target); 
 
        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) { 
            var focusNext = false; 
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){ 
                if (this === e.target) { 
                    focusNext = true; 
                } 
                else if (focusNext){ 
                    $(this).focus(); 
                    return false; 
                } 
            }); 
 
            return false; 
        } 
    } 
} 
</script>
    Code (markup):
     
    Devtard, Oct 16, 2012 IP
  9. #9
    Something like this?

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>  
<script type="text/javascript">

function new_tag_button() {
	var apt_box_tag_name = $('#apt_box_tag_name').val(); 
    var apt_box_tag_related_words = $('#apt_box_tag_related_words').val(); 
 
    var data = { 
        action: 'apt_custom_box_save_tag', 
        apt_box_tag_name: apt_box_tag_name, 
        apt_box_tag_related_words: apt_box_tag_related_words, 
        }; 
 
    $.ajax ({ 
        type: 'POST', 
        url: ajaxurl, 
        data: data, 
        success: function() { 
                jQuery('#apt_box_tag_name, #apt_box_tag_related_words').val(''); 
                jQuery("#apt_box_message").fadeIn("fast"); 
                document.getElementById("apt_box_message").innerHTML="OK"; 
                jQuery("#apt_box_message").delay(1000).fadeOut("slow"); 
            } 
        }); 
    }); 
}

function apt_enter_submit(e) { 
    if (e.which == 13)
	{
		new_tag_button();
		
		var $targ = $(e.target); 

		if (!$targ.is("textarea") && !$targ.is(":button,:submit")) { 
			var focusNext = false; 
			$(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){ 
				if (this === e.target) { 
					focusNext = true; 
				} 
				else if (focusNext){ 
					$(this).focus(); 
					return false; 
				} 
			}); 

			return false; 
		} 
    } 
}

$(function(){ 

	// Bind new_tag_button()
    $('#apt_create_a_new_tag_ajax_button').click(function () { new_tag_button(); }); 
	
});
 
</script>
    HTML:
     
    Wogan, Oct 17, 2012 IP
    Devtard likes this.
  10. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #10
    Yes. But after pasting the code to my script the form is sent when I hit enter. Any idea what might be wrong with it?
     
    Devtard, Oct 17, 2012 IP
  11. Wogan

    Wogan Peon

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    0
    #11
    I'm not sure how to make your code work in the context of the rest of your system, but this is how you prevent enter-submits in jQuery:

            <form action="" method="POST">
            <input type="text" id="mytextbox">
            <input type="submit" value="Submit">
        </form>

        <script type="text/javascript">
            $(function(){
                $("#mytextbox").keydown(function(event){ // Catch .keydown
                    if (event.which == 13) {
                        event.preventDefault(); // The keypress was Enter, stop everything else
                    }
                });
            });
        </script>
    HTML:
     
    Last edited: Oct 17, 2012
    Wogan, Oct 17, 2012 IP
  12. Devtard

    Devtard Notable Member

    Messages:
    850
    Likes Received:
    133
    Best Answers:
    4
    Trophy Points:
    220
    #12
    I removed one extra curly bracket that should not be there, it works now. Thank you very much!
     
    Devtard, Oct 17, 2012 IP
  13. EitanXOR

    EitanXOR Greenhorn

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #13
    EitanXOR, Oct 21, 2012 IP