CODEWITHSUNDEEP
javascriptjqueryhtml
patel
patel

Reputation: 635

using one one event for multiple purpose

I have buttons like this : 

 <input class="btnRating"  type="button" value="Project Rate" />

 <input class="btnRating"  type="button" value=" Education Rate" />

 <input class="btnRating"  type="button" value="Achievement Rate" />

i want to use 3 buttons as per different click ,different purpose

and in one event i want to write like this : 

// Event For Open Modal Pop for rating
$('.btnRating').on("click", function (ele) {

if(thisbutton ==Project )
{
// do something for project related
}

if(thisbutton ==Education)
{
// do something for Education related
}

if(thisbutton ==Achievement)
{
// do something for project related
}

});

how do i write event like this?

Upvotes: 0

Views: 116

Answers (13)

Breno Gazzola
Breno Gazzola

Reputation: 2162

If clicking each button has completely different consequences

It's more logical if they are handled by different events. Different meaning they don't share most of their code. Even if you don't want to write three events (why? it's the same amount of lines of codes), it fits better the use case.

If clicking each button has similar consequences

This seems to be your case, since all buttons have "Rate" in their name. If so, you are right that you should only have one event, since most of the code will be the same. However, instead of using different code paths (if/else or switches), it's better if you add a data- attribute to your buttons to so that, by using the value in those attributes, the same code can behave in different ways. Let's say the only difference between them is a "Rate Multiplier". You could do this:

<input type="text" id="costToMultiplyByRate" />
<input class="btnRating"  type="button" value="Project Rate" data-rate="5" />
<input class="btnRating"  type="button" value=" Education Rate" data-rate="4" />
<input class="btnRating"  type="button" value="Achievement Rate" data-rate="10" />

$('.btnRating').on("click", function (ele) {
    var rate = ele.getAttribute("data-rate");
    var cost = document.getElementById("costToMultiplyByRate");
    alert(rate * cost);
}

However, if by adding only one or two data attributes you can't make the three buttons use exactly the same code, I suggest you use multiple events.

Upvotes: 1

Sohil Desai
Sohil Desai

Reputation: 2988

this will help you 

$(document).ready(function(e) {
    $('.btnRating').on("click", function (ele) {
        var btnType = $(this).val();
        switch(btnType) {
            case 'Project Rate':
                    // your action;
                break;
            case ' Education Rate':
                // your action;
                break;
            case 'Achievement Rate':
                // your action;
                break;
        }
    });
});

Upvotes: 0

patel.milanb
patel.milanb

Reputation: 5992

I suggest you use data-attribute to achieve this. as comparing string can cause more time for checking...

I have created jsfiddle for this.

http://jsfiddle.net/x4yyp/2/

$(document).on("click", ".btnRating", function () {
    var optionValue = $(this).data("optionvalue");
    if(optionValue == 1)
    {
        alert("hello");
    }
    else if(optionValue == 2)
    {
        alert("your name");
    }
    else if(optionValue == 3)
    {
        alert("your email");
    }

});

Upvotes: 0

Aamir Afridi
Aamir Afridi

Reputation: 6411

Use event.delegate http://api.jquery.com/delegate/ - something like http://jsfiddle.net/aamir/zw27q/2/

I will recommend that use unique css classes for each buttons as if you change the Value of each input than you have to change your JS as well. So instead of checking for val=='Project Rate you should check for $this.hasClass('rateProj')

$(".btns").delegate("input", "click", function () {
    var $this = $(this),
        val = $this.val();

    if (val =='Project Rate') {
        //code
    }
    //more if statements
});

Upvotes: 0

Prateek
Prateek

Reputation: 6965

Try this:

$('.btnRating').on("click", function (ele) {
    var value = $(this).val();

    if(value.indexOf("Project Rate") != -1)
    {
        // do something
    }
    else if(value.indexOf("Education Rate") != -1)
    {
       // do something
    }
    else if(value.indexOf("Achievement Rate") != -1)
    {
       // do something
    }
});

Upvotes: 0

akbar ali
akbar ali

Reputation: 437

$('.btnRating').click(function (ele) {

if($(this).val()=="Project Rate" )
{
// do something for project related

}

else if($(this).val() =="Education Rate")
{
// do something for Education related

}

else if($(this).val() =="Achievement Rate")
{
// do something for project related

}

});

Demo here http://jsfiddle.net/3Mf3j/

Upvotes: 0

Catalin
Catalin

Reputation: 11721

<input class="btnRating"  type="button" data-action="project" value="Project Rate" />
<input class="btnRating"  type="button" data-action="education" value=" Education Rate" />
<input class="btnRating"  type="button" data-action="achievement" value="Achievement Rate" />

$(".btnRating").click(function () {
    var action = $(this).attr("data-action");
    if (action === "project") {
        // do project

    } else if (action === "education") {
        // do education
    }
});

This way you can have any value (text) on the button, which is good if you want to globalize your website in the future.

Upvotes: 0

Krish R
Krish R

Reputation: 22711

Can you please try this,

In HTML section:

    <input class="btnRating" id="ProjectRate"  type="button" value="Project Rate" />

     <input class="btnRating"  id="EducationRate" type="button" value=" Education Rate" />

     <input class="btnRating" id="AchievementRate"  type="button" value="Achievement Rate" />

In Script:

 <script>
    $(function(){       
        // Event For Open Modal Pop for rating
        $('.btnRating').click(function (ele) {

            var thisbutton = $(this).attr('id');

            if(thisbutton =="ProjectRate")
            {
            // do something for project related
            }else if(thisbutton =="EducationRate")
            {
            // do something for Education related
            }else if(thisbutton =="AchievementRate")
            {
            // do something for project related
            }else{
            // do your default
              }         
        });
    });

</script>

Upvotes: 0

user3106724
user3106724

Reputation:

add attribute : data-event

<input class="btnRating"  type="button" value="Project Rate" data-event="project" />

then u can use a switch

$('.btnRating').on("click", function (ele) {
    switch($(this).data("event")) {
        case "project" : 
            //fire your function
            break;
    }
}

Upvotes: 0

vborutenko
vborutenko

Reputation: 4443

I recommend add classes to buttons

<input class="btnRating project"  type="button" value="Project Rate" />

<input class="btnRating education"  type="button" value=" Education Rate" />

<input class="btnRating Achievement"  type="button" value="Achievement Rate" />

And then use separated events

$('.btnRating.project').on("click", function (ele) {
 // do something for project related
});

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try:

$('.btnRating').on("click", function (ele) {
    var val = $(this).val();
    if(val == "Project Rate"){
    }
    else if(val == " Education Rate"){
    }
    else if(val == "Achievement Rate"){
    }
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can test the value of the cbutton

$('.btnRating').on("click", function (ele) {
    if (this.value == 'Project Rate') {
        // do something for project related
    } else if (this.value == ' Education Rate') {
        // do something for Education related
    } else if (this.value == 'Achievement Rate') {
        // do something for project related
    }
});

Better solution is to have a unique selector for the buttons and write separate handlers for each one

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

$('.btnRating').on("click", function (ele) {
    if (this.value.indexOf('Project') > -1) {
        // do something for project related
    } else if (this.value.indexOf('Education') > -1) {
        // do something for Education related
    } else if (this.value.indexOf('Achievement') > -1) {
        // do something for project related
    }
});

Upvotes: 0

Related Questions