AJax not calling php file correctly, html forms

Question

UPDATE: This is the error:

412 (Precondition Failed)

I am trying to call a php script from ajax, I currently have the below ajax, which when the button in the form (also below) is clicked will call a php script passing it the form data, which will then be submitted to the database.

However, it is not working; and what's more I am just getting a blank error back, so I do not even know what is going wrong.

Could someon please point me in the right direction?

Thanks.

HTML form:

<form name="report-form" id="report-form" action="" method="POST">              
                <textarea id="reason-box" type="text" name="reason-box" cols="40" rows="5" maxlength="160" onkeypress=""></textarea>    
                <input id="reportedID" name="reportedID" type="text" />
                <!--<input id="report-submit" value="" name="submit" type="submit" onclick="submitReport()"/>   -->
                <button id="report-submit" name="submit" onclick="submitReport()"></button>

            </form>

AJax call:

function submitReport()
        {           

            var ID=$('#reportedID').val();
            var reason=$('#reason-box').val();

            var  formData = "ID="+ID+"&reason="+reason;
            alert(formData);

         //This code will run when the user submits a report.
           $.ajax(
            {           
               url: 'submit_report.php',
               type: "POST",
               data: formData,
               success: function(data)
               {                     
                 alert("Report Submitted!");
               },           
               error: function(xhr,err)
               {                     
                  alert(err.message);
                    alert("responseText: "+ xhr.responseText);
               }
           });

        }

Now I have already tested the php script, and that works fine, the problem started when I added the ajax call so I know it is something to do with the ajax not the php.

That is one of the problems, I am getting a blank error back. Not sure if it is the code in the error: section that is wrong. — Callum Holden
– Callum Holden, Commented Mar 4, 2015 at 16:01
For troubleshooting set success function to be: console.log(data); And set the error function to: console.log(xhr); console.log(err); Then check out the console output — Dan
– Dan, Commented Mar 4, 2015 at 16:03
Can you post the submit_report.php? Even if it works during your internal testing, we still need to see what it's returning. Also, hit control+shift+i in your browser and go to the console and report and errors. — Matt
– Matt, Commented Mar 4, 2015 at 16:03
First of all use event.preventDefault() in your submit code to prevent submitting the form. — Mouser
– Mouser, Commented Mar 4, 2015 at 16:03

Mouser · Accepted Answer · 2015-03-04 16:20:28Z

1

This should correct the problem with submitting:

Your jQuery Ajax call won't succeed because the POST data isn't supplied in the correct format.
If the ajax should succeed the form is also posted resulting in a 405 error.

 <button id="report-submit" name="submit" onclick="submitReport(event)"></button>

function submitReport(event)
{           
    event.preventDefault();
    ....... // your code

}

Now the default action of your form will be prevented (resulting in a 405 error). And only the ajax request is submitted.

In the button element we pass the event object on to the function. We use event.preventDefault() to make sure the button doesn't run it's default action, which is submitting the form.

You could also prevent this by deleting the form element as a wrapper, but maybe you want to use other features (like validation) on the form.

Form data in a jQuery ajax request needs to be an object called data:

var formData = {"ID" : ID, "reason" : reason};

jQuery will reform this to a correct query string for the submit.

edited Mar 4, 2015 at 16:20

answered Mar 4, 2015 at 16:09

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Callum Holden Over a year ago

Hi, thanks for the response. Unfortunately this did not fix the problemm

Callum Holden Over a year ago

How would the syntax look in my example then sorry?

Callum Holden Over a year ago

hmmm, that does not seem to be working either. It says success, but does not actually submit the query. But there is also no sql error, so I know it is no the sql.

DAB Over a year ago

It will still work without "event" as a parameter, but this method is preferred for legibility.

Callum Holden Over a year ago

Yes I says success, but the php script is not being called anymore.

|

Michael Doye · Accepted Answer · 2015-03-04 16:34:50Z

I would do it like this:

<form name="report-form" id="report-form" action="" method="POST">              
      <textarea id="reason-box" type="text" name="reason-box" cols="40" rows="5" maxlength="160"></textarea>    
      <input id="reportedID" name="reportedID" type="text" />
      <button id="report-submit" type="submit" name="submit" value="submit"></button>
</form>

<script type="text/javascript">
jQuery("document").ready(function(){
    var $ = jQuery
    $("form").submit(function(){
        var data = "";
        data = $(this).serialize() + "&" + $.param(data);

        $.ajax({
            type: "POST",
            url: "submit_report.php", 
            data: data,
             success: function(data)
               {                     
                 alert("Report Submitted!");
               },           
               error: function(xhr,err)
               {                     
                  alert(err.message);
                    alert("responseText: "+ xhr.responseText);
               }
        });
        return false;
    });
});
</script>

and then use $reason=$_POST['reason-box']; and $ID=$_POST['reportedID']; inside your PHP script

behzad babaei · Accepted Answer · 2015-03-04 16:50:59Z

this is optional to choose the form for submitting data or you can do it without the HTML form this is what i do

 <textarea id="reasonbox" type="text" name="reason-box" cols="40" rows="5" maxlength="160" onkeypress=""></textarea>    
<input id="reportedID" name="reportedID" type="text" />
 <button id="report-submit"  ></button>

and the using folloing javascript and jquery style

<script type="text/javascript">
$(function() {

 $("#report-submit").click(function(){
            try
            {
                $.post("your php page address goes here like /mypage.php",
                    {
//in this area you put the data that is going to server like line below
                        'reasonbox':$("#reason-box").val().trim(),
                        'reportedID':$("#reportedID").val().trim()

                    }, function(data){
                        data=data.trim();
//this is data is sent back from server you can send back data that you want
//like message or json array
                    });
            }
            catch(ex)
            {
                alert(ex);
            }
        });

});
</script>

I hope it helps

Collectives™ on Stack Overflow

AJax not calling php file correctly, html forms

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related