How to trigger a function after hitting enter

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.

 

Does anybody know how to do this?

 

Cool. Any idea how to call it so I won't have to copy the whole first function there? I am total Javascript analphabet.

 

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:

 

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 )?

 

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):

 

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):

 

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:

 

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?

 

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:

 

I removed one extra curly bracket that should not be there, it works now. Thank you very much!

 

Check out http://snipplr.com/view/3850/ and http://api.jquery.com/keypress/