Search code examples
phpjavascriptajaxsubmitpage-refresh

how to run php code on submit button without refreshing/ reloading the page


I want to execute some php code on submit button click without refreshing/reloading my page. Is it possible? also i have javascript function on page load that's why i don't want to refresh my page. thanks in advance.

<?php
if(isset($_POST["search"]))
{
$show = "SELECT * FROM data";
$rs = mysql_query($show) or die(mysql_error());
 $add_to_textbox = "<input type='button' name='btn' value='add' />";
#****results in Grid****
    echo "<table width='360px' border='1' cellpadding='2'>";
    $rowID=1;
while($row = mysql_fetch_array($rs))
{
    echo "<tr>";
    echo "<td width='130px' id='name.$rowID.'>$row[Name]</td>";
    echo "<td width='230px' id='link.$rowID.'><a href = '$row[Link]'>$row[Link]</a></td>";
    echo "<td width='130px' onclick='Display($rowID);'>$add_to_textbox</td>";
    echo "</tr>";
    $rowID++;
}
    echo "</table>";
#**********************
mysql_free_result($rs);
}
?>

<script type="text/javascript">
function Display(rowID){
    var linkVal = document.getElementById('link'+rowID+'').innerHTML.replace(/<\/?[^>]+(>|$)/g, "\n");
    document.getElementById("name").value = document.getElementById('name'+rowID+'').innerHTML;
    document.getElementById("link").value = linkVal; 
    }
</script>

here is my code


Solution

  • Well, you need to use the javascript / ajax.

    Example: on your submit link (a href for exaple), add call-in-to js function submitMe and pass on whatever variables you need

    function submitMe() {
        jQuery(function($) {    
            $.ajax( {           
                url : "some_php_page.php?action=getsession",
                type : "GET",
                success : function(data) {
                    alert ("works!"); //or use data string to show something else
                    }
                });
            });
        }
    

    IF you want to change some content dynamically, it is easy- you just need to create tags, and assign ID to them : <div id="Dynamic"> </div>

    Then you load ANYTHING between those two tags using

    document.getElementById("Dynamic").innerHTML = "<b>BOOM!</b>";
    

    Meaning that you calling area between two tags and loading something into them. The same way you GET data from that place:

    alert(document.getElementById("Dynamic").innerHTML);
    

    Please read this: http://www.tizag.com/javascriptT/javascript-getelementbyid.php

    In addition, play and experiment with DOM elements and learn how they interact. It is not hard, just takes some time to grasp all concepts.