Add a class to div only if specific input button in clicked

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?

Where do you define those two inputs and/or add click handlers to them? Add the code there. onclick="if (this.id = 'input1') { add class to popup };" kinda thing. — Marc B
– Marc B, Commented Aug 25, 2011 at 16:08
I'd avoid using onclick=... in favor of using jquery's .click() or even better is to use .live(); — kasdega
– kasdega, Commented Aug 25, 2011 at 16:54

maxedison · Accepted Answer · 2011-08-25 16:23:36Z

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/

answered Aug 25, 2011 at 16:23

maxedison

17.6k15 gold badges73 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kasdega · Accepted Answer · 2011-08-25 16:49:48Z

1

I would just bind a click to the input1. Here's a JSFiddle that does some things that should be very helpful for you.

$(document).ready(function() {
    $("#input1").live("click", function() {
        $(".giftPopup").addClass("special");
    });
});

Unless you have a very good reason to use onclick you should use jquery to bind the events using .live() or .delegate(). You could also use .click() in this case but when you're messing around adding elements to the DOM, you have to use .live() or .delegate() because .click() won't work on elements added to the DOM later.

edited Aug 25, 2011 at 16:49

answered Aug 25, 2011 at 16:37

kasdega

18.9k13 gold badges56 silver badges90 bronze badges

3 Comments

Jason Over a year ago

I actually don't want it to work on elements added later. I want the change to be a one time change, only when the button is clicked.

Jason Over a year ago

great answer though. I realize that normally, you are supposed to avoid click

kasdega Over a year ago

Using .live() or .delegate() never hurts.

ShankarSangoli · Accepted Answer · 2011-08-25 16:23:36Z

0

You can modify the for loop in your code as below. I hope this is what you are looking for.

       for(var i = 1; i < args.length; i++) {
           var inputID = args[i];
           var $input = $("#"+inputID);
           $input.addClass("CO_form_alert").parent().addClass("alertRed");
           $input.focus().keydown(function() { $('.giftPopup').hide(); }).change(function() { $('.giftPopup').hide(); }).blur(function() { $('.giftPopup').hide(); });

           if(i == 1){
              $input.click(function(){
                 $(".giftPopup").addClass("specifyClassNameHere");
              });
           }
        }

answered Aug 25, 2011 at 16:23

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

kasdega Over a year ago

I have to say that usually your answers are fantastic, but this one I just don't agree with. I just can't see how modifying the code above instead of leveraging the power of jquery is a good way to go.

Collectives™ on Stack Overflow

Add a class to div only if specific input button in clicked

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related