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/
Related
This question already has answers here:
Regex select all text between tags
(23 answers)
Closed 2 years ago.
<form action="/facial-sas/#wpcf7-f158-p566-o1" method="post" class="wpcf7-form cf7-style" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="158">
<input type="hidden" name="_wpcf7_version" value="5.1.9">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f158-p566-o1">
<input type="hidden" name="_wpcf7_container_post" value="566">
</div>
<div class="row">
<div class="small-12 columns">
<label>Select Department</label> <span class="wpcf7-form-control-wrap menu-78"><select name="menu-78" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Stem Cell Treatments">Stem Cell Treatments</option><option value="Hair Restoration">Hair Restoration</option><option value="Face & Body">Face & Body</option><option value="Aesthetics">Aesthetics</option><option value="Vaginal Rejuvenation">Vaginal Rejuvenation</option></select></span>
</div>
<div class="small-12 columns">
<label>Your Name</label> <span class="wpcf7-form-control-wrap your-firstname"><input type="text" name="your-firstname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required full" aria-required="true" aria-invalid="false"></span>
</div>
<div class="small-12 columns">
<label>Phone</label> <span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required full" aria-required="true" aria-invalid="false"></span>
</div>
<div class="small-12 columns">
<label>E-mail</label> <span class="wpcf7-form-control-wrap email"><input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required full" aria-required="true" aria-invalid="false"></span>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div id="cf7sr-5efbe15251408" class="cf7sr-g-recaptcha" data-theme="light" data-type="image" data-size="normal" data-sitekey="6Lcfm80UAAAAAARwri_XthNlglRc51eYQiyfEAGL"></div><span class="wpcf7-form-control-wrap cf7sr-g-recaptcha-invalid"></span><br>
<input type="submit" value="MAKE AN APPOINTMENT" class="wpcf7-form-control wpcf7-submit btn full accent"><span id="wpcf7-5efbe1525136e" class="wpcf7-form-control-wrap honeypot-678-wrap"><label class="hp-message">Please leave this field empty.</label><input class="wpcf7-form-control wpcf7-text" type="text" name="honeypot-678" value="" size="40" tabindex="-1" autocomplete="nope"></span>
</div>
</div>
<div class="wpcf7-response-output wpcf7-display-none" aria-hidden="true"></div></form>
In above code I want to find and replace between this two tag first opening tag "<form action="
and closing tag anything between changes on all my website pages. how do I select this all between this two tags and replace with some other code. please help me to find regex expression for find and replace in visual studio code.
thanks,
coder
You could use this pattern /(?<=[<fo]rm).+(?<![>])/g
str='<form action="/facial-sas/#wpcf7-f158-p566-o1" method="post" class="wpcf7-form cf7-style" novalidate="novalidate">'
pattern=/(?<=[<fo]rm).+(?<![>])/g
console.log(str.match(pattern)[0])
'''
My problem is database values can't stored properly
In below I uploded views functions file,model file as an images. so in model there are three fields but database stored only image stored and other vlaues strored by default get null values so can you help to solving my problem..
'''
userproblem.html
<form method="POST" action="/uploadoc/" enctype="multipart/form-data" data-toggle="validator">
{% csrf_token %}
<div id="progressbarwizard">
<ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
<li class="nav-item">
<a href="#account-2" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<i class="mdi mdi-account-circle mr-1"></i>
<span class="d-none d-sm-inline">Query Form</span>
</a>
</li>
</ul>
<div class="tab-content b-0 mb-0">
<div class="tab-pane" id="account-2">
<div class="row">
<div class="col-md-5">
<label class="col-md-12 col-form-label">Query Types:
<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" data-validate="true" name="queryn" placeholder="Enter Query Types">
</div>
</div>
<div class="col-md-5">
<label class="col-md-12 col-form-label">Description of Query:
<span class="text-danger">*</span></label>
<div class="col-md-12">
<textarea type="text" class="form-control" data-validate="true" name="querydec" placeholder="Description of Query"></textarea>
</div>
</div>
</div><!-- /.First row end --><br>
<div class="row">
<div class="col-md-5">
<label for="Emailadrress" class="col-md-12 col-form-label">Upload Your File:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<input type="file" id="img" name="img" accept="image/*">
</div>
</div>
</div>
<div class="col-md-6">
<label for="Emailadrress" class="col-md-12 col-form-label">Solutions:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<textarea type="text" name="querysol" placeholder="Solutions of Query"></textarea>
</div>
</div>
</div>
</div> <!-- /.second row end -->
</div><br>
<div class="row">
<div class="col-12">
<div class="text-center">
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Submit
</button>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
</div> </div>
</form>
'[This is error and views function file my model imagespage][1]
You are trying to set c variable from userProblemModel named POSTed data in your uploadoc view.
c = request.POST.get('userProblemModel')
But in your form in html side there is no userProblemModel named input tag. That is why you are getting None value in c variable.
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>
I am using Django and Bootstrap on frontend to write a single profile editing module.
Plain form from Django is ugly, so I did some custimizing on the form. Here is the HTML form:
<form actoin="{% url 'edit_profile' %}" method="post">
{% csrf_token %}
<div class="form-group row">
<label for="chineseName" class="col-sm-2 control-label">name</label>
<div class="col-sm-10">
<input name="chinese_name" class="form-control" id="chineseName" placeholder="name" value="{{form.chinese_name.value}}">
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
{% if form.gender.value == "M" %}
<input type="radio" name="gender" id="gender1" value="M" checked> Male
{% else %}
<input type="radio" name="gender" id="gender2" value="M"> Male
{% endif %}
</label>
<label class="radio-inline">
{% if form.gender.value == "F" %}
<input type="radio" name="gender" id="gender1" value="F" checked> Female
{% else %}
<input type="radio" name="gender" id="gender2" value="F"> Female
{% endif %}
</label>
</div>
</div>
<div class="form-group row">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input name="age" class="form-control" id="age" placeholder="年龄" value="{{form.age.value}}">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 control-label">phone</label>
<div class="col-sm-10">
<input name="phone" class="form-control" id="phone" placeholder="phone" value="{{form.phone.value}}">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default col-xs-12" id="confirm" style="display:none;">confirm</button>
</div>
</div>
</form>
Somehow request.POST is not receiving data from this form. When I switch this long HTML snippet into {{form}}, everything is fine.
So view function is correct. Is there anything wrong with this template file, especially the form part?
You should add the css in the form class, for example if you are using ModelForm:
self.fields['phone'].widget.attrs['placeholder'] = self.fields['phone'].label
or if you are using Form :
phone = forms.CharField(widget=forms.TextInput(attrs={'placeholder' : 'phone'))
Nothing looks out of order at first look. One way to debug further would be to instantiate the form and print it. Then compare everything, especially the <form> tag and <input> tags.
I've searched extensively on this site and tried my best, but cannot figure out how to put the label and input on the same line, right now, it displays like this:label and input box are on different lines
First, as people suggested, I grouped them using "form-group" class, but no luck. Then I continued to search, some says you should use "col-sm-1" which I tried, no luck, some says you should use "form-control-static", but still no luck. Any help is deeply appreciated!
<div class="tab-content">
<div class="row" id="create_new_spa_form">
<form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();">
<div class="span4">
<div class="form-group">
<label class="control-label col-sm-1" for="input01">Text input</label>
<div class="controls col-sm-1">
<input type="text" class="form-control-static" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
</form>
</div>
</div>
After making edits as ZimSystem suggested, now it looks like this:part of first label got truncated
How can I fix this? Also, how can I adjust the size of the input box? I don't need them to be so wide.
Use form-inline and remove the extra markup around the labels and inputs..
<form method="post" action="" class="form-inline">
<label for="input01">Text input</label>
<input type="text" class="form-control-static" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
</form>
http://www.bootply.com/7BrrI0uZiH
From the 2.x docs: http://getbootstrap.com/2.3.2/base-css.html#forms
add this to your form
class="form-inline"
more examples here about the Inline form... http://getbootstrap.com/css/#forms
hope this helps :)