Changing a button using ajax which runs a php code

Question

i am new to JQuery AJAX and i need help with my code. What i want is when i click the add button it will change to delete button. but what happens in my code is that it changes to delete button but when i click delete button, it does not change back to add button. i want it to look like some sort of toggle. here's my html code with javascript:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#add_button').click(function(){
            var temp = $('#add_button').val();
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {add_button: temp},
                success: function(data){
                    $('div').html(data);
                }
            });
        });

        $('#delete_button').click(function(){
            var temp = $('#delete_button').val();
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {delete_button: temp},
                success: function(data){
                    $('div').html(data);
                }
            });
        });
    });
</script>
</head>

<body>
    <div>
        <button id="add_button" name="add" value="testing">Add</button>
    </div>
</body>

and here's my php code:

<?php


if(isset($_POST["add_button"])){

    echo "<button id='delete_button' name='delete' value='testing'>Delete</button>";

}


if(isset($_POST["delete_button"])){

    echo "<button id='add_button' name='add' value='testing'>Add</button>";

}


?>

please help. thanks

Why dont you hide button the button clicked and show other one — Anshul Nigam
– Anshul Nigam, Commented May 22, 2015 at 3:27
That's because your click listener isn't assigned to newly added #delete_button, you should attach listener to div using .on() — Aprian
– Aprian, Commented May 22, 2015 at 3:33

Anshul Nigam · Accepted Answer · 2015-05-22 03:34:10Z

1

You can try hiding the button clicked and show other button something like

  $('#add_button').click(function(){
            var temp = $('#add_button').val();            
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {add_button: temp},
                success: function(data){
                    $('div').html(data);
                    $('#add_button').hide();
                    $('#delete_button').show();

                }
            });
        });

        $('#delete_button').click(function(){
            var temp = $('#delete_button').val();
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {delete_button: temp},
                success: function(data){
                    $('div').html(data);
                    $('#delete_button').hide();
                    $('#add_button').show();
                }
            });
        });

Or you can use jquery toggle $( "#add_button").toggle()

http://api.jquery.com/toggle/

edited May 22, 2015 at 3:34

answered May 22, 2015 at 3:31

Anshul Nigam

1,6281 gold badge12 silver badges26 bronze badges

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

4 Comments

Joshua Over a year ago

thanks but i need to run the php code. i'll be running database query in the php code soon.

Anshul Nigam Over a year ago

How is running query affecting visibility of button?

Joshua Over a year ago

if add button is clicked, run some database query on the php file then change it to delete button. and when delete button is clicked, vice versa

Anshul Nigam Over a year ago

so whats the problem in it, code is hiding button on ajax success , meaning when you get success response from server

Said Kholov · Accepted Answer · 2015-05-22 03:47:20Z

Your solution wasn't working, because delete button event handler was being attached to DOM before the DOM element(delete button) was initialised.

So, one event for both buttons would be enough:

$('button').click(function(){
        var button = $(this); 
        if(button.data('type') == 'add') {    
            var postData =  {add_button: button.val()};
        } else {
            var postData =  {delete_button: button.val()};
        }
        $.ajax({
            url: "ajax_test.php",
            type: "POST",
            data: postData,
            success: function(data){
                $('div').html(data);
            }
        });
    });

HTML:

<div>
    <button data-type="add" name="add" value="testing">Add</button>
</div>

PHP:

<?php


if(isset($_POST["add_button"])){

    echo "<button data-type='delete' name='delete' value='testing'>Delete</button>";

}


if(isset($_POST["delete_button"])){

    echo "<button data-type='add' name='add' value='testing'>Add</button>";

}


?>

Aprian · Accepted Answer · 2015-05-22 03:56:23Z

0

<script>
    $(document).ready(function () {
        $('div').on('click', '#add_button', function(){
            var temp = $(this).val();
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {add_button: temp},
                success: function(data){
                    $('div').html(data);
                }
            });
        });

        $('div').on('click', '#delete_button', function(){
            var temp = $(this).val();
            $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {delete_button: temp},
                success: function(data){
                    $('div').html(data);
                }
            });
        });
    });
</script>

Your code won't work on dynamically added elements, while above code works.

Read http://api.jquery.com/on/ for more informations.

edited May 22, 2015 at 3:56

answered May 22, 2015 at 3:38

Aprian

1,7281 gold badge14 silver badges26 bronze badges

1 Comment

Aprian Over a year ago

Search for "live event in jquery", if you work with dynamically added elements, you shouldn't directly attach listener to the id/class of the element. Attach to higher hierarchy element (e.g. document, or its direct parent) instead.

Guruprasad J Rao · Accepted Answer · 2015-05-22 03:32:22Z

0

Try the below code:

Give a class name to button:

<button id="add_button" class="btnOp" name="add" value="testing">Add</button>

Then you can add a js click event to that classname and change its data accordingly:

$('.btnOp').on('click',function()
{
    var text=$(this).text();
    if(text==="Add")
    {
         var temp = $('#add_button').val();
         $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {add_button: temp},
                success: function(data){
                    $('div').html(data);
                    $('.btnOp').val('testing');
                }
         });
     }
     else
     { 
         var temp = $('#delete_button').val();
         $.ajax({
                url: "ajax_test.php",
                type: "POST",
                data: {delete_button: temp},
                success: function(data){
                    $('div').html(data);
                    $('.btnOp').val('testing');
                }
         });
      }
});

This will help you to change button values and functionality on success of ajax and acts like kind of toggle

answered May 22, 2015 at 3:32

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

3 Comments

Aprian Over a year ago

$('div').html(data); replaces all contents in div, so your click listener won't work.

Joshua Over a year ago

@Aprian what should i do then?

Guruprasad J Rao Over a year ago

Try keeping that button outside the div!!

Collectives™ on Stack Overflow

Changing a button using ajax which runs a php code

4 Answers 4

4 Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related