Running a PHP form using AJAX

Question

I have an admin panel running AngularJS, however when submitted forms it had an error. But I seemed to fix this using javascript, but I'm trying to figure out a way to where when the submit button is clicked, and there is an error - it shows that error on the page rather than an updated javascript. I have this:

<?php

      require_once('../dist/inc/config.php');  
      session_start();

            if ($_SESSION['username']) { 

            }else {  

        header("Location: /");  
    }    
?>

<?php
        $grab = mysql_query("SELECT * FROM settings");
        $row = mysql_fetch_assoc($grab);
            $val = $row['val'];

        if ($_POST) {       

            $val = mysql_real_escape_string($_POST['val']);

            if ($val == "") {   

                echo ('<div class="alert alert-error" style="margin: 8px; text-align: center;"><strong>Error:</strong> Please enter a site title!</div>');

            }       

            else {

            // update the site title

                $updateSite = "UPDATE settings SET val='$val'";

                mysql_query($updateSite) or die("MySQL Error - Could not update site title");

                    echo ('<div class="alert alert-success" style="margin: 8px; text-align: center;"><strong>Success:</strong> The site name has been successfully updated!</div>');        

            }

        }   

    ?>


    <form action="ajax/yo.php" method="POST" id="load" name="#load">
            <input name="val" type="text" value="<?php echo $val ?>" size="31"/>
            <input name="submit" type="submit" value="Update" class="button" /> 
    </form>

And here's my javascript that's on the same page as my PHP information above:

<script type="text/javascript">
    var frm = $('#load');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>

Like I said, It updates the SQL perfectly. It's just I don't want the javascript to execute, I'd rather have the PHP errors from the echo's, appear on the page. However I think that's a problem, because my AngularJS runs like this:

page#ajax/yo.php

If it's any help, I use the http://devoops.me/ admin panel.

You should not be using [mysql_*](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) functions because they are depreicated, please see the link for more info. — BRBT, May 30 '15 at 03:06

score 1 · Answer 1 · answered May 30 '15 at 03:11

1

try this

$.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert(data);
        }
    });

answered May 30 '15 at 03:11

roullie

2,830
16
26

score 0 · Answer 2 · answered May 30 '15 at 03:45

Usually the right approach to process forms "inside" angular is to use AJAX, because otherwise you easily may break angular's page logic by reloading the page, any angular application is a single page web app, and any communication with server should be done through AJAX.

In your case, you can show server message by adding its response to DOM may be like this:

success: function (data) {
            frm.append(data);
        }

But, there of course may be some reasons, to not to do so, then, if you set action attribute to <form> brouser should send your POST request, and try to render the response as new page and because of it, response should contain full page in this case, not only message! so it should look like:

echo '<form action="ajax/yo.php" method="POST" id="load" name="#load">
        <input name="val" type="text" value="<?php echo $val ?>" size="31"/>
        <input name="submit" type="submit" value="Update" class="button" /> 
        <div class="alert alert-success" style="margin: 8px; text-align: center;"><strong>Success:</strong> The site name has been successfully updated!</div>
      </form> ';

but in fact it may be required to include much more in response, because again, if not use AJAX you should return a whole page (if not using some framing technique) including angular and then angular page will initiated from scratch.

Running a PHP form using AJAX

2 Answers2