Javascript help :(

Cuchulain · 11 Feb 2011 at 14:25

I've got an irritating problem I'm trying to fix, I got a CSV file that's uploaded every night to one of my servers containing usernames/passwords for customers email accounts, I set up a simple search function using csv2table (jquery) and it works perfectly if you click the submit button but the moaners that be want to be able to press return to bring up the results as well, as there's no form involved I can't work out what to do

Any ideas?

Code:

<input id="email" type="text">
<input
       class="btn1"
       id="emailstuff"
       type    =  "button"
       onclick="$('#viewSettingWhere').csv2table('newemail.csv',{
                    where : [{'username': 'like %q%'.replace('q', $('#email').val())}]
                });"
       value="Search">

Thanks

AJK · 11 Feb 2011 at 14:32

http://api.jquery.com/keypress/ is what you need. You can handle a keypress event on the textbox, and if the key pressed was enter (code 13 IIRC) then submit the form.

Code:

jQuery("#email").keypress(function(key) {
    if (key.keyCode == "13") {
        // do stuff
    }
});

Cuchulain · 11 Feb 2011 at 14:33

Cheers, turned out it was easier than that, just wrapped it in a form and onsubmitted the function.

AJK · 11 Feb 2011 at 14:33

Yeah, or that. I assumed there was some reason why you weren't using a form tag

GravyMonster · 11 Feb 2011 at 14:43

Seen as you were already using jQ I've moved the all the processing code to jQs event handlers as it's just nicer than using the outdated HTML event attributes.

Code:

<html>

<head>
	<script type="text/javascript">
		$(function() {
			$('#email').keyup(function(e) { 
				// Use keyup event as keypress event has issues in non moz browsers
				if(e.keyCode == 13) // Enter pressed
					fillTable();
			})
			
			$("#emailstuff").click(function() {
				fillTable();
			}
		});
		
		
		function fillTable() {
			$('#viewSettingWhere').csv2table('newemail.csv',{
				where : [{'username': 'like %q%'.replace('q', $('#email').val())}]
            });
		};
	</script>
</head>

<body>
	<input id="email" type="text">
	<input class="btn1" id="emailstuff" type="button" value="Search">
</body>

</html>

Damn. Ginger stepchild etc.