I need some help conditionally rendering data in a modal pop up window on my site.
What I want to do:
When the user clicks on the "make reservation" button, I want to display this in the modal window
<h3 style="margin-top:20px;">Choose dates</h3>
<div style="margin-top:20px;" class="pick-dates-div">
<form method="GET" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="form-btn save btn btn-default">Make A Reservation</button>
</form>
<button style="margin-top: 25px;" class="btn-primary btn-block btn-lg" data-toggle="modal"
data-target="#inquiryModal">More
Questions ?</button>
</div>
Then the user can pick the dates from the date picker and press the "make a reservation" button ( which is a GET request ), the page refreshes and I want to display only this in the same modal window :
<h1>Start Date: {{ date_start }}</h1>
<h1>End Date: {{ date_end }}</h1>
<h1>Price Per Day: ${{ price_per_day }}$</h1>
<h1>Total: ${{ total_price }}$</h1>
<form method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button href="www.facebook.com" type="submit" class="form-btn save btn btn-default">Confirm Reservation</button>
</form>
After that the user submits the form ( POST request ) and I want to display a text :
<h3> Thank you for your reservation </3>
What would be the ideal way to achieve this ?
Thank you stack
The ideal way to achieve this is by using JavaScript.
One of the many methods this could be achieved is by rendering all the three views inside separate containers in a modal and then hiding the next two using javascript.
You can use element.style.display = 'none' to hide and
element.style.display = 'block' to show the content inside the element container.
Once the user clicks on "make reservation" button, hide/show the required containers to achieve the desired result.
Do not forget to secure your website by using proper validation on the server end. Hope that helps!
Related
Here I iterate data from my database in mongodb i just want that when my add to cart button is clicked it gets stored into another database named cart and gets displayed on another page
{% for data in product_data %}
<div class="shop-item" >
<span class="shop-item-title" id="title-item">{{ data.title }}</span>
<input type="image" class="shop-item-image" id="image-item" src={{ data["img_file"] }} onclick="takethatpage();">
<div class="shop-item-details">
<span class="shop-item-price" id="price-item">{{ data["price"]}}</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
{% endfor %}
I will not spoon feed but let me tell you the approach for it.
Firstly you would need an API implemented at the server end to accept products to be added to the cart for the respective user.
Secondly, for your template there needs to be an AJAX request fired each time the person click on the add to cart button.
I'm trying to create a View in which the user is asked to confirm an action of updating a value of an instance. I want the View to only have a submit button. What I want is similar to a DeleteView except what I want is to update a value of a record instead of deleting the record.
I have tried using Class based UpdateView, but it requires that I specify a fields parameter in which I must specify at least one field and I do not want to show any field, just the submit button.
This is what my template now looks like:
<h4>Complete {{ item.name }}?</h4>
<form method='POST' class="gia-form">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" class="button" value="Complete Item">
Cancel
</form>
Url for the view:
url(r'^action/complete-item/(?P<pk>\d+)/$', views.CompleteItemView.as_view(), name='complete'),
My UpdateView:
class CompleteItemView(UpdateView):
model = models.Item
template_name = 'items/complete_item.html'
fields = ("status",)
def form_valid(self, form):
form.instance.status = 'completed'
return super().form_valid(form)
Above I have chosen to show the status field, and this is what I'm trying to get rid of in an elegant way as I just want to show the confirm button without any fields.
Instead of
{{ form.as_p }}
You can simply write
<input name="{{ form.status.html_name }}" id="{{ form.status.id_for_label }}"
value="{{ form.status.value }}" type="hidden">
This will render the status field as hidden and only the Submit button will be visible.
Have you considered using Bootstrap Modals.
You could have a 'Submit' button which wouldn't actually submit the form, but instead it would open the modal where you could have the form submit button.
You would just have to remember to create the modal inside the form tags.
You could use Javascript like this:
<script>
$(document).on('click', '.some_class', function(){
return confirm('Are you sure you want to update this?');
})
</script>
And add class some_class to your button
New to Django.
I am trying to build a blog of my own, so I will need to input an article with max_length = 5000 or some other number; I don't want to use the admin system directly, instead I want to input the article and submit it to the server.Right now I am trying to use forms.
The question is I didn't find a solution to this huge amount of character inputs.
Any hint to this?
The form:
<form name="input" method="POST">
<li>The title:{{ form.name }}</li>
<li>The body: <textarea cols='20' rows='20'>{{ form.text }}</textarea> </li>
<input type="submit" value="Submit">
</form>
UPDATE:
I solved this issue by deleting the textarea tag wrapping {{ form.text }};
{{ form.text }} itself implements a textarea tag.
And in my view code:
text = forms.CharField(widget=forms.Textarea)
I have a WTF form with several fields where I only want to display certain fields based on the responses to previous fields without refreshing the page. For example, say I have a field:
URLInd = BooleanField(u'Do you have a website?',validators=[DataRequired())
Which if checked, I want to display:
URL = TextField(u'Please enter your web address',validators=[DataRequired(), URL()])
So "URLInd" can be shown at the initial page load, but I only want "URL" shown if URLInd == True.
HTML:
<form class="form form-horizontal" method="post" role="form" enctype=multipart/form-data action>
{{ form.hidden_tag() }}
{{ wtf.form_errors(form, hiddens="only") }}
{{ wtf.form_field(form.URLInd) }}
{{ wtf.form_field(form.URL) }}
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
Based on my research, I suspect I need to use Javascript and AJAX, but I have no experience using either and I haven't been able to apply any of the examples I've found to this problem. Thanks in advance for your help.
Field have arg message for replace default error message in defaults validators. For replace use kwargs message="u error message for view invalid this field"
Simple example
URLInd = BooleanField(u'Do you have a website?',validators=[URL(message="I want MY MESSAGE ERROR THIS FIELD")])
Disclaimer: I am new to python and django but have programmed in Drupal
I am developing a web-based Wizard (like on Microsoft Windows installation screens) with explanatory text followed by Previous and Next buttons (which are big green left and right arrows). So far, so good.
However, my current Wizard page (in project.html, loaded by my django apps views.py) now uses a form (instance of ModelForm) which asks the user to type in a "project" name, such as My Project. Normally, such an HTML form would use a Submit button, but because this is a Wizard, I need the Next button to act as the Submit button, hiding the Submit button entirely. Also, the arrow icons appear after the form ends.
How would you do this? Sure, I could use jquery, but is there a better pythonic or django way?
Some code:
#project.html
{% extends "base.html" %}
{% load i18n %}
<h3><span>{% trans 'Project details' %}</span></h3>
<p>{% trans 'What is the name of this project?' %}
<form method="post" action="">
{{ form.as_table }}
<input type="submit" value="Submit"/>
</form>
</p>
{% endblock %}
{% block buttonbar %}
<img src="/static/img/Button-Previous-icon-50.png" width="50" height="50" alt="Previous"><span>{% trans 'Previous' %}</span>
<img src="/static/img/Button-Next-icon-50.png" width="50" height="50" alt="Next button"><span>{% trans 'Next' %}</span>
{% endblock %}
Thanks!
<input type="submit" value="Next"/>
This gives you a button with the value 'Next' which acts as a submit button. If this is not what you've wanted, rephrase your question and/or give an example of what action should take place after pressing next.
You might want to use the Django Form wizard, in this case:
https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/