do you know whats wrong with my code? I thought it would work. I just want to echo the data from input to div without refreshing website. Ajax sent data, but php didnt show them and i really dont understand why.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(document).on("submit", ".form", function()
{
event.preventDefault();
$.ajax({
type: 'POST',
url: 'http://dev.nostools.cz/',
data: $('.form').serialize(),
success: function () {
//alert('form was submitted');
}
});
})
});
</script>
<div style="width: 250px; height: 100px;">
<div id="show" style="width: 100%; height: 80%; overflow-y: scroll; border: 1px solid black;">
<?php
if (isset($_POST['submit']))
{
echo $_POST['console']; //echo data or do something here
}
?>
</div>
<div style="width: 100%; height: 20%;">
<form class="form" method="post">
<input id="console" style="padding: 0; width: 67%;" type="text" name="console" />
<input style="padding: 0; width: 31%;" type="submit" name="submit" />
</form>
</div>
</div>
As php is server side scripting language php script runs only on server side ... Here you are trying to handle/run php script on client side which is not correct way.. to show data make following changes in your success function.
$.ajax({
type: 'POST',
url: 'http://dev.nostools.cz/',
data: $('.form').serialize(),
***success: function (data) {***
$("#show").html($("#console").val());
}
});
<?php
$_POST['console'];
//process your data.
echo $processed_data;
?>