Submitting php file without refreshing

Question

I am trying to make a single php form to make some calculations, however when pressing the submit button nothing happens.

I am trying to use ajaxForm to do this

Code:

<?php

  if(isset($_POST['submit'], $_POST['v'], $_POST['e'], $_POST['ei'])){
$v = $_POST['v']; //Dyrets vægt
$v = pow($v, 0.75);
$s = (int)$_POST['s']; //Stofskifte
$e = (int)$_POST['e']; //Energibehov
$ei = (int)$_POST['ei']; //Energiindhold i foder

$vaegt = ($v);
$stofskift = round($vaegt * $s, 2);
$de = $stofskift * $e;
$eif = round($de / $ei * 100, 2);
$result = round($eif * 4.2, 2);

$arr = array( 'testDiv' => $result );
  echo json_encode( $arr );

 exit;
};

//$string = '(((('.$v.')*'.$s.')*'.$e.')/'.$ei.' * 100) * 4,2';

?>

<html>
<head>
<title>Hej</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="jsFile.js"></script>
</head>
<body>
<form method="POST" action="" class="ajaxForm" >
<label for="vaegt">Weight</label><br>
<input type="text" name="v" id="v" placeholder="Weight"><br>
<label for="type">Art</label><br>
<select size="7" name="s" id="s"> 
  <option value="70" >Fugl</option>
</select><br><br>
<label for="str">Størrelse</label><br>
<select size="7" name="e" id="e"> 
  <option value="1.25" >Absolut</option>
</select><br><br>

<label for="foder">Foder</label><br>
<select size="4" name="ei" id="ei"> 
  <option value="60" >Plante</option>
</select><br><br>

<input type="submit" value="Udregn" name="submit" class="ajaxSubmit"/>

</form>

<div id="testDiv">result here</div>
</body>
</html>

jsFile.js:

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

Are you getting any errors? I'm not lazy but... Maybe a JS fiddle or something if you want us to debug it? — ficuscr, Mar 07 '14 at 20:14
You aren't exiting() from the php code after handling the json stuff, so your html form becomes part of the ajax response, leading to corrupted json, killing the rest of your ajax handler. Check your browser's debug console (shift-ctrl-J) in firefox, and you'll probably see various json-related errors. — Marc B, Mar 07 '14 at 20:16
Try changing `echo json_encode( $arr );` to `die( json_encode( $arr ) );`. — Nathan Dawson, Mar 07 '14 at 20:20
@MarcB i tried to exit after echo json_encode( $arr ); but it doesn't work — Emil Elkjær, Mar 07 '14 at 20:24
Can you check what the HTTP response is from PHP? There might be PHP errors. — Robbie Wxyz, Mar 07 '14 at 20:28
check for any OTHER output from your function as well. you're checking if 'submit' and 'v' are set, but if 's', 'e', and 'ei' aren't you're going to get php warnings mixed into the output. — Marc B, Mar 07 '14 at 20:28
@MarcB I updated the code and included a exit;(edited code here as well) but it still does not change
result here — Emil Elkjær, Mar 07 '14 at 20:34
Debug, debug, debug, debug, and debug! http://stackoverflow.com/a/21617685/2191572 — MonkeyZeus, Mar 07 '14 at 20:34
Solved! See `Problem #2` in my edits. I found this by putting all the files on my own server and testing. — Robbie Wxyz, Mar 07 '14 at 20:37

Robbie Wxyz · Accepted Answer · 2014-03-07T20:36:49.307

Problem #1:

In your if statement that handles a POST request, you output a bunch of JSON. But you forgot to exit output when you're done. So, your output looks like:

{"a":"b","c":"d"/* more json here*/}
<html>
<head>
/* more html here */

Which, obviously is not valid JSON. jQuery, if the response is not real JSON, calls the error method instead of the success method.

To fix the problem, add this line before the end of your PHP if statement:

exit;

That will quit the PHP script before all of the HTML is outputted.

Problem #2:

$(this).serialize() only grabs inputs that have values. This excludes buttons. So, unlike a normal form submit, the submit button is not included in the POST request. This is causing your first if statement to evaluate to false.

So, just remove the first of the nestled if statements (the if(isset($_POST['submit'])){ one) and it will work correctly.

Hope OP takes away soemthing from the advice on debugging in the browser if [nothing else](http://4.bp.blogspot.com/_D_Z-D2tzi14/S8TRIo4br3I/AAAAAAAACv4/Zh7_GcMlRKo/s400/ALOT.png). — ficuscr, Mar 07 '14 at 20:45

Submitting php file without refreshing

1 Answers1