Question

I have a web page that has multiple tabs, which all do basically the same thing, except for a few minor differences. for example:

    <div id="tabs-1">
    <form id="buybackForm">...
    <div id="tabs-2"><!--Video Games-->
            <form id="buybackFormVideoGames">....
    <div id="tabs-3"><!--Movies -->

        <form id="buybackFormMovies">

etc. and each tab is used to get information of the book, video game, movie etc. The forms are the same, except to get the form to work I have had to change the id’s of each tab, title for books, videoTitle for videos and movieTitle for movies. The back end looks pretty much the same for each tab, with just the form id changed.

    $('#isbn').keydown(function (e) { - for the books
     $('#platform').keydown(function (e) { - video games
    $('#Movieupc').keydown(function (e) { - for movies

All of the functions are basically the same with the names of the form fields changed. Is there a better way to do this? Is it possible to use javascript in some way (GetElementbyId maybe?) so I don’t have to write out each function for every tab? For each tab I have about 6 different functions to perform as well as make an ajax call.

Answer 1

You could use a named function

function myFunction(){ }

$('#isbn').keydown(myFunction);
$('#platform').keydown(myFunction);
$('#Movieupc').keydown(myFunction);

Or Use a common class on the all the elements.

$('.myCommonClass').keydown(function (e) { });

If they are dynamic, and you are uisng jQuery 1.7+ you can us on.

$(document).on("keydown", ".myCommonClass", function(){} );