Ajax request with php

PHP
1

my ajax request dose not work do not know why
here is my html and ajax code :

<form name="myForm" id="formy" action=""   method="post" class="form-horizontal" >
 
 <div class="form-control-group">
        <label  style= "font-family: cursive;
        font-size: 15px;
        color: #0e0e62;" class="control-label" for="firstname">First Name</label>
 <div class="controls">
          <input placeholder="Enter Your First Name pls"  type="text"  value="" class="input-xlarge" name="fname" id="firstname"></div>
 </div>
 <div  class="form-control-group" >
        <label  class="control-label" for="secondname"> Second name</label>
 <div class="controls">
          <input  value="" type="text" class="input-xlarge" name="sname" id="secondname" placeholder="Enter Your Second Name pls" ></div>
 </div>
    <div class="form-control-group" >
        <label   class="control-label" for="tele">tele-phone Number</label>
 <div class="controls">
          <input value="" type="text1" class="input-xlarge" name="telnum" id="tele" placeholder="Enter Your Tele_phone number pls" ></div>
 </div>
      <div class="form-control-group" >
        <label   class="control-label" for="cele">Cell-phone Number</label>
 <div class="controls">
          <input  value="" type="text1" class="input-xlarge" name="celnum" id="cele" placeholder="Enter Your Cell-phone number pls" style= "font-family: cursive;
        font-size:17px"></div>
 </div>
 
<div class="form-control-group" >
            <label  class="control-label" for="dateb" > Birth Date</label>
<div class="controls">
              <input  value=""  type="date" name="date" class="input-xlarge"  id="dateb" required></div>
</div>

<div class="form-control-group" >
            <label class="control-label" for="addres" > Address</label>
<div class="controls">
              <textarea placeholder="Enter YourFull Address pls" style= "font-family: cursive;
        font-size:12px" required="" value="" class="input-xlarge" name="address" id="addres" ></textarea></div>
</div>

<div class="form-actions" >
            <button id="addy" type="submit"  class="btn btn-success btn-large" onClick = "return validate(this)">Send</button>
            <button type="reset" class="btn">Reset</button></div>
     <span id="span"></span>
    <script>
  function(){
        $("#addy").click(function(e){
            e.preventDefault();
          
            $.ajax({
                URL:"insert.php",
                type:"post",
                data:("#formy").serialize(),
                dataType:'text',
                success:function(d) {
                    $("#span").text(d);
                    $("#formy")[0].reset();
                    
                }
            });
        });
    };
    </script>
    
</form>

and here is my insert.php code :

<?php
session_start();

?>

<html>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/><link rel="stylesheet" href="bootstrap-3.3.7-dist/js/bootstrap.min.js"/><link rel="stylesheet" href="bootstrap-3.3.7-dist/fonts/bootstrap.min.css"/>
 <link rel="stylesheet" href="bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    
    <body>
        

         
<?php

 $mysqli = new mysqli("localhost", "root", '',"db103");

$stmt = $mysqli->prepare("INSERT INTO telephone_guide(owner,firstName ,secondName,phonenumber,celnumber,birth,	adress) values ( ?,?,?,?,?,?,?)");
$stmt->bind_param("sssssss",$owner,$firstName,$secondName,$phonenumber,$celnumber,$birth,$adress);
        $owner=$_SESSION['myname'];
        $firstName=$_POST['fname'];
        $secondName=$_POST['sname'];
        $phonenumber=$_POST['telnum'];
        $celnumber=$_POST['celnum'];
        $birth=$_POST['date'];
       $adress=$_POST['address'];
$stmt->execute();
$stmt->close();
        
?>
2

What does it do that it should not, or what does it not do that it should?

I don’t think you need all that html at the start of insert.php - all that happens is it’s sent back as part of the response to your Ajax calling. As it contains opening html and body tags, I can’t see you’d want to put that in the place your success function does.

What debugging have you done so far? Does your form data get into the ajax function correctly? Does it get over to the PHP code? Does the query prepare work without error? Does the execute give a message? You can add little debug messages each step of the way, then remove them as soon as you know that part is working correctly.

Should the script be inside your form tags? I’d have expected you to close the form before the script is opened.

2 Likes
4

the problem is that when I click send the console give me this message :
ReferenceError: ajax is not defined
and
I edit the ajax code to this one

$(document).ready(function(){
    var frm = $('#formy');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('insert.php'),
            data: frm.serialize(),
            success: function (data) {
                alert('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
});

and the alert is working successfully but the data dose not inserting to my DB as well as my insert.php is working correctly when I call it without ajax in the action form.
@droopsnoot I really appreciate your help because I am new to web sciences

5

your form has no attribute called “insert.php”.

1 Like
6

I edit it like that
url: insert.php,

and in the form action I edit it like that
action=‘insert.php’
and inserting does not work

7

Step 1: Check the Network tab of your browser’s tools to make sure it’s sending a request to insert.php
Step 2: Put this at the top of insert.php

error_reporting(-1)
ini_set('display_errors',1);

and check insert.php for any error reports either by inspecting the return of the ajax call or by visiting the page directly.

1 Like
8

at the console they give me this message :
ReferenceError: ajax is not defined
at the network tab :
request send to the html file not to the insert,php

9

I’m thinking it might be a JavaScript syntax error. ie.

... 
error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
...

I know some languages are more forgiving, but it might be there needs to be another property after that last comma or that the last comma needs to be removed.

1 Like
10

I remove the comma but nothing change
that what you mean right ? just to remove the comma

1 Like
11

Are you loading this in a wordpress page? My impulse is to say that something else is defining $ in a way similar to jquery, but not the same as jquery.

1 Like
12

Do you have a reference to Ajax in your main html code somewhere? I saw it in your insert.php where I don’t think it needs to be, but can’t see if it’s in the main code that contains the form.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.