insert and delete functionality with ajax

Question

I am working on basic functionality of insert,add,delete and update using ajax.
I have done little functionality write now..actually i want all functionality in a grid .

I put all html code inside a for loop.. this loop will execute till total num rows.. first execution of loop is fine, problem occur after this... next time when i click on delete button ajax call is not working.

Need help on this....

I have 2 files.. form.php and operation.php

code of form.php..

$(document).ready(function(){
    $("#delete").click(function(){ 
        var id=$("#uid").val();                   
        $.post("operation.php",{ID:id},function(data){
            $("#result").html(data);
        });               
    });
});

for($i=0;$i<2;$i++)
{        
    echo "<input type='text' value=".mysql_result($all_records, $i, "id")." name='uid' id='uid'>
    <input type='text' value=".mysql_result($all_records, $i,"name")." name='name' id='email' placeholder='Email'>  
    <input type='text' value=".mysql_result($all_records, $i,"email")." name='email' id='email' placeholder='Email'>
    <input type='password' value=".mysql_result($all_records, $i,"password")." name='pass' id='pass' placeholder='Password'>
    <input type='submit'name='delete' id='delete' value='Delete'>            
    <input  type='submit'name='update' id='update' value='Update'>";
    echo "</td></tr>";            
}

operation.php

write now i put only one line code for checking purpose...

echo  $_POST['ID'];

Html Ids are unique element so as i suppose you're looping and eventually It will create two same name of uid which will make a problem use class instead of id or make your uid unique. — Saad Suri
– Saad Suri, Commented Jul 31, 2017 at 11:45
ajax call working when i used class instead of id but it display same value every time... @SaadSuri — user3608987
– user3608987, Commented Jul 31, 2017 at 11:52

Mahbubul Islam · Accepted Answer · 2017-07-31 12:02:46Z

1

Well i think you know that ids should have unique names. It is not a good idea to give same id to multiple elements in the same page.

I think the code bellow will solve your purpose.

$(document).ready(function(){
    $(".delete").click(function(){ 
        var id=$(this).data('id');
        $.post("operation.php",{ID:id},function(data){
            $("#result").html(data);
        });               
    });
});

for($i=0; $i<2; $i++)
{        
    echo "<input type='text' value='".mysql_result($all_records, $i, "id")."' name='uid' class='uid'>
    <input type='text' value='".mysql_result($all_records, $i,"name")."' name='name' class='name' placeholder='Email'>  
    <input type='text' value='".mysql_result($all_records, $i,"email")."' name='email' class='email' placeholder='Email'>
    <input type='password' value='".mysql_result($all_records, $i,"password")."' name='pass' class='pass' placeholder='Password'>
    <input type='button'name='delete' data-id='".mysql_result($all_records, $i, "id")."' class='delete' value='Delete'>            
    <input  type='submit' name='update' class='update' value='Update'>";
    echo "</td></tr>";
}

Try to understand it and compare it with your previous code. Let me know if you need further assistance.

edited Jul 31, 2017 at 12:02

answered Jul 31, 2017 at 11:57

Mahbubul Islam

1,0181 gold badge12 silver badges24 bronze badges

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

1 Comment

Mahbubul Islam Over a year ago

Happy to know that :)

Collectives™ on Stack Overflow

insert and delete functionality with ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related