In my coding, I have a button Text as "Invite" for each user.

When I on click the button, the button text should be change as 'Pending Request", by using document.getElementById() the first button text is changing. What my requirement is what all the button I am clicking the particular button text should be change.

But for me the First button text alone changing when clicking other buttons.

Here is a coding:

Html code:

<div class="button_wrapper">
     <input onclick="getInvitevalue(__iProfId__)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>              
</div> 

Java Script code:

function getInvitevalue(profileid) {
    //alert(profileid);
    var x = document.getElementById("InviteTeacher");
    if (x.value == "Pending Request")
        x.value = "Invite";
    else
        x.value = "Pending Request";
}

How I can resolve this

In my coding, I have a button Text as "Invite" for each user.

When I on click the button, the button text should be change as 'Pending Request", by using document.getElementById() the first button text is changing. What my requirement is what all the button I am clicking the particular button text should be change.

But for me the First button text alone changing when clicking other buttons.

Here is a coding:

Html code:

<div class="button_wrapper">
     <input onclick="getInvitevalue(__iProfId__)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>              
</div> 

Java Script code:

function getInvitevalue(profileid) {
    //alert(profileid);
    var x = document.getElementById("InviteTeacher");
    if (x.value == "Pending Request")
        x.value = "Invite";
    else
        x.value = "Pending Request";
}

How I can resolve this

• javascript
• jquery
• html

• 2 This is a JS question.. consider retagging it if u want JS answers :) – krishwader Commented Jul 17, 2013 at 3:51

4 Answers 4

What you need is a toggle mechanic on that button. Something like this with jQuery would do the trick:

$('#InviteTeacher').toggle(function(){
    $(this).val('Pending Request');
}, function(){
    $(this).val('Invite');
});

You can take a look at this working FIDDLE.

UPDATE:

If you need this behavior for many similar buttons, using the class attribute would be a much nicer choice than the id attribute. In that case, you could have a markup like this:

<input type="button" value="Invite" name="InviteTeacher" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent1012" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent2230" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent3125" class="InviteButton" />

That will have little effect on the script:

$('.InviteButton').toggle(function(){
    $(this).val('Pending Request');
}, function(){
    $(this).val('Invite');
});

Hope this helps :-)

You can use java script like this:

Html Code:

<div class="button_wrapper">
    <input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher" />
    <input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(36)" />
    <input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(37)" />
    <input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(3)" />
</div>

Java Script Code:

<script>
    function getInvitevalue(profileid) {
        //alert(profileid);
        var x = document.getElementById(profileid);
        if (x.value == "Pending Request") x.value = "Invite";
        else x.value = "Pending Request";
    }
</script>

Why don't you just do:

<div class="button_wrapper">
    <input onclick="getInvitevalue(123)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher123" id= "InviteTeacher"/>              
</div> 

<script type="text/javascript">
    function getInvitevalue(id) {
        var button = document.getElementsByClassName("InviteTeacher" + id)[0];
        if (button.value === "Pending Request") {
            button.value = "Invite";
        } else {
            button.value = "Pending Request";
        }
    }
</script>

It has been tested. You can pass this into the parameter of a function inside of attribute event to define itself. In this case, this is equivalent to: document.getElementById("InviteTeacher")

Script in jQuery (it is tagged):

<div class="button_wrapper">
    <input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher123" id= "InviteTeacher"/>              
</div> 

<script type="text/javascript">
    $("input[class^='InviteTeacher']").bind("click", function () {
        var button = $(this);
        if (button.val() === "Pending Request") {
            button.val("Invite");
        } else {
            button.val("Pending Request");
        }
    });
</script>

You could use class name for achieving this:

HTML:

<div class="button_wrapper">
       <input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher1"/>    
    <input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher2"/>   
    <input type="button" value="Pending Request" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher3"/>   
   </div> 

JS:

$(function(){
    $('div.button_wrapper').on('click', '.InviteTeacher', function(){
        if(this.value == 'Pending Request')
             $(this).val('Invite');
    })
});

Working example: http://jsfiddle/H96sB/1/

Update:

Replace the jquery function with this:

   function getInvitevalue(idValue){
    $('div.button_wrapper').on('click', '#InviteTeacher'+idValue, function(){
        if(this.value == 'Pending Request')
             $(this).val('Invite');
    });
  }