CODEWITHSUNDEEP
javascriptphpjqueryajax
Akila Randil
Akila Randil

Reputation: 205

Ajax Request not working. Doesn't get connected to server

I've created a simple contact us form that captures data from textfields and then the data is converted to a JSON object and is being sent to the Server using Ajax. But I always gets the error. The success function isn't working. Which i believe that it doesn't get connected to the server.

Please tell me where I've gone wrong.

HTML

body>
  <h1> Contact Us </h1>
  We value your feedback. Send in your questions, suggestions, ideas to help us improve our service.

  <h2 align="Center"> Search us on Google Maps</h2>
<br> 
    <br>


    <form action="contact.php" name="form" method="post">

    <br>Name :<br>

    <input type="text" name="fName" id="fName"  required >

    &nbsp; &nbsp;
   <input type="text" name="lName" id="lName"  required >
    <br> <br>
    Email: <br>

    <input type="email" name="email" id="email" required >

    <br> <br>
    Comment: <br>

    <textarea name= "comment" id = "comment" rows="8" cols="50"  ></textarea>

     <br> <br>

    Rate our Website <select name="select" id="select" >
    <option value = "1" name= "rate"> 1 </option>
    <option value = "2" name= "rate"> 2 </option>
    <option value = "3" name= "rate"> 3 </option>
    <option value = "4" name= "rate"> 4 </option>
    <option value = "5" name= "rate"> 5 </option>

    </select>

     <br> <br>
    <input type="submit" name="submit" id="submit" value="Submit">

  </form>
  </body>

Javascript

<script>

    $(document).ready(function(){
       $("form").submit(function(){
        alert("Submitted");

        var jsonArr = {
          firstName   :document.getElementById("fName").value,
          lastName    :document.getElementById("lName").value,
          email       :document.getElementById("email").value,
          comment     :document.getElementById("comment").value,
          rate        :document.getElementById("select").value
        };


          $.ajax({
              url       : "contact.php",
              type      : "POST",
              data      : JSON.stringify(jsonArr),
              dataType  : "json",
              success   : function(data){
                console.log("This is working", data);
              },
              error     : function (error){
                alert("Error. not working"+ error);
                console.log("Error. not working" , error);
              }

          });

    });

});

 </script>

PHP

<html>
    <body>
    <?php
    $decode = $_POST['firstName'];
var_dump($decode);
?>
</body>
</html>

Upvotes: 0

Views: 2577

Answers (4)

jeroen
jeroen

Reputation: 91742

There are a few issues here:

Cancel default submit

You are not cancelling the default submit event so the form will get submitted the non-ajax way, effectively reloading the page (assuming that everything is done on contact.php).

You need something like:

$('form').on('submit', function(event) {
  event.preventDefault();
  ...
});

Send the type of data that is expected on the server

You are not sending data to the server in a format that will allow you to access it through $_POST. You are sending a string so to get to that, you would need to read the input. If you want to access it through $_POST you need to send a query string or (better as they are encoded automatically...) an object. The easiest way to get your encoded data is using:

...
data: $('form').serialize(),
...

or, if you want to use your set keys:

...
data: jsonArr,  // sending an object is fine, jQuery will encode it correctly for you
...

PHP syntax error

Your php has syntax errors as mentioned before. However, that is irrelevant here because of the next problem.

Return only json from your php script

The biggest problem with your php is that it returns html and not json. As you have set:

dataType  : "json",

your php script needs to return valid json. So no tags, or any echoes except for a single json_encode().

So for your example, it should contain only:

<?php
$decode = $_POST['firstName'];
// do some more stuff?

echo json_encode($decode);
exit;

Upvotes: 1

taxicala
taxicala

Reputation: 21769

First, try adding a slash to your url to make it relative to your host:

    $.ajax({
          url       : "/contact.php",
          type      : "POST",
          data      : JSON.stringify(jsonArr),
          dataType  : "json",
          success   : function(data){
            console.log("This is working", data);
          },
          error     : function (error){
            alert("Error: " + error);
            console.log("Error. not working" , error);
          }

      });

And second, close your PHP tag in the contact.php file:

<html>
    <body>
    <?php
    $decode = $_POST['firstName'];
var_dump($decode);
</body>
</html>

should be:

<html>
    <body>
    <?php
        $decode = $_POST['firstName'];
        var_dump($decode);
    ?>
</body>
</html>

Upvotes: 1

Mark
Mark

Reputation: 4883

Try changing your JS (see below). Trigger onclick event, and prevent default from possible duplicate submisssions and restructure your json. See if this works.

<script>
    $(document).ready(function() {
        $("#submit").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: "contact.php",
                type: "POST",
                data: {
                    'firstName': document.getElementById("fName").value,
                    'lastName ': document.getElementById("lName").value,
                    'email': document.getElementById("email").value,
                    'comment': document.getElementById("comment").value,
                    'rate': document.getElementById("select").value
                },
                dataType: "json",
                success: function(data) {
                    console.log("This is working", data);
                },
                error: function(error) {
                    alert("Error. not working") + error;
                    console.log("Error. not working", error);
                }

            });

        });

    });
</script>

Upvotes: 0

Manish Shukla
Manish Shukla

Reputation: 1365

add an id attribute to form and try this code

    $(document).ready(function(){
       $("form").submit(function(){
        alert("Submitted");




          $.ajax({
              url       : "contact.php",
              type      : "POST",
              data      : $("{formid}").serialize,

              success   : function(data){
                console.log("This is working", data);
              },
              error     : function (error){
                alert("Error. not working")+ error;
                console.log("Error. not working" , error);
              }

          });

    });

});

 </script>

Upvotes: -1

Related Questions