How To Change Value or Any Attribute On Dynamic Button HTML

Question

I am very blur how to change my dynamic button attribute, I try many ways but not what I want.

Let look my code first:-

function changeBtnText(id) {
            alert(id);
            alert($('#id[0]').attr("value"));
            //alert(ivalue);
            if ($("#id").val() !==null) { $("#id").val("PB"); return }
            if ($("#id").text =='PB') { $("#id").val("P"); return }
            if (ivalue == 'P') { $("#id").val("B"); return }
            if (ivalue == 'B') { $("#id").val("PB"); return }
        }

            <ul>
                        <li>
                            <input type="button" name="trip[]" value="PB" class="field" onclick="changeBtnText(id);return false">
                        </li>
                        <li>
                            <input type="text" name="platno[]" class="field">
                        </li>
                        <li>
                            <input type="text" name="amount[]" class="field">
                        </li>
                    </ul>

My target is each time I click button id="trip[]" I want value inside this button will change from-to like:-

1. if empty value than change to value = "PB"
2. if value="PB" than change to value = "P"
3. if value="P" than change to value = "B"
4. if value="B" than change to value empty again

I already many days but cannot configure it out and hope anybody on this forum already face same problem like above please help me.

Thanks on advance for reading this question and reply my question.

Thanks you.

Answer 1

Thanks so much guys!!! Thanks Ehsan, Akshay padwal and Cam where yours all so good on JQuery and JavaScript. I am very appreciate that!.

I also have answer based on my situation. What I notice is - Catch Click Event - on division and then compile it to get or to change attribute inside my Dynamic Button. I write down below a code to retrieve and change attribute Dynamic Button:-

$(".yourDIVname").on('click', '.yourClassname', function () {

            var iValue = this.value;
            alert(iValue);
            if (iValue == 'PB') { $(this).val("B"); return }
            if (iValue == 'B') { $(this).val("P"); return }
            if (iValue == 'P') { $(this).val("PB"); return }
            if (iValue == '') { $(this).val("PB"); return }

            //console.log(this.value);
        });

I think thats all, now I can sleep well....

Thanks you again for helping.

Answer 2

pass this as function parameter into html function

<ul>
                        <li>


                       <input type="button" name="trip[]" value="PB" class="field" onclick="changeBtnText(this)">
                    </li>
                    <li>
                        <input type="text" name="platno[]" class="field">
                    </li>
                    <li>
                        <input type="text" name="amount[]" class="field">
                    </li>
                </ul>

write this js into your function

function changeBtnText(ele){
        if($(ele).attr('value')== "PB"){
            $(ele).attr('value',"P")
        }else if($(ele).attr('value')== "P"){
            $(ele).attr('value',"B")
        }else if($(ele).attr('value')== "B"){
            $(ele).attr('value',"")
        }else{
            $(ele).attr('value',"PB")
        }
    }

as what you are trying to achieve by using id define id attribute in html and then use this code

html

<ul>
       <li>
             <input type="button" name="trip[]" value="PB" id="trip" class="field" onclick="changeBtnText(id)">
        </li>
         <li>
             <input type="text" name="platno[]" class="field">
         </li>
          <li>
         <input type="text" name="amount[]" class="field">
         </li>
 </ul>

JS

function changeBtnText(id){
        if($('#'+id).attr('value')== "PB"){
            $('#'+id).attr('value',"P")
        }else if($('#'+id).attr('value')== "P"){
            $('#'+id).attr('value',"B")
        }else if($('#'+id).attr('value')== "B"){
            $('#'+id).attr('value',"")
        }else{
            $('#'+id).attr('value',"PB")
        }
    }

Answer 3

Your code appears to not be referencing the element clicked. You could either access it via the this variable within the jQuery event handler or via the event.target. Use of an if/else if sequence would also be preferable to early termination within sequential if statements.

Also, you want to make sure the first block of your if statement checks if it is equal to null rather than not equal; the not equal check will make it impossible to reach later cases. Lastly, you may consider moving the onclick javascript invocation into your JavaScript. Here's a working fiddle.

HTML

<ul>
  <li>
    <input type="button" name="trip[]" value="PB" class="field">
  </li>
  <li>
    <input type="text" name="platno[]" class="field">
  </li>
  <li>
    <input type="text" name="amount[]" class="field">
  </li>
</ul>

JavaScript

$(document).ready(function(){
 $("input[type='button']").click(changeBtnText);
});
function changeBtnText( event ) {
  if (event.target.value === null) {        
    event.target.value = "PB"; 
  } else if (event.target.value == 'PB') { 
    event.target.value = "P";
  } else if (event.target.value == 'P') { 
    event.target.value = "B";
  } else if (event.target.value == 'B') { 
    event.target.value = "PB";
  }
}

Answer 4

Try this :

$(document).ready(function(){

    $("input[type=button]").on("click",function(){

        var value = $(this).val();

        if (value == "")
            $(this).val("PB");

        else if (value == "PB")
            $(this).val("P");

        else if (value == "P")
            $(this).val("B");

        else
            $(this).val("");

    })
})

Final code :

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        
         <ul>
                        <li>
                            <input type="button" name="trip[]" value="PB" class="field">
                        </li>
                        <li>
                            <input type="text" name="platno[]" class="field">
                        </li>
                        <li>
                            <input type="text" name="amount[]" class="field">
                        </li>
                    </ul>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).ready(function(){

            $("input[type=button]").on("click",function(){

                var value = $(this).val();

                if (value == "")
                    $(this).val("PB");

                else if (value == "PB")
                    $(this).val("P");

                else if (value == "P")
                    $(this).val("B");

                else
                    $(this).val("");

            })
        })

        </script>
    </body>
</html>