I have a bootstrap (4) modal for Adding Users. The modal will not close properly when pressing the X icon in the upper corner. If I delete all of the content from modal-body then the modal will close properly. If I delete any three of the input fields from the form in the modal-body, then the modal will also close properly. It doesn't matter which input fields I delete, but if I only remove one or two input fields the modal will not close properly, and if I delete three or more or everything it will close properly. I can't imagine that there's a content limit for modals... or that this content would exceed such a limit...
The code is below, I've previously tried wrapping all of the inputs in their own container divs, and wrapping the whole form in a container div and I've tried both of those at the same time. Can anyone identify the problem?
<div id="newuserModal" class="modal fade col-lg-6 offset-lg-3">
<div class="modal-dialog" role="document">
<div class="modal-content" style="background-color:black;border:solid 1px white;">
<div class="modal-header">
<h5 class="modal-title">Add New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="./be/logicadduser.php" method="post">
<input id="pinnumber" type="number" placeholder="MOKA Login PIN" name="userpin"data-toggle="tooltip" data-placement="top" title="Enter your 4-digit MOKA PIN (EX: 1234)" autofocus required><br>
<input id="role" type="text" placeholder="Staff Role" name="role" data-toggle="tooltip" data-placement="top" title="EX: RSS, Supervisor, Supports Coordinator" required><br>
<input id="firstname" type="text" placeholder="First Name" name="fname" required><br>
<input id="middleinitial" type="text" placeholder="Middle Initial" name="minitial" data-toggle="tooltip" data-placement="top" title="Must be a single letter, no punctuation" required><br>
<input id="lastname" type="text" placeholder="Last Name" name="lname" required><br>
<input id="phone" type="number" placeholder="Phone #" name="phone" data-toggle="tooltip" data-placement="top" title="EX: 2314567890; Must be exactly 10 digits, numbers only, no spaces" required><br>
<input id="password" type="password" placeholder="Password" name="password" data-toggle="tooltip" data-placement="top" title="Password must be at least 8 characters, with one upper and one lower case letter" required><br>
<button type="button" class="btn btn-warning" onclick="if(password.type=='text')password.type='password'; else password.type='text';" name="showpass" style="margin-top:10px;">Show Password</button><br>
<button type="submit" class="btn btn-primary" name="submit" style="margin-top:10px;">Add New User</button>
</form>
</div>
</div>
</div>
</div>
Related
I already made a review form where user can give their feedback on the service. The form works perfectly, and data is also stored in the database. There is a rating star options as well. Now I just want to make a system where the user just can do one review. If a user did a review the review form won't show to the user. Now, what should I do? and What'll be the logic?
models.py:
class Frontend_Rating(models.Model):
USer = models.ForeignKey(User,default=None,on_delete=models.CASCADE, related_name="frontend_rating")
Rating = models.IntegerField(null=True)
Feedback = models.TextField(max_length=250, null=True)
template:
<form action="frontend_ratings/" class="mt-3" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="radio-toolbar d-flex justify-content-center ">
<input type="radio" id="one_star" name="frontend_ratting" value="1" checked>
<label for="one_star" class="mx-1">1 <i class="fas fa-star"></i></label>
<input type="radio" id="two_star" name="frontend_ratting" value="2">
<label for="two_star" class="mx-1">2 <i class="fas fa-star"></i></label>
<input type="radio" id="three_star" name="frontend_ratting" value="3">
<label for="three_star" class="mx-1">3 <i class="fas fa-star"></i></label>
<input type="radio" id="four_star" name="frontend_ratting" value="4">
<label for="four_star" class="mx-1">4 <i class="fas fa-star"></i></label>
<input type="radio" id="five_star" name="frontend_ratting" value="5">
<label for="five_star" class="mx-1">5 <i class="fas fa-star"></i></label>
</div>
<!-- feedback area-->
<div class="d-flex justify-content-center">
<textarea style="font-size: small;" maxlength="250" name="frontend_feedback"
placeholder="Share your experience in 250 charecters...."
class="col-10 mt-2 hireme_textarea btn montserrat text-left d-block" required
rows="5"></textarea>
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" class="btn singUpBtn col-10 submit_btn_sing_up_in sing_up_js1"
id="message">Save</button>
</div>
</form>
I'm trying to send the value of a button when a form is submitted using the POST method.
{% block content %}
<div class="modal-dialog modal-lg" role="document">
<form action="" method="post" id="news-create" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Add News</h4>
</div>
<div class="modal-body">
{{ form }}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" name="save" value="Save" />
<input class="btn btn-primary" type="submit" name="save_new" value="Save as new" />
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal-dialog -->
<script>
var form_options = { target: '#modal', success: function(response) {} };
$('#news-create').ajaxForm(form_options);
</script>
{% endblock content %}
But when I print the QueryDict request.POST inside the file view.py the value of the button is not present.
How can I get the value? I need to perform different action based on the button clicked.
At the moment I'm using a bootstrap modal view to render a form (UpdateView) based on a model.
Thanks for the support
To send the value of the submit button the name attribute of that button should be "submit".
So try it like this:
<input class="btn btn-primary" type="submit" name="submit" value="Save" />
<input class="btn btn-primary" type="submit" name="submit" value="Save as new" />
Then you can do request.POST.get('submit') on your views to get the value of the button which was clicked.
You can also use checkbox for this kinds of things.
i'm really stuck with this problem. Created the next modal .form-inline but the cancel button stays out of the inline, this is the code:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<input type="email" class="form-control-input-sm text-center" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control-input-sm text-center" placeholder="Password">
</div>
<input type="checkbox"><span style="color:#9d9797">Remember me</span>
<button type="submit" class="btn btn-info">Sign In</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
The picture of it:
The default input max-width is 280px, you can define a class to decrease it, such as
<style>
.input-short {
max-width: 130px !important;
}
</style>
then apply it to the input textboxes
<input type="email" class="form-control input-short" id="email" placeholder="Email">
This should give you what you want (adjust the max-width accordingly).
I have the following page: http://mindspyder.com/newline/my-account.html
And the following code on that page:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
<li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
</ul>
<!-- /Nav tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="review"></div>
<div role="tabpanel" class="tab-pane" id="edit"></div>
<div role="tabpanel" class="tab-pane" id="delete">hello</div>
<div role="tabpanel" class="tab-pane" id="download">
<p>
<form>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
Invoice</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
Establishment Kit</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
Declaration of Custody Trust</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
Trustee Minutes</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
Compliance Letter</label>
<br>
</p>
</form>
</p>
<p>
<button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
</p>
</div>
</div>
<!-- /Tab panes -->
Now, if you go to the page and click the blue Delete button, everything works perfectly. Now if you click Cancel, and click on one of the other tabs, it still works as it should. The problem is you click Delete again, it doesn't switch back to the Delete tab when opening the modal, but leaves it on the previous tab.
What am I doing wrong?
I figured it out, by changing the nesting, so:
<span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span>
becomes:
<a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><span data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> Delete</span></a>
and now it works as it should.
I'm using Django 1.8 and Crispy-Forms with Twitter Bootstrap 3
Here's what I have at the moment:
self.helper.layout = Layout(
...
'address',
StrictButton('Find address', id='find_address', css_class='btn-primary'),
)
This outputs:
<div id="div_id_address" class="form-group">
<label for="id_address" class="control-label">Address</label>
<div class="controls">
<input class="textinput textInput form-control" id="id_address" maxlength="100" name="address" type="text" value="" />
</div>
</div>
<button id="find_address" class="btn btn-primary" type="button">Find address</button>
What I'd like to output (class form-inline and button find_address added to the controls div):
<div id="div_id_address" class="form-group">
<label for="id_address" class="control-label">Address</label>
<div class="controls form-inline">
<input class="textinput textInput form-control" id="id_address" maxlength="100" name="address" type="text" value="" />
<button id="find_address" class="btn btn-primary" type="button">Find address</button>
</div>
</div>
This aligns the button with the input field. Is it possible to achieve this with crispy-forms? I can't figure it out. Thanks!
Perhaps
FieldWithButtons(
'address',
StrictButton('Find address', id='find_address', css_class='btn-primary')
)
Could be solution.
See http://django-crispy-forms.readthedocs.org/en/latest/layouts.html#bootstrap-layout-objects