CODEWITHSUNDEEP
javascriptphphtml
mrdragon
mrdragon

Reputation: 247

Onclick without reload page

I have 2 url like this: 

    <td><a href='infomation/gc_details_2.php?id=<?php echo $row['trans_id']?>'><input type='button' id="yes"  value='Yes'></a></td>
    <td><a href='infomation/del_notifi_2.php?id=<?php echo $row['trans_id']?>'><input type='button' value='No'></a></td>

When onclick button Yes it request to gc_details_2.php and reload all page with search result. Now i want when click button Yes without reload page. How should i do? Thank all

Upvotes: 2

Views: 13149

Answers (5)

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this..

    <td><input type='button' id="yes"  class="<?php echo $row['trans_id']?>" value='Yes'></td>

    $("#yes").click(function(){
        var trans_id=$(this).attr("class");
        $.ajax({
           url:'infomation/gc_details_2.php',
            data:{"id":trans_id},      
            type:"GET",
            success:function(data){
alert("ssfasfas");
            }
        });
    });

Upvotes: 1

Disha V.
Disha V.

Reputation: 1864

You should use ajax instead. Also, It's not good practice to use button inside link. Either you go with link or button. I have removed link here and used button.

HTML:

<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>

JQuery:

$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});

Upvotes: 1

aldrin27
aldrin27

Reputation: 3407

Use AJAX.

For example:

 $('#yes').click(function() {
    $.ajax({
      url: your_url,
      type: (GET or POST),
      data: {data: your_data},
      success: function(response) {
         alert('Success!');
       }
    });
  });

Upvotes: 1

Blake
Blake

Reputation: 2314

Style your anchor tags to have your desired button effect, and dump the button:

Html:

<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>

Javascript:

jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});

Result container:

<div id="result"></div>

This will catch any object that you click on with the class "ajax-fetch" and follow the href, then load it into the result div. Use some CSS to style the button class.

Upvotes: 1

Patrick Mutwiri
Patrick Mutwiri

Reputation: 1351

This is the simplest of all $('#yes').click(function(){ $.get('gc_details_2.php', function(data) { $('html').html(data); }); return false; }); And it Always works

Upvotes: 1

Related Questions