Databases
StackOverflow2013
Postsdbo
POAJAX Resubmitting Whole Page With No Result
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAJAX Resubmitting Whole Page With No Result
    text
    copied!<p>Let me start off by saying that I am brand new to using AJAX, just started yesterday.</p> <p>Here is my code:</p> <pre><code>&lt;?php if (isset($_POST['number1'],$_POST['operation'],$_POST['number2'])) { $number1 = trim(strip_tags($_POST['number1'])); $number2 = trim(strip_tags($_POST['number2'])); $operation = $_POST['operation']; if ($operation == "plus") { $answer = $number1 + $number2; $operation = "+"; } if ($operation == "minus") { $answer = $number1 - $number2; $operation = "&amp;#8211;"; } if ($operation == "multiply") { $answer = $number1 * $number2; $operation = "&amp;#215;"; } if ($operation == "divide") { $answer = $number1 / $number2; $operation = "&amp;#247;"; } $output = '&lt;br /&gt;&lt;center&gt;&lt;div id="success"&gt;&lt;span style="color: orange; font-size: 20px;"&gt;'.number_format($number1).'&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style="color: blue; font-size: 24px; font-weight:bold;"&gt;'.$operation.'&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style="color: orange; font-size: 20px;"&gt;'.number_format($number2).'&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style="color: blue; font-size: 24px; font-weight:bold;"&gt;=&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span style="color: purple; font-size: 20px;"&gt;'.number_format($answer).'&lt;/span&gt;&lt;/div&gt; '; echo $output; die(); } ?&gt; &lt;form method="POST" id='calculatorForm'&gt; &lt;input type="number" name="number1" id="url" placeholder="Enter your first number" autofocus required /&gt; &lt;br /&gt; &lt;select name="operation" id="url" style="width:100%;"&gt; &lt;option value="operation"&gt;Select A Operation:&lt;/option&gt; &lt;option value="plus"&gt;Plus&lt;/option&gt; &lt;option value="minus"&gt;Minus&lt;/option&gt; &lt;option value="multiply"&gt;Multiply&lt;/option&gt; &lt;option value="divide"&gt;Divide&lt;/option&gt; &lt;/select&gt; &lt;br /&gt; &lt;input type="number" name="number2" id="url" placeholder="Enter your second number" required /&gt; &lt;input type="submit" class="enter" id="submit" name="submit" value="Calculate!"&gt; &lt;br /&gt; &lt;span style="font-size:40px;color: purple;font-wight: bold;"&gt;Result: &lt;span id='result'&gt;0&lt;/span&gt;&lt;/span&gt; &lt;/form&gt; &lt;script&gt; $('#calculatorForm').submit(function(){ var num1 = $('input[name="number1"]').val(); var oper = $('select[name="operation"]').val(); var num2 = $('input[name="number2"]').val(); $.ajax({ type: "post", data: {number1: num1, operation: oper, number2: num2}, success: function(data){ $('#result').html(data); } }); return false; }); &lt;/script&gt; </code></pre> <p>When I try to run this code on my page with a form submit, it gives me the whole page again under my form, and with no calculation of what I entered.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload