AJAX fails to get data from input

Question

I am trying to create/insert data into the database, but I am still getting an error for getting the data I've input. I tried using the dump and die method, and I encountered that no data is being gotten from the data that has been input. What could be wrong with my codes?

Here is the result of the inspected element

Click to see image

My Modal

<div id="modalAddChild" class="modal fade" tabindex="-1" aria-labelledby="modalAddChild">
    @csrf_field
    {{ method_field('PUT') }}
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><b>Add Child</b></h4>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">X</button>
            </div>
            <div class="modal-body">
                <p><i>Note: In Weight, it is required to put (.) regardless if it is (.0).</i></p>
                <p><i>Note: In Height, do not add (.) if it is (.0) but it is allowed to put (.) if it's any number.</i>
                </p>
                <form id="saveChild" method="post">
                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label for="mothersname">Mother's Name:</label>
                            <input type="text" class="form-control" id="mothersname" name="mothersname" required>
                        </div>
                        <div class="col-sm-6">
                            <label for="childsname">Child's Name:</label>
                            <input type="text" class="form-control" id="childsname" name="childsname" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label>Indigenous:</label>
                            <select class="form-control" id="ind_id" name="ind_id" required>
                                <option value="">YES or NO</option>
                                @foreach ($indigenous as $key => $value)
                                <option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label>Sex:</label>
                            <select class="form-control" id="sex_id" name="sex_id" required>
                                <option value="">M or F</option>
                                @foreach ($sex as $key => $value)
                                <option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label>Date of Birth:</label>
                            <input type="text" class="form-control" id="birthdate" name="birthdate"
                                placeholder="YYYY-MM-DD" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Actual Date of Weighing:</label>
                            <input type="text" class="form-control" id="actualdate" name="actualdate"
                                placeholder="YYYY-MM-DD" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label>Weight(kg):</label>
                            <input type="text" class="form-control" id="weight" name="weight" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Height(cm):</label>
                            <input type="text" class="form-control" id="height" name="height" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6">
                            <label for="zone">Zone:</label>
                            <input type="text" class="form-control" id="zone" name="zone" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Age in Months:</label>
                            <input type="text" class="form-control" id="ageinmonths" name="ageinmonths" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" value="Submit" class="btn btn-flat btn-primary" id="saveBtn">Submit</button>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

My AJAX

<script type="text/javascript">
    $('#saveChild').submit('click', function() {

        var zone = $('#zone').val();
        var mothersname = $('#mothersname').val();
        var childsname = $('#childsname').val();
        var ind_id = $('#ind_id').val();
        var sex_id = $('#sex_id').val();
        var birthdate = $('#birthdate').val();
        var actualdate = $('#actualdate').val();
        var weight = $('#weight').val();
        var height = $('#height').val();    
        var ageinmonths = $('#ageinmonths').val();
        var dataString="zone="+zone+"&mothersname="+mothersname+"&childsname="+childsname+"&ind_id="+ind_id+"&sex_id="+sex_id
        +"&birthdate="+birthdate+"&actualdate="+actualdate+"&weight="+weight+"&height="+height+"&ageinmonths="+ageinmonths;    

        $.ajax({
            type: "POST",
            dataType: "JSON",
            data: dataString,
            url: "insert_child",
            success: function(data) {
                console.log(data);
                if (data == "success"){
                    alert("Data successfully added!");
                } else if (data = "failed") {
                    alert("ERROR IN FETCHING DATA!");
                }
                displayData();
            }
        });
        return false;
    });

    $('#saveBtn').click(function() {
        $('#modalAddChild').modal('hide');
    });

    $('#modalAddChild').on('hidden.bs.modal', function(e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();
    })
</script>

This old ajax is working before but I changed it to the ajax mentioned above but both of them are not working anymore.

My OLD Ajax

<script type="text/javascript">
$('#saveChild').submit('click', function() {

    var zone = $('#zone').val();
    var mothersname = $('#mothersname').val();
    var childsname = $('#childsname').val();
    var ind_id = $('#ind_id').val();
    var sex_id = $('#sex_id').val();
    var birthdate = $('#birthdate').val();
    var actualdate = $('#actualdate').val();
    var weight = $('#weight').val();
    var height = $('#height').val();
    var ageinmonths = $('#ageinmonths').val();

    $.ajax({
        type: "POST",
        dataType: "JSON",
        data: {
            zone: zone,
            mothersname: mothersname,
            childsname: childsname,
            ind_id: ind_id,
            sex_id: sex_id,
            birthdate: birthdate,
            actualdate: actualdate,
            weight: weight,
            height: height,
            ageinmonths: ageinmonths,
            "_token": "{{ csrf_token() }}"
        },
        url: "insert_child",
        success: function(data) {

            alert("Data successfully added!");

            displayData();
        }
    });

    return false;
});

$('#saveBtn').click(function() {
    $('#modalAddChild').modal('hide');
});

$('#modalAddChild').on('hidden.bs.modal', function(e) {
    $(this)
        .find("input,textarea,select")
        .val('')
        .end()
        .find("input[type=checkbox], input[type=radio]")
        .prop("checked", "")
        .end();
})
</script>

Answer 1

well in your first line off java script you wrote:

$('#saveChild').submit('click', function() 

this is wrong, the jquery submit event only gets a function, but you passed a 'click' event as well.

you should write it like this:

$('#saveChild').submit(function()...