Submit form using ajax

Question

I'm trying to submit values to a database using jquery. I'm new to ajax but I'm required to do it with ajax.

This is what I've done so far my php code is

 function insertSeries()
{
    $options = array(
        'user' => $_POST['user'],
        'email' => $_POST['email'],
        'summary' => $_POST['summary'],
        'due_date' => $_POST['due_date'],
        'problem_type' => $_POST['problem_type'],
        'status' => $_POST['status']
    );

    $sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') Values (?,?,?,?,?,?)";
    $result = mysql_query($sql, $options) or die('Could not insert data');


}

My html code is

  <?php
   include 'eric_api.php';
  ?>

  <!DOCTYPE html>

   <html>
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/api_calls.js"></script>
    <link rel="stylesheet" href="css/normalizer.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="wrapper">
        <h1>Ticketing System</h1>
        <div>
            <div id="ticket_form_wrapper">
                <form  id="insert_ticket" method="post" action="">
                    <p>
                        <label for="user">User</label>
                        <br />
                        <input type="user" id="user" class="post_fields" />
                    </p>
                    <p>
                        <label for="email">Email</label>
                        <br />
                        <input type="email" id="email" class="post_fields" />
                    </p>
                    <p>
                        <label for="summary">Summary</label>
                        <br />
                        <input type="summary" id="summary" class="post_fields" />
                    </p>
                    <p>
                        <label for="due_date">Due Date</label>
                        <br />
                        <input type="due_date" id="due_date" class="post_fields" />
                    </p>
                    <p>
                        <label for="problem_type">Problem Type</label>
                        <br />
                        <input type="problem_type" id="problem_type" class="post_fields" />
                    </p>
                    <p>
                        <label for="status">Status</label>
                        <br />
                        <input type="status" id="status" class="post_fields" />
                    </p>
                    <p>
                        <input type="submit" id="submit" value="Submit" />
                        <input type="button" onclick="window.location='index.php'" value="Go to List"/>
                        <div class="form_result"> </div>
                    </p>
                </form>
            </div>

        </div>
</body>
  </html>

And here's my ajax using jquery

$('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    alert(postData);

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

I don't know what I'm doing wrong. Any help would be greatly appreciated

what is it doing? and I think you might need to add global $_POST; to your function insertSeries() because of scope. or pass it into the function. — gloomy.penguin
– gloomy.penguin, Commented Nov 15, 2013 at 19:27
@user623952 $_POST is a superglobal, it's available everywhere — Izkata
– Izkata, Commented Nov 15, 2013 at 19:28
oh, okay. cool.. but also! that's not the right use of mysql_query, either.... and you set up the query like you're using mysqli_ functions. how far does the code get? does it even get to insertSeries()? or does it fail before that? — gloomy.penguin
– gloomy.penguin, Commented Nov 15, 2013 at 19:28

Zhube · Accepted Answer · 2013-11-15 20:22:18Z

1

Instead of interfering with the form's submit event, interfere with a click event instead. To make minimal changes to your existing setup, just add the click handler to the form submit button. First thing inside of the handler, call e.preventDefault(). You'll have to explicitly select the form inside the handler to serialize the data. Then, move your existing ajax call into that handler, and it should work fine. Also, make sure that you are actually calling insertSeries() somewhere in your PHP code.

Cheers

edited Nov 15, 2013 at 20:22

answered Nov 15, 2013 at 20:09

Zhube

5042 silver badges6 bronze badges

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

3 Comments

gloomy.penguin Over a year ago

Just wondering, for my knowledge b/c I do things like this often, is there a benefit to doing what you suggested?

Zhube Over a year ago

Interfering with the submit event in forms can get hairy in some browsers that are in the wild. XMLHttp requests and forms are only very tangentially related, so coupling one to the other creates a relationship that really doesn't exist. By putting the code inside of a click handler, you also get the option of moving away from a form in the future. Say two months down the road, a new vector of getting the information becomes available. Instead of writing a new function, the old one can be reused attached as a different handler.

gloomy.penguin Over a year ago

I didn't know that. I have been looking at it the other way... as far as what seems natural and "related". I will do that next time I am writing something, though. Making browsers happy is always preferred.

gloomy.penguin · Accepted Answer · 2013-11-15 20:04:47Z

0

Please reply to some of the comments so we can help figure out what the issues is. This is how your function would look with proper mysqli syntax.

How to make the connection: $mysql = new mysqli(...)
How to prepare the statement: $stmt = $mysqi->prepare(....)
How to bind the parameters: $stmt->bind_param(...)
Execution: $stmt->execute()

Note: you were making your insert string like it was to be used for mysqli but your parameter binding was more similiar to pdo. I wasn't sure which one you were wanting to use so I chose mysqli. I personally prefer PDO, though... so I can re-write this using that if you want. Link to the PDO Prepare Function that also shows some binding.

 // this is your database connection for mysqli 
 $mysqli = new mysqli('localhost', 'my_user', 'my_password', 'world');

 function insertSeries($mysqli)
 {
    $options = array(
        'user' => $_POST['user'],
        'email' => $_POST['email'],
        'summary' => $_POST['summary'],
        'due_date' => $_POST['due_date'],
        'problem_type' => $_POST['problem_type'],
        'status' => $_POST['status']
    );

    $sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') 
                                    Values (?,     ?,        ?,         ?,            ?,        ?)";


    if ( $stmt = $mysqli->prepare($sql) )
    { 
        $stmt->bind_param("ssssss", $options['user'], $options['email'],
                                     $options['summary'], $options['due_date'], 
                                     $options['problem_type'], $options['status']);

        $success = $stmt->execute();

        if ($success) { print "query worked"; }
              else    { print "query failed"; }
    } 
 }

edited Nov 15, 2013 at 20:04

answered Nov 15, 2013 at 19:36

gloomy.penguin

5,9206 gold badges37 silver badges59 bronze badges

6 Comments

Eric Evans Over a year ago

Ok let me try that to see if that work for me thanks for the fast replys

gloomy.penguin Over a year ago

@EricEvans - can you please reply to some of the comments? where is your code even failing? I re-wrote the function b/c I could see obvious errors but it could be an issue with your ajax, too. Are you getting any errors? What code is being reached? Are you getting any output at all?

Eric Evans Over a year ago

The ajax works because it does reach my php code, but it says that there was problem with my sql and that my indexed are undefined. Could you please tell where I can look to see mysqli connected like that. You created an object but I'm looking on php website and can't find it done that way. Please provide me with a reference.

gloomy.penguin Over a year ago

I provided some links at the top of my post to the documentation.

Eric Evans Over a year ago

Thanks a bunch for the help and resources we're all good now.

|

Collectives™ on Stack Overflow

Submit form using ajax

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related