Submit button are not submitting form as i have 2 buttons with ajax requests

Question

I have a form with it is own submit button and there is a button inside that form that has the attributes type=button, onclick=somefunction() .. the button with the onclick runs great but the other button is not submitting at all.

I've made sure that the button with the function on click have type=button and other button have type=submit

Here is my code:

{% extends 'base/base.html' %}
{% block content %}

    <!-- Page Content -->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <!-- page content -->
                <br><br>

                <h3>إنشاء فاتورة بيع جديدة </h3>
                <br><br>
                {% if messages %}
                    <ul class="messages">
                        {% for message in messages %}
                            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
                <form method='post' autocomplete="off" action=".">
                    {% csrf_token %}
                    <div class="autocomplete" style="width:100%">
                        <b>هاتف العميل </b><br>
                        {{ create_sell_invoice.client }}
                        <br>
                        <p style="display: none;" id="shown_name">
                            client name
                        </p>
                        <div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
                            <form method='POST'>
                                {% csrf_token %}
                                <small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
                                <br><br>
                                <b>إسم الطالب</b>
                                {{ add_client_from_invoice_form.student_name }}
                                <br><br>
                                <b>ولى الامر</b>
                                {{ add_client_from_invoice_form.parent_name }}
                                <br><br>
                                <b>العنوان</b>
                                {{ add_client_from_invoice_form.address }}
                                <br><br>
                                <b>الهاتف</b>
                                {{ add_client_from_invoice_form.phone1 }}
                                <br><br>
                                <b>المستوى</b>
                                {{ add_client_from_invoice_form.level }}
                                <br><Br>
                                <button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
                                    إضافة
                                </button>
                            </form>
                        </div>
                    </div>
                    <b id="id_delivery_title">التوصيل </b><br>
                    {{ create_sell_invoice.delivery }}
                    <br><br>
                    <b id="id_delivery_price_title">تكلفة التوصيل </b><br>
                    {{ create_sell_invoice.delivery_price }}
                    <br><br>
                    <b id="id_delivery_notes_title">ملاحظات على التوصيل </b><br>
                    {{ create_sell_invoice.delivery_notes }}
                    <br><br>
                    <button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
                    <br><Br><Br>
                </form>
                <script>
                    function sendingRequest() {
                        const studentName = document.getElementById('studentName');
                        const parentName = document.getElementById('parentName');
                        const clientAddress = document.getElementById('clientAddress');
                        const clientPhone = document.getElementById('clientPhone');
                        const clientLevel = document.getElementById('clientLevel');
                        $.ajax({
                            url: '/add/new/client/from/invoice/normal/invoice_sell_add/' + studentName.value + '/' + parentName.value + '/' + clientAddress.value + '/' + clientPhone.value + '/' + clientLevel.value + '/',
                            type: "POST",
                            data: {name: 'name', age: 'age'},
                            success: function (response) {
                                const add_new_client = document.getElementById('add_new_client');
                                add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;')
                                window.location.reload();
                            },
                            complete: function () {
                            },
                            error: function (xhr, textStatus, thrownError) {
                            }
                        });
                    }
                </script>

                <!-- /.col-lg-12 -->
            </div>
        </div>

    </div>
    <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->

    </div>
    <datalist id="mylist">
        {% for item in clients %}
            <option>{{ item }}</option>
        {% endfor %}
    </datalist>
    {% for item in clients %}
        {{ item }}
    {% endfor %}
    <!-- ajax -->
    <script>
        $("#id_client").change(function () {
            var number = $(this).val();

            $.ajax({
                url: '/ajax/getting_client_name/',
                data: {
                    'number': number
                },
                dataType: 'json',
                success: function (data) {
                    const shown_name = document.getElementById('shown_name'),
                        ok_button = document.getElementById('ok_button'),
                        add_new_client = document.getElementById('add_new_client');
                    if (data.client_name) {
                        shown_name.setAttribute('style', 'display:block;color: blue;');
                        shown_name.innerHTML = data.client_name;
                        ok_button.disabled = false;
                        add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;background-color: #d3e4ec;');
                        $('#id_delivery').fadeIn();
                        $('#id_delivery_title').fadeIn();
                        $('#id_delivery_price').fadeIn();
                        $('#id_delivery_price_title').fadeIn();
                        $('#id_delivery_notes').fadeIn();
                        $('#id_delivery_notes_title').fadeIn();
                        if (data.client_name === 'رقم الهاتف غير صحيح') {
                            shown_name.setAttribute('style', 'display:block;color: red;');
                            ok_button.disabled = true;
                            add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: block;background-color: #d3e4ec;');
                            $('#id_delivery').fadeOut();
                            $('#id_delivery_title').fadeOut();
                            $('#id_delivery_price').fadeOut();
                            $('#id_delivery_price_title').fadeOut();
                            $('#id_delivery_notes').fadeOut();
                            $('#id_delivery_notes_title').fadeOut();
                        }
                    }
                }
            });

        });
    </script><!-- end of ajax -->
{% endblock %}

The problem is in this line of code

<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button> where the button do nothing at all when clicked

Answer 1

Based on @hindmose comment the problem was having nested forms, I solved it by deleting the inner form tags and moved this part before the opening form tag .. now it is like :

                <div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
                    <small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
                    <br><br>
                    <b>إسم الطالب</b>
                    {{ add_client_from_invoice_form.student_name }}
                    <br><br>
                    <b>ولى الامر</b>
                    {{ add_client_from_invoice_form.parent_name }}
                    <br><br>
                    <b>العنوان</b>
                    {{ add_client_from_invoice_form.address }}
                    <br><br>
                    <b>الهاتف</b>
                    {{ add_client_from_invoice_form.phone1 }}
                    <br><br>
                    <b>المستوى</b>
                    {{ add_client_from_invoice_form.level }}
                    <br><Br>
                    <button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
                        إضافة
                    </button>
                </div>

                <form method='post' autocomplete="off" action=".">
....