Ajax function to call php function in same pag doesn't work

Question

My problem is that Ajax in same php file as php function I want to call doesn't work. I want to make that when I press button the page won't reload and the function would be called. I putted my tag with ajax on the bottom and php function at the top of page if that makes sense. Here's my code :

Ajax :

<script>
          function getData() {
              $.ajax({
                    type: "GET",
                    url: "view.php",
                    data: {action: 'PakeistiCashreg'}, 
                    success: function(data){
                        alert('Kasos aparatas sėkmingai pakeistas');
                    }
                  });
                }
          </script>

Php function I want to call :

if(isset($_GET["action"])) {
   if($_GET["action"] == "PakeistiCashreg") {
      mysql_query("UPDATE ".$table['invoices']." SET `CashReg` = '".$_POST['CashRegInput']."' WHERE `id` = '156' LIMIT 1");
   }
}

And the button where action happens :

<form method="post"><?php echo CASHREG; ?>:<select name="CashRegInput" id="CashRegInput" class="Input3"><option></option>
                    <?php
                    foreach($CashReg as $key => $value) {
                        echo '<option value="'.$value.'">'.$value.'</option>';
                    }
                    ?>
                </select><button name="PakeistiCashreg" onclick="getData();" id="PakeistiCashreg">Pakeisti kasos aparatą</button></form>

Answer 1

try this : Markup:

<form name="some-form" method="post" onsubmit="getData(event);">
    <?php echo CASHREG; ?>:
    <select name="CashRegInput" id="CashRegInput" class="Input3">
        <option></option>
        <?php
            foreach($CashReg as $key => $value) {
                echo '<option value="'.$value.'">'.$value.'</option>';
            }
        ?>
    </select>
    <button type="submit" name="PakeistiCashreg" id="PakeistiCashreg">Pakeisti kasos aparatą</button>
</form>

script:

function getData(e) {
    e.preventDefault();
    var cashRegInput = $('#CashRegInput').val();
    if (cashRegInput) {
        $.ajax({
            type: "POST",
            url: "view.php",
            data: { action: 'PakeistiCashreg', CashRegInput: cashRegInput },
            success: function(data) {
                alert('Kasos aparatas sėkmingai pakeistas');
            }
        });
    }
}

Let me know if it works for you.

Answer 2

I'm not sure, but I think you're saying that you've got a file view.php which contains both the page which is originally loaded and the handler for the ajax call. If that's not what you're saying then ignore this answer.

Doing an ajax request is not the same as loading a page. When the client receives the ajax response, all it does is call the appropriate handler. In this case, all it will do is alert('Kasos aparatas sėkmingai pakeistas'); . It's attempting to run the handler when the page is first loaded, except that you've added a check on $_GET("action") which should prevent this. You need a separate URL and a separate handler for the ajax call. For example, you could change the ajax call URL to action.php , then move the snippet with the database call into a separate file called action.php .

(Actually, PHP is really only intended for returning HTML, not for ajax calls. so it would be better to replace action.php with a handler in some other language/framework. But PHP will work, and in any case I don't know enough about your setup to advise on how to do this.)