Hello, I want to create a modal popup window using bootstrap but it (the pop up) is not coming up. I'm just wondering if I missed something - bootstrap-modal

×
close
Subscribe to our Mailing List
Simply Enter your name and email! As a thank you for joining us, we're going to give you one of our best-selling courses, for free!
<form class="form-inline" role="form">
<div class="form-group ">
<label class="sr-only" for="subscribe-name">Your first name</label>
<input type="text" class="form-control" id="subscribe-name" placeholder="Your first name">
</div><!-- form group -->
<div class="form-group ">
<label class="sr-only" for="subscribe-email">and your email</label>
<input type="text" class="form-control" id="subscribe-email" placeholder="and your email">
</div><!-- form group -->
<input type="submit" class="btn btn-danger" value="Subscribe">
</form>
</form>
<hr>
<p><small>By providing your email you consent to receiving occasional promotional emails & newsletters. <br>No spam. Just good stuff. We respect your privacy & you may unsubscribe at any time.</small></p>
</div><!-- modal body -->
</div>
<!-- modal header -->
</div>
<!-- modal content-->
</div>
<!-- modal dialog -->
</div>
<!-- modal-->

Related

How generate a DOC and a PDF from html <div> in Django

Good day,
In Django project I have an html file with a div in which some fields(like p) change the content by radiobutton choice (using JavaScript).
Need to turn the div with the changed content (by radiobutton choice) into pdf and doc (with saving of all styles).
Any help is appreciated.
I tried "wkhtmltopdf" but it generates pdf only with model contents from db and without result of radiobutton work.
<!--Choice radiobuttons-->
function Display(obj) {
fioid=obj.id;
if(fioid=='exampleRadios1'){
document.getElementById("fiz").style.display='block';
document.getElementById("ip").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios2'){
document.getElementById("ip").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios3'){
document.getElementById("ur").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ip").style.display='none';
}}
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios1" value="FIZ" onclick="Display(this);" checked>
<label class="form-check-label" for="exampleRadios1">
FIZ
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios2" value="IP" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios2">
IP
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios3" value="UR" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios3">
UR
</label>
</div>
</div>
<div>
<p style="text-align: justify; font-family: Times New Roman;">
<span style='display: block;' id="fiz">This is FIZ</span>
<span style='display: none;' id="ip">This is IP</span>
<span style='display: none;' id="ur">This is UR</span>
</p>
<div>
This is may be answer to the question.
https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/

Form Fields not available in Internet Explorer 11 and Edge

A login form is submitted and when I try and dump the values the form structure is empty in IE but not FF or Chrome. This is in a DEV environment using HTTPS and a corporate self signed certificate.
I don't really think this is Fusebox related but it is the framework I'm using. No choice in the matter as it is legacy code and no budget to change it so please don't suggest I move on.
I've discovered that in IE it doesn't like the form action to be of the format:
/directory/index.cfm?fuseaction=app.Security
Instead it wants a fully qualified action
https://www.mycompany.com/directory/index.cfm?fuseaction=app.Security
<form action="/directory/index.cfm?fuseaction=app.Security" name="loginForm" id="loginForm" method="post">
<div style="width:55%;" align="center" id="fieldset">
<fieldset class="border" style="width:70%;">
<legend>Login</legend>
<div style="padding:2%">
<label for="userID">User ID: <span id="error1" class="redbold" aria-live="assertive"></span> </label>
</div>
<div>
<span class="required">*</span> <input type="text" name="userID" id="userID" size="32" maxlength="8" value="" />
</div>
<div style="padding:2%">
<label for="pw">Password: <span id="error2" class="redbold" aria-live="assertive"></span></label>
</div>
<div>
<span class="required">*</span> <input type="password" name="pw" id="pw" size="32" maxlength="20" value="" />
</div>
<div style="padding:2%" id="formButtons">
<input type="submit" value="Login" class="buttonfield" title="Login to eAgenda" />
<span style="padding-left:5%; margin-left:5%">
<input type="reset" value="Clear" class="buttonfield" title="Clear" />
</span>
<div id="errorMsg">
<p>
<span class="redbold"></span>
</p>
</div>
</div>
<span class="required">*</span>Mandatory field
</fieldset>
</div>
</form>
In the end it was a <base href="http://..."/> tag in the header. Removing or making it https solved the problem.

How to use bootstrap checkbox control in django

I am using check box control in a simple django application. When I use the standard check box control, I can get the desired values in views.py. But I fail to get the values when I use bootstrap check box control. Logic seems to be fine, I don't know why it's not working. Can anybody point out the mistake, Thanks in advance.
Standard Way
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
Bootstrap Way
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Mango</label>
</div>
view.py
if request.method == 'POST':
fruit = request.POST.getlist('fruit')
You have set id="fruit" for both and for="fruit" for both.
Those need to be different for different checkboxes.
Also, the values were set to empty in your case.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Apple" id="apple">
<label class="form-check-label" for="apple">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mango" id="mango">
<label class="form-check-label" for="mango">Mango</label>
</div>
</div>
</div>
</div>

Bootstrap model won't close because of content, what is wrong?

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>

Django and Bootstrap modal form

I am currently building a site with a contact function. I build the site with Django and Bootstrap. For contacting the people behind the site the user clicks on a element in the top navigation bar called Contact. This elements open a Bootstrap modal. At the moment the modal works as expected and looks like that:
The code is:
<div class="modal fade" id="kontakt" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" class="form-horizontal">
<div class="modal-header">
<h4>Contact us</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="kontakt-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="kontakt-name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="kontakt-email" class="col-lg-2 control-label">E-Mail</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="kontakt-email" placeholder="Email-Address">
</div>
</div>
<div class="form-group">
<label for="kontakt-nachricht" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="kontakt-nachricht" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Send</button>
Close
</div>
</form>
</div>
</div>
</div>
Because I would like to sent the data that is written by the user to the Django backend I wrote a form that is:
class ContactForm(forms.Form):
name = forms.CharField(max_length=255)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
In order to offer this form to all templates (implemented in the base.html) I wrote a context preprocessor that works fine.
Is there a possibility to render the Django form to my desired html? I tried django-bootstrap3 but this app does not render the label and the input in one row. When I replace the input fields with Django (without any third party application) the class form-control and the id is wrong.