Ajax jquery(post) doesn't pass data to php-CodePudding

I am trying to pass data to my php page:

<?php
var_dump($_POST);
if (isset($_POST['goal']) && isset($_POST['amount'])){


    $goal = $_POST['goal'];
    $amount = $_POST['amount'];



    $array = array(
      "goal" => $goal,
      "amount" => $amount

    );
    echo json_encode($array);


}

However as a result of var_dump $_POST I keep getting an empty array, for some reason my ajax doesn't pass the neccessary data. I tried console.logging the value of fields that I am using and their value is correct it's just that data doesn't pass on the php page.

ajax:

<script type="text/javascript">
            $(document).ready(function () {
                //use button click event
                $("#goalBTN").click(function (e){
                    e.preventDefault();
                    let amount = $("#amount").val();
                    let goal = $("#goal_name").val();

                    $.ajax({
                        method: "post",
                        url: "target-modal-code.php",
                        data:JSON.stringify( {
                                amount: amount,
                                goal: goal
                            }),
                        contentType:"application/json",
                        success: function (response){
                            $("#response").text(response);
                            console.log(amount);
                            console.log(goal);
                        },
                        error: function(response) {
                            alert(JSON.stringify(response));
                        }
                    })
                });
            });

        </script>

And my form is inside a modal :


 <div  role="document">
            <div >
                <div >
                    <h5  id="enrollLabel">Change your goal</h5>
                    <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="target-modal-code.php" name="target-form" id="target-form">
                    <div >
                        <form action="">
                            <div >
                                <label for="amount">Cost</label>
                                <input type="number"  id="amount" name="amount"
                                       placeholder="Amount">
                                <small  id="message-password"></small>
                                <br>
                            </div>
                            <div >
                                <label for="goal_name">Goal</label>
                                <input type="text"  id="goal_name" name="goal_name"
                                       placeholder="Goal">
                                <small  id="message-password"></small>
                                <br>
                            </div>
                        </form>
                    </div>
                    <p  id="response"></p>
                    <div >
                        <div >
                        </div>
                        <button type="button" id="goalBTN" >Save changes</button>
                    </div>
                </form>
            </div>
        </div>

CodePudding user response：

Can you provide more info like whether success or error function is called after submit?

Seems like datatype:'json' is missing from your ajax request. Try it and see if it's fixed.

CodePudding user response：

format send ajax:

$.ajax({
    ...
    data : {
        foo : 'bar',
        bar : 'foo'
    },
    ...
});

in your case: change data send format like:

data: {
   amount: amount,
   goal: goal
}