如何在 Django 布尔字段上应用条件？
How to apply condition on django boolean field?
我正在从事一个多供应商 Django 基础电子商务项目。我想实现一个单选按钮基本选择，比如当用户将商品添加到购物车时，我希望 him/her 选择（是或否）。这是礼物吗？当用户单击“是”时，我需要显示一个消息输入字段，其中 he/she 可以将自定义消息打印在项目上。购物车中有多个项目。谁能指导我如何在 Django 中执行此操作？提前谢谢你。
更新 :
我已经解决了 javascript 问题，但表单未在视图 post 方法中提交。结帐按钮在点击时不执行任何操作。
function hideShowGiftField(btnId, msgFieldId) {
let btn = document.getElementById(btnId)
let msgField = document.getElementById(msgFieldId)
if (btn.value === 'yes') {
msgField.type = 'text'
} else if (btn.value === 'no') {
msgField.type = 'hidden'
}
}
function hideShowEngravingField(btnId, engravingFieldId) {
let btn = document.getElementById(btnId)
let engravingField = document.getElementById(engravingFieldId)
if (btn.value === 'yes') {
engravingField.type = 'text'
} else if (btn.value === 'no') {
engravingField.type = 'hidden'
}
}
<form action="{% url 'cart_detail' %}" method="post">
{% csrf_token %}
<section>
<div class="container">
<div class="">
<h2 class="review-cart-desktop">Review Cart</h2>
<hr>
<h2 class="review-cart">Review Cart</h2>
<div class="row d-flex justify-content-center">
<div class="col-8">
<h4 class="mx-2 font-weight-bold">Item</h4>
</div>
<div class="col-4">
<div class="row text-center header-names">
<div class="col-md-6">
<h6 class="mt-2 text-center font-weight-bold">Quantity</h6>
</div>
<div class="col-md-6">
<h6 class="mt-2 text-center font-weight-bold">Price</h6>
</div>
</div>
</div>
</div>
<hr>
{% for item in cart_items %}
<div class="row d-flex justify-content-center">
<div class="col-8 col-xs-12">
<div class="row d-flex">
<div class="book"><img src="{{ item.variant.first.product.main_image.url }}"
alt="{{ item.variant.first.product.name }}"
class="book-img">
</div>
<div class="my-auto flex-column d-flex pad-left">
<h6 class="mob-text-item"
style="text-transform: capitalize">{{ item.variant.first.product.name }}</h6>
{% for variant in item.variant.all %}
<p class="mob-text">{{ variant|capfirst }}</p>
{% endfor %}
{# <p class="mob-text mob-text-custom"><a href="">View Custom Design</a></p>#}
</div>
</div>
<div class="col-8 complete-row-input" style="margin-left: 150px;">
<div class="row">
<div class="col-8">
<p style="font-size: 20px;">Is This is A Gift?</p>
</div>
<div class="col-4">
<div class="d-flex" style="margin-left:15px ;">
<label for="gift_yes_{{ item.id }}">Yes</label><input type="radio"
id="gift_yes_{{ item.id }}"
onchange="hideShowGiftField(this.id, 'custom-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_gift"
value="yes"
class="mt-1 radio-size"
style="width: 30px;">
<label for="gift_no_{{ item.id }}">No</label><input type="radio"
id="gift_no_{{ item.id }}"
onchange="hideShowGiftField(this.id, 'custom-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_gift"
value="no"
class="mt-1 radio-size"
style="width: 30px;">
</div>
</div>
</div>
<input type="hidden" id="custom-message-{{ item.id }}" class="placeholder"
placeholder="Custom Message"
name="custom_message_for_{{ item.id }}"
style="width: 100%;"/>
<div class="row mt-3">
<div class="col-8">
<p style="font-size: 20px;">Need Engraving?</p>
</div>
<div class="col-4">
<div class="d-flex" style="margin-left:15px ;">
<label for="engraving-yes">Yes</label><input type="radio"
id="engraving_yes_{{ item.id }}"
onchange="hideShowEngravingField(this.id, 'engraving-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_engraving"
value="yes"
class="mt-1 radio-size"
style="width: 30px;">
<label for="engraving-no">No</label><input type="radio"
id="engraving_no{{ item.id }}"
onchange="hideShowEngravingField(this.id, 'engraving-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_engraving"
value="no"
class="mt-1 radio-size"
style="width: 30px;">
</div>
</div>
</div>
<input type="hidden" id="engraving-message-{{ item.id }}" class="placeholder"
placeholder="Engraving Message"
name="engraving_message_for_{{ item.id }}"
style="width: 100%;"/>
</div>
</div>
<!-- </td> -->
<div class="col-4">
<div class="row text-right">
<div class="col-md-6 col-sm-12 mt-5">
<!-- <td> -->
<div class="row d-flex justify-content-center counting">
<p class="mb-2 mx-3 font-weight-bold" id="cnt1">{{ item.quantity }}</p>
<div class="d-flex flex-column plus-minus">
<form action="" method="post">
{% csrf_token %}
<button onclick="increment('{% url 'item_increment' item.id %}')"
class="vsm-text plus">
+
</button>
</form>
<form action="" method="post">
{% csrf_token %}
<button onclick="increment('{% url 'item_decrement' item.id %}')"
class="vsm-text minus">
-
</button>
</form>
</div>
</div>
<div class="button-remove" align="center">
<a href="{% url 'delete-cart-item' item.id %}" type="button"
class="btn btn-danger remove-button mt-2">Remove
</a>
</div>
</div>
<div class="col-md-6 mt-2" align="center">
<h6 class="mob-text-price">Rs {{ item.get_subtotal }}</h6>
</div>
</div>
</div>
</div>
<hr>
{% endfor %}
</div>
</div>
<div class="container">
<div class="row total-price-desktop">
<div class="col-md-12">
<div class="text-right total-price">Total : {{ total }}</div>
</div>
</div>
</div>
<div class="row total-price-mobile">
<div class="col-sm-12">
<div class="row">
<div class="col-6">
<div class="total" align="left">Total</div>
</div>
<div class="col-6">
<div class="price" align="right">Rs :{{ total }}</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-4 offset-4">
<div class="row d-flex justify-content-center">
{# <input type="submit" value="Checkout">#}
<button type="submit" class="btn btn-info" style="width: 50%">Checkout</button>
</div>
</div>
<div class="text-checkout-bottom col-2 offset-2">
<div style="float: right;">
<p><small>*Shipping Calculated on Next Step</small></p>
<p style="margin-top: -20px;"><small>*Select gift wrapping on Next Step</small>
</p>
</div>
</div>
</div>
</div>
</section>
</form>
您可以通过 Javascript 完成此操作。您应该搜索如何在浏览器上操作 html 元素。当用户单击是按钮时，您应该在浏览器上创建 input html 元素。 Javascipt 只是在浏览器上操作 html 标签的一种方式。
我建议您查看 DOM 操作：https://www.w3schools.com/jsref/dom_obj_text.asp
您还应该在您的产品或订单上添加消息字段 table。它应该可以为空 (Null=True)，然后如果客户添加消息，您可以将此消息存储在消息字段中。
我正在从事一个多供应商 Django 基础电子商务项目。我想实现一个单选按钮基本选择，比如当用户将商品添加到购物车时，我希望 him/her 选择（是或否）。这是礼物吗？当用户单击“是”时，我需要显示一个消息输入字段，其中 he/she 可以将自定义消息打印在项目上。购物车中有多个项目。谁能指导我如何在 Django 中执行此操作？提前谢谢你。
更新 : 我已经解决了 javascript 问题，但表单未在视图 post 方法中提交。结帐按钮在点击时不执行任何操作。
function hideShowGiftField(btnId, msgFieldId) {
let btn = document.getElementById(btnId)
let msgField = document.getElementById(msgFieldId)
if (btn.value === 'yes') {
msgField.type = 'text'
} else if (btn.value === 'no') {
msgField.type = 'hidden'
}
}
function hideShowEngravingField(btnId, engravingFieldId) {
let btn = document.getElementById(btnId)
let engravingField = document.getElementById(engravingFieldId)
if (btn.value === 'yes') {
engravingField.type = 'text'
} else if (btn.value === 'no') {
engravingField.type = 'hidden'
}
}
<form action="{% url 'cart_detail' %}" method="post">
{% csrf_token %}
<section>
<div class="container">
<div class="">
<h2 class="review-cart-desktop">Review Cart</h2>
<hr>
<h2 class="review-cart">Review Cart</h2>
<div class="row d-flex justify-content-center">
<div class="col-8">
<h4 class="mx-2 font-weight-bold">Item</h4>
</div>
<div class="col-4">
<div class="row text-center header-names">
<div class="col-md-6">
<h6 class="mt-2 text-center font-weight-bold">Quantity</h6>
</div>
<div class="col-md-6">
<h6 class="mt-2 text-center font-weight-bold">Price</h6>
</div>
</div>
</div>
</div>
<hr>
{% for item in cart_items %}
<div class="row d-flex justify-content-center">
<div class="col-8 col-xs-12">
<div class="row d-flex">
<div class="book"><img src="{{ item.variant.first.product.main_image.url }}"
alt="{{ item.variant.first.product.name }}"
class="book-img">
</div>
<div class="my-auto flex-column d-flex pad-left">
<h6 class="mob-text-item"
style="text-transform: capitalize">{{ item.variant.first.product.name }}</h6>
{% for variant in item.variant.all %}
<p class="mob-text">{{ variant|capfirst }}</p>
{% endfor %}
{# <p class="mob-text mob-text-custom"><a href="">View Custom Design</a></p>#}
</div>
</div>
<div class="col-8 complete-row-input" style="margin-left: 150px;">
<div class="row">
<div class="col-8">
<p style="font-size: 20px;">Is This is A Gift?</p>
</div>
<div class="col-4">
<div class="d-flex" style="margin-left:15px ;">
<label for="gift_yes_{{ item.id }}">Yes</label><input type="radio"
id="gift_yes_{{ item.id }}"
onchange="hideShowGiftField(this.id, 'custom-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_gift"
value="yes"
class="mt-1 radio-size"
style="width: 30px;">
<label for="gift_no_{{ item.id }}">No</label><input type="radio"
id="gift_no_{{ item.id }}"
onchange="hideShowGiftField(this.id, 'custom-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_gift"
value="no"
class="mt-1 radio-size"
style="width: 30px;">
</div>
</div>
</div>
<input type="hidden" id="custom-message-{{ item.id }}" class="placeholder"
placeholder="Custom Message"
name="custom_message_for_{{ item.id }}"
style="width: 100%;"/>
<div class="row mt-3">
<div class="col-8">
<p style="font-size: 20px;">Need Engraving?</p>
</div>
<div class="col-4">
<div class="d-flex" style="margin-left:15px ;">
<label for="engraving-yes">Yes</label><input type="radio"
id="engraving_yes_{{ item.id }}"
onchange="hideShowEngravingField(this.id, 'engraving-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_engraving"
value="yes"
class="mt-1 radio-size"
style="width: 30px;">
<label for="engraving-no">No</label><input type="radio"
id="engraving_no{{ item.id }}"
onchange="hideShowEngravingField(this.id, 'engraving-message-{{ item.id }}')"
name="{{ item.variant.first.product.name }}_engraving"
value="no"
class="mt-1 radio-size"
style="width: 30px;">
</div>
</div>
</div>
<input type="hidden" id="engraving-message-{{ item.id }}" class="placeholder"
placeholder="Engraving Message"
name="engraving_message_for_{{ item.id }}"
style="width: 100%;"/>
</div>
</div>
<!-- </td> -->
<div class="col-4">
<div class="row text-right">
<div class="col-md-6 col-sm-12 mt-5">
<!-- <td> -->
<div class="row d-flex justify-content-center counting">
<p class="mb-2 mx-3 font-weight-bold" id="cnt1">{{ item.quantity }}</p>
<div class="d-flex flex-column plus-minus">
<form action="" method="post">
{% csrf_token %}
<button onclick="increment('{% url 'item_increment' item.id %}')"
class="vsm-text plus">
+
</button>
</form>
<form action="" method="post">
{% csrf_token %}
<button onclick="increment('{% url 'item_decrement' item.id %}')"
class="vsm-text minus">
-
</button>
</form>
</div>
</div>
<div class="button-remove" align="center">
<a href="{% url 'delete-cart-item' item.id %}" type="button"
class="btn btn-danger remove-button mt-2">Remove
</a>
</div>
</div>
<div class="col-md-6 mt-2" align="center">
<h6 class="mob-text-price">Rs {{ item.get_subtotal }}</h6>
</div>
</div>
</div>
</div>
<hr>
{% endfor %}
</div>
</div>
<div class="container">
<div class="row total-price-desktop">
<div class="col-md-12">
<div class="text-right total-price">Total : {{ total }}</div>
</div>
</div>
</div>
<div class="row total-price-mobile">
<div class="col-sm-12">
<div class="row">
<div class="col-6">
<div class="total" align="left">Total</div>
</div>
<div class="col-6">
<div class="price" align="right">Rs :{{ total }}</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-4 offset-4">
<div class="row d-flex justify-content-center">
{# <input type="submit" value="Checkout">#}
<button type="submit" class="btn btn-info" style="width: 50%">Checkout</button>
</div>
</div>
<div class="text-checkout-bottom col-2 offset-2">
<div style="float: right;">
<p><small>*Shipping Calculated on Next Step</small></p>
<p style="margin-top: -20px;"><small>*Select gift wrapping on Next Step</small>
</p>
</div>
</div>
</div>
</div>
</section>
</form>
您可以通过 Javascript 完成此操作。您应该搜索如何在浏览器上操作 html 元素。当用户单击是按钮时，您应该在浏览器上创建 input html 元素。 Javascipt 只是在浏览器上操作 html 标签的一种方式。 我建议您查看 DOM 操作：https://www.w3schools.com/jsref/dom_obj_text.asp
您还应该在您的产品或订单上添加消息字段 table。它应该可以为空 (Null=True)，然后如果客户添加消息，您可以将此消息存储在消息字段中。