我有一个带有其自己的提交按钮的表单,并且该表单内有一个具有属性type=button, onclick=somefunction()
的按钮。具有onclick的按钮运行得很好,但是另一个按钮根本没有提交。 / p>
我确保具有单击功能的按钮具有type=button
,而其他按钮具有type=submit
这是我的代码:
{% 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 %}
问题出在这行代码
<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
答案 0 :(得分:0)
基于@hindmose注释,问题是嵌套表单,我通过删除内部表单标签并在打开表单标签之前将这部分移到..来解决了该问题:
<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=".">
....