Question

I need to make a jQuery function dynamic (parametrized). Currently i need to bind every form id with the jquery but I have more than a hundred forms ids so repeting the code would be meaningless just for same code but different id.

For eg:

Following is the form. Its id is “rat”

            <form id="rat" action="" method="post">

                <strong id="rating_title">Rate this: </strong>

                <select name="rate">
                    <?php foreach (get_options() as $id => $title): ?>
                        <option value="<?php echo $id ?>" <?php echo $id==3 ? 'selected="selected"' : '' ?> /><?php echo $title ?></option>
                    <?php endforeach; ?>
                </select>

                <input type="submit" value="Rate it!" />

            </form>

Below is the javascript attached this form

<script type="text/javascript">
    $(function(){
        $("#rat").children().not("select, #rating_title").hide();

        // Create caption element
        var $caption = $('<div id="caption"/>');

        // Create stars
        $("#rat").stars({
            inputType: "select",
            oneVoteOnly: true,
            captionEl: $caption,
            callback: function(ui, type, value)
            {
                // Display message to the user at the begining of request
                $("#messages").text("Saving...").fadeIn(30);

                // Send request to the server using POST method
                /* NOTE: 
                    The same PHP script is used for the FORM submission when Javascript is not available.
                    The only difference in script execution is the returned value. 
                    For AJAX call we expect an JSON object to be returned. 
                    The JSON object contains additional data we can use to update other elements on the page.
                    To distinguish the AJAX request in PHP script, check if the $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.
                    (see: demo4.php)
                */ 
                $.post("demo4.php", {rate: value}, function(json)
                {
                    // Change widget's title
                    $("#rating_title").text("Average rating");

                    // Select stars from "Average rating" control to match the returned average rating value
                    ui.select(Math.round(json.avg));

                    // Update widget's caption
                    $caption.text(" (" + json.votes + " votes; " + json.avg + ")");

                    // Display confirmation message to the user
                    $("#messages").text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);

                    // Hide confirmation message after 2 sec...
                    setTimeout(function(){
                        $("#messages").fadeOut(1000)
                    }, 2000);

                }, "json");
            }
        });

        // Since the <option value="3"> was selected by default, we must remove this selection from Stars.
        $("#rat").stars("selectID", -1);

        // Append caption element !after! the Stars
        $caption.appendTo("#rat");

        // Create element to use for confirmation messages
        $('<div id="messages"/>').appendTo("#rat");
    });
</script>

As you can see its binding to the “rat” form using $(“#rat”).

In the same manner I have around 100 forms with different ids and I need to bind each of every form in similar fashion…except for changes in few parameters.
For eg: if form id-“rat2” then $(“#rat2”)… $(“#messages”)… etc

Is there a way I can encapsulate the above entire javascript/jquery code to make it parametrized.

Please help!!!

Answer 1

Would it make more sense to add a class to each “rating” form, and just apply your code to each form with that class?

<form class="rating" id="???">
  ...
</form>

Then add your jQuery:

<script>
    $(function(){
        $('form.rating').each(function(){
            //apply logic to each form (extract id's from "this" form as needed)
        });
    });
</script>