Ajax JQuery send data to the php script

Question

I need to get data from html with javascript and then send to PHP and then send back to javascript the result of the php code.

So I searching around but I can't find code who working in my case.

This is my javascript code when I try to send data to auth-req.php file

(function($){
$('#authModal').modal('show');

$('#auth-btn').click(function (e) {
    $.ajax({
        url: './libraries/auth-req.php',
        type: 'POST',
        data: { 'key' : $('#client-security-key').val() },
        success: function (data) {
            alert(data + ' Success');
        },
        error: function (data) {
            alert(data + ' Error');
        },
        complete: function () {
            alert(data + ' Complete');
        },
        cache: false,
        contentType: false,
        processData: false
    });
});
})(jQuery);

This is my PHP code when I try to working with data sended from javascript file

echo 'I can make the check of the security key ' . $_POST['key'];

And my html file

<form class="form" method="post">
            <div class="modal fade" id="authModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 style="color: #fff !important" class="modal-title" id="myModalLabel">Authentication</h4>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="form-group col-md-12">
                                    <label for="client-security-key" class="control-label">Security key</label>
                                    <input type="text" id="client-security-key" name="client_security_key" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="button" class="btn btn-primary" id="auth-btn" value="Authenticate" />
                        </div>
                    </div>
                </div>
            </div>
        </form>

So I need the data who user put in input with id="client-security-key" I want to get with javascript and send to php file to make some operations. But when I try and send is show me this message (error):

Notice: Undefined index: client_security_key in D:\xampp\htdocs\Smart-Grow-Controller\libraries\auth-req.php on line 6
I can make the check of the security key Success

What I'm doing wrong?

I'm not 100% sure, but I think the issue could lie in the processData option, try setting this to "true" — user128161
– user128161, Commented Jun 28, 2016 at 8:42
the notice is saying that it can't find client_security_key, but in PHP strip you pasted here is $_POST['key'] maybe check this — Eduard Void
– Eduard Void, Commented Jun 28, 2016 at 8:43
Can you see the value being sent in the headers? If so when you var_dump($_POST['key']) the post data supplied from ajax can you see the value? — atoms
– atoms, Commented Jun 28, 2016 at 8:45
It would appear the data hasnt been posted correctly then. Can you look at the request sent and inspect the header, confirm you can see key prop/value being sent — atoms
– atoms, Commented Jun 28, 2016 at 8:51

Afshan Shujat · Accepted Answer · 2016-06-28 09:33:54Z

1

You need to comment two lines of your code -

//contentType: false, //processData: false

(function($){
$('#authModal').modal('show');

$('#auth-btn').click(function (e) {
    $.ajax({
        url: './libraries/auth-req.php',
        type: 'POST',
        data: { 'key' : $('#client-security-key').val() },
        success: function (data) {
            alert(data + ' Success');
        },
        error: function (data) {
            alert(data + ' Error');
        },
        complete: function () {
            alert(data + ' Complete');
        },
        cache: false,
        //contentType: false,
        //processData: false
    });
});
})(jQuery);

I thought by setting these headers to false server script is unable to process data. Hope this will help you.

answered Jun 28, 2016 at 9:33

Afshan Shujat

5514 silver badges9 bronze badges

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

Comments

Jack jdeoel · Accepted Answer · 2016-06-28 09:09:12Z

0

You are set contentType: false and processData: false.Thus it is sending non-processed data (send a DOMDocument) So you need to create new FormData in your data .

change this line from

data: { 'key' : $('#client-security-key').val() },

like below

data: new FormData($('form')[0]),

Also called post name as your input name

echo 'I can make the check of the security key ' . $_POST['client_security_key'];

answered Jun 28, 2016 at 9:09

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Comments

atoms · Accepted Answer · 2016-06-28 09:20:03Z

Try the following, have removed some code to make it clearer. I've also prevented the form submit on enter.

<?php  
    // if key value has been posted to page
    if(isset($_POST['key'])){

        // if the key isnt blank echo key value is xxx
        if($_POST['key'] != ''){
            echo 'Key value is:' . $_POST['key'];
        }else{
            // key is blank, error
            echo "Error!";
        }
        exit;
    }
?>


<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

<form class="form" method="post">
    <div class="modal fade" id="authModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 style="color: #fff !important" class="modal-title" id="myModalLabel">Authentication</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="form-group col-md-12">
                            <label for="client-security-key" class="control-label">Security key</label>
                            <input type="text" id="client-security-key" name="client_security_key" class="form-control" required />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary" id="auth-btn" value="Authenticate" />
                </div>
            </div>
        </div>
    </div>
</form>

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

        $('#auth-btn').click(function (e) {

            $.ajax({
                type: 'POST',
                url: '/auth-req.php',
                data: 'key=' + $('#client-security-key').val(),

                success: function (result) {
                    alert(result);
                },
                error: function (data) {
                    alert(result);
                }
            });

            return false;
        });

        // prevent form submit on enter
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

    });
</script>

Collectives™ on Stack Overflow

Ajax JQuery send data to the php script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related