ajax request not working

Question

2.33/5 (2 votes)

See more:

I want to submit form with ajax request but its not working !! I cant see any error but its not working my code is here

JavaScript

$(document).ready(function() {
 
$("#btn").click(function(){

	var name = $("#inputname").val();	

	var email = $("#inputEmail").val();
	
	var feed = $("#feedback").val();
	var send = "InputName=" + name + "&InputEmail=" + email + "&Feedback=" + feed ; 	
	alert(send); 
	$.ajax({
		url:"Feedback_conx.php",
		type:"POST",
		data:send,
		success: function(data1){
		$("#disp").html(data1);	
		}
		
	})
	
		});
	

			});

and php file is

PHP

 <?php

include_once("db_conx.php");
$name = $_POST['InputName'];
$email = $_POST['InputEmail'];
$feedback = $_POST['Feedback'];

if($name && $email && $feedback !=""){
	$sql = "INSERT INTO feedback(Name,Email,Feedback)VALUES('$name','$email','$feedback')";	
	$query = mysqli_query($con,$sql);
		echo "<div class='alert alert-dismissable alert-success'>
    Thank you for giving your valueable feedback to us!
	
</div>";
}
else 
{
echo "<div class='alert alert-dismissable alert-danger'>
    Please enter the all form details
</div>";

	
}
 ?>

html file

HTML

     <div class="row">
<form class="form-horizontal col-lg-5" id="frmfeed" name="frmfeed">
  <fieldset>
    <legend>Feedback </legend>
    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputname" name="InputName" placeholder="Name" type="text">
      </div>
    </div>
    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" name="InputEmail" placeholder="Email" type="text">
        </div>
    </div>
    <div class="form-group">
      <label for="feedback" class="col-lg-2 control-label">Feedback</label>
      <div class="col-lg-10">
        <textarea class="form-control" rows="3" id="feedback" name="Feedback"></textarea>
       
      </div>
    </div>
        <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button class="btn btn-default" type="reset" name="cancelbtn" id="cancelbtn">Cancel</button>
        <button type="submit" class="btn btn-primary" name="btn" id="btn">Submit</button>
      </div>
    </div>
  </fieldset>
</form>
<div id="disp" class="col-lg-5">



</div>

</div>

Posted 10-May-14 6:14am

Md Jamaluddin Saiyed

Updated 11-May-14 19:49pm

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Answer 1 · 2014-05-11T02:29:00

Solution 1

Please try is as below.

$(document).ready(function() {
 
$("#btn").off('click').on('click', function(){
 
	var name = $("#inputname").val();	
 
	var email = $("#inputEmail").val();
	
	var feed = $("#feedback").val();
	var send = "InputName=" + name + "&InputEmail=" + email + "&Feedback=" + feed ; 	
	alert(send); 
	$.ajax({
		url:"/Feedback_conx.php",
		type:"POST",
		data:send,
		success: function(data1){
		$("#disp").html(data1);	
		}
		
	})
	
		});
	
 
			});

Posted 11-May-14 2:29am

Sampath Lokuge

Comments

Md Jamaluddin Saiyed 12-May-14 1:46am

I have tried but its not working ! my html code is here <div class="row">
<form class="form-horizontal col-lg-5" id="frmfeed" name="frmfeed">
<fieldset>
Feedback
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputname" name="InputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="InputEmail" placeholder="Email" type="text">
</div>
</div>
<div class="form-group">
<label for="feedback" class="col-lg-2 control-label">Feedback</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="feedback" name="Feedback"></textarea>

</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" type="reset" name="cancelbtn" id="cancelbtn">Cancel</button>
<button type="submit" class="btn btn-primary" name="btn" id="btn">Submit</button>
</div>
</div>
</fieldset>
</form>
<div id="disp" class="col-lg-5">

</div>

</div>

Sampath Lokuge 12-May-14 2:34am

Have you put a debug and checked ? Where is the issue ? Is that not firing the event or run time issue or what ?

Member 10025724 · Answer 2 · 2014-05-11T20:01:00

Solution 2

Just check request is reaching in the server using FireFox FireBug tool or Google Chrome Developer tool.

If it going just do response clear and set content type to HTML, in the PHP Server code

Posted 11-May-14 20:01pm

Member 10025724

ArunRajendra · Answer 3 · 2014-05-11T20:25:00

Solution 3

Did you try catching error to check for any failures?

Posted 11-May-14 20:25pm

ArunRajendra

Comments

Md Jamaluddin Saiyed 12-May-14 2:29am

no

ArunRajendra 12-May-14 2:32am

Catch error. I guess there is some error which occurring but getting reported.

Md Jamaluddin Saiyed 12-May-14 2:32am

how to check

ArunRajendra 12-May-14 2:44am

Add this code to your ajax call similar to what you have done for success.

error: function (xhr) {
alert(xhr.responseText);
}

Md Jamaluddin Saiyed 12-May-14 2:53am

i have done it but i cant see msg !! its disappeared immediately

ArunRajendra 12-May-14 3:06am

Try to debug by putting the breakpoint.

Md Jamaluddin Saiyed 12-May-14 3:09am

I put $.ajax() after ajax request and its done !! why ? can you tell me ?

ArunRajendra 12-May-14 3:45am

I don't know what are you talking about. there should be only one ajax call. can you post the code.

Md Jamaluddin Saiyed 12-May-14 3:49am

Thanks for response to help me sir !! my code is here and its working now I dont know why its working

$(document).ready(function() {

$("#btn").click(function() {
var name = $("#inputname").val();
var email = $("#inputEmail").val();
var feed = $("#feedback").val();
var send = "InputName=" + name + "&InputEmail=" + email + "&Feedback=" + feed ;

$.ajax({

url:"Feedback_conx.php",
type:"POST",
data:send,
success: function(data1){
$("#disp").html(data1);
}
});
alert($.ajax());
});
});

ArunRajendra 12-May-14 4:05am

Try like this.

url:"Feedback_conx.php",
type:"POST",
data:send,
success: function(data1){
$("#disp").html(data1);
}
error: function (xhr) {
alert(xhr.responseText);
}
});

Md Jamaluddin Saiyed 12-May-14 4:16am

I have done it some time ago as per your reply but not working !!

Md Jamaluddin Saiyed 12-May-14 4:17am

Its showing blank msg