I have a form like this,
<form id="frm" method="post">
<input type="text" name="inp_txt" id="inp_txt"/>
<input type="submit" name="sbtn" value="send" id="sbtn">
</form>
and this is my javascript code
$(function(){
var request ;
$('form#frm').submit(function(e){
e.preventDefault();
if(request){
request.abort();
}
var $form = $(this);
var $inputs = $form.find('inputs');
var serailize = $form.serialize();
console.log(serailize);
$inputs.prop('disabled',true);
request = $.ajax({
url:'form.php',
type:'post',
data:serailize
});
request.done(function(response, textStatus, jqXHR){
console.log('oky');
$.ajax({
url: "form.php",
type: "get",
success: function(data){
console.log(data);
},
error:function(){
console.log('bad');
}
});
});
request.fail(function(jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
request.always(function(){
$inputs.prop("disabled", false);
})
})
})
and my php code in form.php
<?php
$name = $_POST['inp_txt'];
echo(json_encode(array(data=>$name)));
?>
but I have big problem ,
In this section of my javascript code :
$.ajax({
url: "form.php",
type: "get",
success: function(data){
console.log(data);
},
error:function(){
console.log('bad');
}
I get the message from post.php in console.log(data)
Undefined index:inp_txt in htdocs\phpajax\form.php
Please help me solve this problem,
thanks
set data type to json in ajax's settings object:
$.ajax({
dataType :'json',
url: "form.php",
type: "get",
success: function(data){
console.log(data);
},
error:function(e){
console.log(e);
}
});
});
Related
showing this error: XHR failed to load: AJAX
This is ajax code:
$.ajax({
url:"<?php echo base_url();?>food/register_user/",
type:"ajax",
traditional:true,
data:{data},
dataType:"json",
success:function(data){
console.log(data);
alert(data);
},
error: function() {
alert("Error");
}
});
Try this
$.ajax({
url:"<?php echo base_url();?>food/register_user/",
type:"post",
traditional:true,
data:{data},
dataType:"json",
success:function(data){
console.log(data);
alert(data);
},
error: function() {
alert("Error");
} });
I think the closing braces on the error function is the problem it should look like this
$.ajax({
url: "<?php echo base_url();?>food/register_user/",
type: "ajax",
traditional: true,
data: {
data
},
dataType: "json",
success: function(data) {
console.log(data);
alert(data);
},
error: function() {
alert("Error");
}
});
When I try to run the following JQuery ajax, I get an error saying that a parameter is missing and it will not send the data. I can't find any syntax errors. What am I doing wrong?
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: fd,
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}
Why not use jQuery native form encoder?
$.ajax({
...
data: $('#illustrationTypeForm').serializeArray(),
...
});
Try This
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: $('#illustrationTypeForm').serializeArray(),
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}
To make ajax request using jQuery a type 'POST' you can do this by following code :
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// you will get response from your php page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
i am trying to send datas from ajax to php, but php doesnt show it. both scripts are on the same site: "testpage.php".
jQuery/Ajax:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var test = "bla";
$.ajax({
url: "testpage.php",
type: "post",
data: test,
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
</script>
PHP:
<?php
if(isset($_POST["test"])) {
$test2 = $_POST;
echo $test2;
echo "Test";
}
?>
I do not see the result of PHP
use data: {test:test}, & alert your response to see your result.
success: function (response) {
alert(response);
},
Or Just append your response to html.
You need to use data: {test:sometext} if you want to do a POST request.
The PHP can't see the value in the post because you only send bla in the PHP body. You have to send test=bla. But jQuery can do it automatically by sending data : { test : test }.
$(document).ready(function() {
$("#button").click(function() {
var test = "bla";
$.ajax({
url: "testpage.php",
type: "post",
data: {
test : test
},
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
You can use serialize() method into your $.ajax();
Something like:
$.ajax({
url: "testpage.php",
type: "post",
data: $("#myForm input").serialize(),
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
Then try to accessing your post data by form input name.
var data = {
'test': "bla",
};
$.ajax({
type: "POST",
url: "testpage.php",
data: data,
dataType: "json"
}).done(function(response){
console.log(response);
}).fail(function(response){
console.log(response);
});
Hi I am new to ajax and jquery and I need to submit a form with ajax when a button "mainbutton" is clicked. Here is my code
$(document).ready(function(){
$("#mainbutton").click(function(){
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
alert("success");
},
error: function(jqXHR, textStatus, errorThrown)
{
alert("error");
}
});
e.preventDefault(); //STOP default action
});
$("#ajaxform").submit(); //Submit the form
});
});
when I try that I get Error and my form is not submitted and my servlet doPost() is not called. Where is my mistake ?
Looks like it's working to me. See Fiddle.
https://jsfiddle.net/louisnovick/qyLmvjax/
JS
$(document).ready(function(){
$("#mainbutton").click(function(){
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : '/echo/html/',
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
alert("success");
},
error: function(jqXHR, textStatus, errorThrown)
{
alert("error");
}
});
e.preventDefault(); //STOP default action
});
$("#ajaxform").submit(); //Submit the form
});
});
HTML
<form method="POST" id="ajaxform">
<label for="test">Test Input</label>
<input type='text' name="test">
<button type="submit" id="mainbutton">Submit</button>
</form>
Is it possible to make an ajax request inside another ajax request?
because I need some data from first ajax request to make the next ajax request.
First I'm using Google Maps API to get LAT & LNG, after that I use that LAT & LNG to request Instagram API (search based location).
Once again, is this possible, and if so how?
$('input#search').click(function(e) {
e.preventDefault();
var source = $('select[name=state] option:selected').text()+' '+$('select[name=city] option:selected').text()+' '+$('select[name=area] option:selected').text();
var source = source.replace(/ /g, '+');
if(working == false) {
working = true;
$(this).replaceWith('<span id="big_loading"></span>');
$.ajax({
type:'POST',
url:'/killtime_local/ajax/location/maps.json',
dataType:'json',
cache: false,
data:'via=ajax&address='+source,
success:function(results) {
// this is where i get the latlng
}
});
} else {
alert('please, be patient!');
}
});
Here is an example:
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page=' + btn_page,
success: function (data) {
var a = data; // This line shows error.
$.ajax({
type: "post",
url: "example.php",
data: 'page=' + a,
success: function (data) {
}
});
}
});
Call second ajax from 'complete'
Here is the example
var dt='';
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
dt=data;
/*Do something*/
},
complete:function(){
$.ajax({
var a=dt; // This line shows error.
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
/*do some thing in second function*/
},
});
}
});
This is just an example. You may like to customize it as per your requirement.
$.ajax({
url: 'ajax/test1.html',
success: function(data1) {
alert('Request 1 was performed.');
$.ajax({
type: 'POST',
url: url,
data: data1, //pass data1 to second request
success: successHandler, // handler if second request succeeds
dataType: dataType
});
}
});
For more details : see this
$.ajax({
url: "<?php echo site_url('upToWeb/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function (data) {
if (data.web == 0) {
if (confirm('Data product upToWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 1},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
else {
if (confirm('Data product DownFromWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 0},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});