Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change css of current button only while all buttons have same class after ajax success callback with jquery

I show query results in html table and in each row is a button for run update query whit ajax.
i need to change button color after click and success ajax callback.
when I use:

function myFunction() {
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $ab["code"]; ?>+'&action3='+value,
    success: function(result) {
        $(this).css('background-color','#f50519');
    }
   })
}

button color not change. if use class or ID in $().css() it work but change all buttons if use class and if use id the script run on first button.
please help me!

I read all related questions in stackoverflow.

I use unique number after all variable and move script before php loop is closed.
its work but applies to last row only.

    foreach($result as $ab=>$v) {
        ?>
            <tr>
                <td><?php $no = $ab+1; echo $no; ?></td>
                <td><?php echo $result[$ab]["name"];?></td>
                <td><?php echo $result[$ab]["code"];?></td>
                <td><?php echo $result[$ab]["count(ab.id)"];?></td>
                <form id="form<?php echo $no;?>">
                <td><select name="ac3<?php echo $no;?>" id="action3<?php echo $no;?>">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select></td>
                <td><button id="bt<?php echo $no;?>" class="btn2" onclick="myFunction()">submit</button></input></td>
                </form>
            </tr>
            <script>
function myFunction() {
var e<?php echo $no;?> = document.getElementById("action3<?php echo $no;?>");
var value<?php echo $no;?> = e<?php echo $no;?>.value;
var text<?php echo $no;?> = e<?php echo $no;?>.options[e<?php echo $no;?>.selectedIndex].text;
   
$('#form<?php echo $no;?>').submit(function(e<?php echo $no;?>){
    e<?php echo $no;?>.preventDefault();
    
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $result[$ab]["code"]; ?>+'&action3='+value<?php echo $no;?>,
    success: function(result) {
                $('#bt<?php echo $no;?>').css('background-color','#f50519');
                }
    })
})
}
</script>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved the problem in this way:

    foreach($result as $ab=>$v) {
        ?>
            <tr>
                <td><?php $no = $ab+1; echo $no; ?></td>
                <td><?php echo $result[$ab]["name"];?></td>
                <td><?php echo $result[$ab]["code"];?></td>
                <td><?php echo $result[$ab]["count(ab.id)"];?></td>
                <form id="form<?php echo $no;?>">
                <td><select id="action3<?php echo $no;?>">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select></td>
                <td><button id="bt<?php echo $no;?>" class="btn2" onclick="myFunction<?php echo $no;?>()">submit</button></td>
                </form>
            </tr>
            <script>
function myFunction<?php echo $no;?>() {
var e = document.getElementById("action3<?php echo $no;?>");
var value = e.value;
var text = e.options[e.selectedIndex].text;
  $('#form<?php echo $no;?>').submit(function(e){
    e.preventDefault();
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+'<?php echo $result[$ab]["code"]; ?>'+'&action3='+value,
    success: function(result) {
                $('#bt<?php echo $no;?>').css('background-color','#f50519');
                }
    })
})
}
</script>

  2. 0

    I assume there should be multiple forms in each row having a button each. So here is the jQuery solution for you if that is the case:

    $(document).ready(function() {
    $("#demoform").submit(function(e) {
      e.preventDefault();
      var form = $(this); // USE THIS LINE (ITS FORM VARIABLE)
      $.ajax({          
          type: "post",
          url: URL HERE,
          data: DATA HERE,
          success: function(result){
              form.children("button").addClass('active'); // USE FORM VARIABLE AS ABOVE > CHILDREN
          }
      });
    });
});

    Try above! Hope it will help! Thanks!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search