I want to make a form where you write a number send it with Jquery and is shown by PHP without refreshing the page ,by far i have this code but if preventDefault() is placed it will post but the content is not shown,also if i remove it, the content is shown but the page will pe refreshed.
Javascript:
$('#testut').unbind('submit').bind('submit',function(ev) {
ev.preventDefault();
$.ajax({
type: 'post',
url: 'incerc.php',
data: $('form').serialize(),
success: function () {
$('.success').fadeIn(500);
}
});
});
}
HTML:
Test
<br />
<?php
if(isset($_POST['test'])) {
$test = $_POST['test'];
$numar = $_POST['numar'];
echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';
} else {
echo 'No <br />';
}
?>
<div id='testut'>
<form id='test' method='post'>
<input type='text' name='numar'><br />
<input type='submit' name='test' onclick ='check()' value='Place'><br />
<span class='success' style='display:none'>Order was successfully placed.</span>
</form>
</div>
I wanted to execute a query after the POST in php,the example was just for test, so i managed to do this(on example).
Javascript:
function check(){
$("#test").submit(function(e)
{ var numar = $('#numar').val();
var test = $('#testim').val();
var dataString = 'numar='+ numar + '&test=' + test;
$.ajax(
{
url : 'incerc.php',
type: "POST",
data : dataString,
success:function(data, textStatus, jqXHR)
{
$('.success').fadeIn(500);
$('body').load('incerc.php?'+dataString);
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.success').html("Nu a mers");
}
});
e.preventDefault();
e.unbind();
});
}
HTML:
<?php if(isset($_GET['test'])){
$test = $_GET['numar'];
$numar = $_GET['numar'];
echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';}
else{echo 'No <br />';} ?>
<div id='testut'>
<form name='test' id='test' method='POST'>
<input type='text' id='numar' name='numar'><br />
<input type='submit' id='testim' name='test' onclick ='check()' value='Place'><br />
<span class='success' style='display:none'>Order was successfully placed.</span>
</form>
So now the body will load when the data is sent sucessfully , and will get the result correctly ,also in the adress bar it will still show 'incerc.php' not 'incerc.php?'+dataString.
If I understand you correctly, you're making a dynamic ajax request and expecting your if(isset($_POST['test']))
to run on success. That won't work. That PHP code is static and will only be run to build the page. What you'll need to do is dynamically build the results after receiving a response from the POST operation.
The form response should return JSON, i.e.: { orderName: 'test name', numar: 1321321 }
Then your success function would look like (roughly):
function( data ){
$('.success')
.html( 'Order name:' + data.orderName + '<br />Number:' + data.numar + '<br />' )
.fadeIn(500);
}
Don't use unbind submit and bind submit, eventually it is of no use, 'cause the default action (form submitting on submit button click) is not been prevented in this way.
If you really trying to get data from another php file (incerc.php) to your page, you need to prevent your page from been reloaded by preventDefault() method inside your event handler:
$('#test').on('submit', function(ev){
ev.preventDefault();
var form = $(this);
$.post('incerc.php', form.serialize())
.done(function(data){
$("#form_result").html('Number:' + data + '<br />');
})
.fail(function(){
$("#form_result").html('No <br />');
});
$('.success').fadeIn(500);
});
And without page reload you can only insert response from $.post ajax call to some DOM element (#form_result in my example) of your page, to show it. Here is the HTML for my example:
<div id="form_result"></div>
<div id='testut'>
<form id='test' method='post'>
<input type='text' name='numar'><br />
<input type='submit' name='test' value='Place'><br />
<span class='success' style='display:none'>Order was successfully placed.</span>
</form>
</div>
Then you don't need to pass $_POST['test'] - value of your submit button - in ajax call to the incerc.php, 'cause it can be simply found in the DOM.
However, if you are trying to get data from the same page of yours, you will need the right PHP implementation of ajax response in the beginning:
if(isset($_POST['test']))
{
$test = $_POST['test'];
$numar = $_POST['numar'];
echo 'Order name:'.$test.'<br />Number:'.$numar.'<br />';
die();
}
...