javascript - Onclick without reload page - Stack Overflow

admin管理员组

文章数量:1302179

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

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

• javascript
• php
• html

Share Improve this question Follow asked Aug 12, 2015 at 4:40 mrdragonmrdragon 24711 gold badge22 silver badges1414 bronze badges 3

• 1 Both the anchor and button are going to capture clicks, style the anchors to look like buttons instead. – Bankzilla Commented Aug 12, 2015 at 4:45
• Have you check your console, it gives any error? – Kausha Mehta Commented Aug 13, 2015 at 10:44
• Trying to clarify your intent, 1) Are you trying to send GET requests based on which button is clicked? If so, what should the browser do when it receives the data from the request(GET request should ideally only get data and not modify anything on server). 2) If you are trying to send some data/update data on server, then it should be a POST/PUT/PATCH/DELETE request. On both the cases, you would be better off having Buttons triggering JS Ajax calls to server as you don't want a page refresh that acpanies anchor. – Edwin Clement Commented Apr 1, 2020 at 7:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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

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.

Use AJAX.

For example:

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

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;
});

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");
            }
        });
    });

本文标签： javascriptOnclick without reload pageStack Overflow