Question

I have a function that displays a hidden div for error messaging in a form.

For this function, I need the div to display in 2 different spots depending on the scenario. So I need to add a class if a specific submit button is clicked. I could write a separate function, but I would like to include it within my current function that handles the display of the div:

function giftAlert(){
    var args = arguments;
    if(args.length > 1) {
        // check that custom alert was called with at least two arguments
        var msg = args[0];
        $('.errorPopup').hide();
      $('.couponPopup').hide();
      $('.promotionPopup').hide();
    $("*").removeClass("alertRed");
        $("*").removeClass("CO_form_alert");


        var div = $(".giftPopup");
        div.css({"display":"block"});
        if (div.length == 0) {
            div = $("<div class='giftPopup' onclick='$(this).hide();'></div>");
            $("body").prepend(div);
        }
       div.html(msg);
        for(var i = 1; i < args.length; i++) {
            var inputID = args[i];
           $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
       $('#' + inputID).focus();
       $('#' + inputID).keydown(function() { $('.giftPopup').hide(); }).change(function() { $('.giftPopup').hide(); }).blur(function() { $('.giftPopup').hide(); });

        }
     }

}

So where this bit is:

var div = $(".giftPopup");
            div.css({"display":"block"});

I would like to add some logic, if input1 is clicked then giftPopup gets an additional class, but only for input1.

help?

Answer 1

Assuming your input1 element is made up of the html <input class="input1" type=button />, all you need to do in jQuery is:

$('.input1').click(function(){
    $('.giftPopup').addClass('whatever');
});

Example: http://jsfiddle.net/ebiewener/Dsb8X/