I created one form with bootstrap. Now i want to export the form to pdf with the same style. please help me to solve out this issue
Here is the file jsfiddle
<div class="row">
<div class="col-sm-8 center">
<h3>Fill Your Form</h3>
<div class="row">
<div class="col-sm-4">
First Name:
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
Middle Name:
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
Last Name:
<input type="text" class="form-control" />
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<button id="button" class=" btn btn-danger">Generate PDF</button>
</div>
</div>
PDF Result want to be like this
Your solution is on this link , I am not sure if you want to generate pdf without any library.
Related
I have a form1 and a add button. The thing I want is to add same form as form2 below form1 on clinking add button. As I am new to Angular Js it will be very helpful if someone can help me out.
HTML
<div class="row">
<header class="panel-heading">
<h5 class="panel-title" style="padding-left: 1.5rem;">
<b>APPLICANTS</b>
<input class="btn btn-primary" style="float:right " type="button" value="Add" />
</h5>
<hr>
</header>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtFullName">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nationality</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtNationality">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Pin Code</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtPincode">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">House No.</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtHouseNo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to create an array of applicants model objects, let's call it applicantsArray, where every object will represent a single applicant form.
You need to initialize this array with one model empty on page load.
Then you need to wrap your form with ng-for and iterate over every applicant model. So the n-th form will be binded with the n-th model in the applicantsArray.
Last step will be to push an empty applicant model to applicantsArray when 'Add' is clicked. Then a new model is added and the DOM will render additional form for the new model.
I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?
try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.
Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.
If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
this may be a little confusing, but let me show you the problem.
I am using express-handlebars in a NodeJs web app. I have to get user input in forms. To get that done, let's say I have two separate forms in two different views 1. Login 2. Book. What I want to achieve is code-reuse of the following partial/template:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{{ formBody }}}
</div>
</div>
</div>
Can anyone guide me how do I use the above template in a form like below:
{{> entry_form }} <!-- start of the form -->
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value="{{email}}"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value="{{password}}"/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="{{rememberMe}}"/>
Remeber me!
</div>
</div>
<div class="form-group text-danger">
{{ errorMessage }}
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form> <!-- end of the form -->
I want to get the following output after compilation. Assuming that {{variables}} will be replaced by the provided values in the context:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>Sing in</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value=""/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value=""/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" />
Remeber me!
</div>
</div>
<div class="form-group text-danger">
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form>
</div>
</div>
</div>
I solved the problem myself. Posting here the solution just to help others if they run into such issues.
What I have done is, I have used inline partials as following.
enclose the login form into inline partial:
{{#*inline loginForm}}
<form class="form-horizontal" method="post" action="/login">
<!-- form contorls -->
</form>
{{/inline}}
{{#> entry-form}}
{{> (lookup . 'loginForm')}}
{{/entry-form}}
Define form container partial as following:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> (dataform) }}
</div>
</div>
</div>
</div>
Please note that I have kept the form container partial in views/partials/entry-from.hbs file, and have loaded them by using:
const express = require('express');
let app = express();
app.engine('hbs', hbs({
extname:'hbs',
defaultLayout:'layout',
layoutsDir:join(__dirname,'views/layouts/'),
partialsDir: [
join(__dirname,'views/partials/')
]
}));
I seem to have arrived a bit late, but I would like to propose an alternative to #Nadeem Jamali's solution for those who have run into the same problem.
Reading the documentation I found the following: https://handlebarsjs.com/guide/partials.html#partial-blocks
You can use {{#partial-block}} in order to represent the content that will be embeded into your partial. Let me give you an example:
container-partial.hbs
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
{{#partial-block}}
<!-- More code here... -->
</div>
Now, in every handlebars file you can use this partial like this:
foobar.hbs
{{#> container-partial }}
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
{{/container-partial}}
And the output after compilation will be:
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
<!-- More code here... -->
</div>
In this case, we can find a solution to #nadeem-jamali's question by doing the following:
form-container.hbs
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> #partial-block }}
</div>
</div>
</div>
</div>
Now, we can use the partial like this:
login-form.hbs
{{#> form-container formTitle="FooBar"}}
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
{{/form-container}}
And the result will be:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>FooBar</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
</div>
</div>
</div>
</div>
Hope it helps :D !