• معاوضه با: پول
• دسته‌بندی: نظافت

توضیحات آگهی

{% extends 'base/base.html' %}
{% load static %}
{% block title %}ثبت آگهی جدید{% endblock %}
{% block content %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
let formCount = {{ image_formset.total_form_count }};
const maxForms = {{ image_formset.management_form.MAX_NUM_FORMS.value }};
const prefix = '{{ image_formset.management_form.prefix }}';

$('#add-image').click(function () {
// حذف پیام خطای قبلی، اگه وجود داشته باشه
$('#image-error').remove();

if (formCount < maxForms) {
const newForm = $('#image-formset .image-upload:first').clone(true);
newForm.find('input').val('');
newForm.find('.text-danger').remove();

newForm.find('input').each(function () {
const name = $(this).attr('name').replace(/-\d+-/, `-${formCount}-`);
const id = `id_${name}`;
$(this).attr({'name': name, 'id': id});
});

$('#image-formset').append(newForm);
formCount++;
$(`#id_${prefix}-TOTAL_FORMS`).val(formCount);
} else {
// اضافه کردن پیام خطا زیر بخش تصاویر
$('#image-formset').after('<div id="image-error" class="text-danger mt-2">حداکثر تعداد تصاویر مجاز وارد شده است.</div>');
}
});

$('#id_parent_category').change(function () {
var parentId = $(this).val();
$.ajax({
url: '{% url 'ajax_load_subcategories' %}',
data: {
'parent_id': parentId
},
success: function (data) {
var $category = $('#id_category');
$category.empty();
$category.append('<option value="">انتخاب کنید</option>');
data.forEach(function (item) {
$category.append('<option value="' + item.id + '">' + item.title + '</option>');
});
}
});
});
});
</script>

<div class="container section-padding">
<h2 class="mb-4 text-right">ثبت آگهی جدید</h2>
<form method="post" enctype="multipart/form-data" class="create-ad-form">
{% csrf_token %}
<table class="table table-bordered">
<tbody>
<tr>
<th class="text-right align-middle" style="width: 20%;">عنوان</th>
<td>
{{ ad_form.title }}
{% if ad_form.title.errors %}
<div class="text-danger">{{ ad_form.title.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">توضیحات</th>
<td>
{{ ad_form.description }}
{% if ad_form.description.errors %}
<div class="text-danger">{{ ad_form.description.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">دسته‌بندی اصلی</th>
<td>
{{ ad_form.parent_category }}
{% if ad_form.parent_category.errors %}
<div class="text-danger">{{ ad_form.parent_category.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">دسته‌بندی</th>
<td>
{{ ad_form.category }}
{% if ad_form.category.errors %}
<div class="text-danger">{{ ad_form.category.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">شهر</th>
<td>
{{ ad_form.city }}
{% if ad_form.city.errors %}
<div class="text-danger">{{ ad_form.city.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">مایل به تعویض با</th>
<td>
{{ ad_form.exchange_with }}
{% if ad_form.exchange_with.errors %}
<div class="text-danger">{{ ad_form.exchange_with.errors }}</div>
{% endif %}
</td>
</tr>
<tr>
<th class="text-right align-middle">شماره تماس</th>
<td>
<input type="text" class="form-control" value="{{ user.phone_number }}" readonly>
</td>
</tr>
<tr>
<th class="text-right align-middle">تصاویر</th>
<td>
{{ image_formset.management_form }}
<div id="image-formset">
{% for form in image_formset %}
<div class="image-upload mb-2">
{{ form.image }}
{% if form.image.errors %}
<div class="text-danger">{{ form.image.errors }}</div>
{% endif %}
</div>
{% endfor %}
</div>
<div class="text-right">
<button type="button" class="btn btn-outline-primary mt-2" id="add-image">+ افزودن تصویر</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="text-right">
<button type="submit" class="btn btn-dark">ثبت آگهی</button>
</div>
{% if error %}
<div class="alert alert-danger mt-3">{{ error }}</div>
{% endif %}
</form>
</div>

<style>
.create-ad-form .table th {
background-color: #f8f9fa;
font-weight: bold;
}
.create-ad-form .form-control,
.create-ad-form textarea,
.create-ad-form select {
width: 100%;
border-radius: 5px;
}
.create-ad-form .image-upload input[type="file"] {
border: none;
padding: 0;
}
.text-right {
text-align: right !important;
}
.section-padding {
padding: 40px 0;
}
</style>

{% endblock %}

• بازدید: 8
• قیمت: نامشخص
• شهر: نامشخص
• تاریخ انتشار: سه شنبه 20 خرداد 1404