So my 4 dropdowns are as follow:
<select class="form-dropdown field" name="employee_id" id="employee_id" required="">
<option value=""> Select Employee ID *</option>
<option value="23137">Sydney Ross ( 23137 )</option>
<option value="E00474">Andy Sandberg ( E00474 )</option>
</select>
<!-- <input type="text" id="employee_id" name="employee_id" placeholder="Employee ID" class="field text-field last-name-field" required style="border: 1px solid #ccc;"> -->
<span id="span_month" title="">
<div id="list1" class="dropdown-check-list" tabindex="1" style="">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements(list1)">Select Months</span>
<div class="options">
<ul id="list1_items" class="items visible" name="month" style="display: block;"><li><input type="checkbox" name="month" value="4" id="4"><label for="4">Apr</label></li><li><input type="checkbox" name="month" value="5" id="5"><label for="5">May</label></li><li><input type="checkbox" name="month" value="6" id="6"><label for="6">Jun</label></li></ul>
</div>
</div>
</div>
</span>
<span id="span_quarter" title="">
<div id="list2" class="dropdown-check-list" tabindex="100" style="">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements(list2)">Select Quarter</span>
<div class="options">
<ul id="list2_items" class="items visible" name="quarter" style="display: none;"><li><input type="checkbox" name="quarter" value="1" id="1" disabled=""><label for="1"> Apr - Jun (Quarter 1)</label></li></ul>
</div>
</div>
</div>
</span>
<span id="span_year">
<select class="form-dropdown field" name="year" id="list3_items" required="">
<option value=""> Select Year *</option>
<option value="2021"> 2021-2022 </option>
</select>
</span>
So when I click the outside of the dropdown it should auto close.
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event) {
e.stopPropagation();
$('#list2_items').hide();
// $('#list3_items').hide();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
$('#list1_items').hide();
// $('#list3_items').hide();
});
I tried this solution but it is working perfectly fine on Windows but not on linux machine, I know javascript is done by browser and has no effect of the OS, but this is the issue I am facing, I tried a lot of solutions but nothing is working.
Please if someone can help me.
It is showing like this:
the image
Thankyou.
Related
as the title say
I have a problem with removing or disable select option tree multiselect patosai. Actually the disable or remove is working but the display not re-render.
any idea? here jsfiddle
<input id="checkedTree" type="text"/>
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
<button id="dis" onclick = "disableSelect()">
Remove apple and avocado
</button>
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true,
onChange:function(){
if ($select.val() != null){
document.getElementById("checkedTree").value = $select.val();
}else{
document.getElementById("checkedTree").value = "";
}
}
});
});
function disableSelect(){
document.getElementById("test-select").remove(2);
document.getElementById("test-select").remove(2);
//document.getElementById("checkedTree").value = "success";
}
the proof its working, the value that i get when checked those apple and avocado is null...
Btw, is there any way to make 2 select using patosai tree multiselect on same page? How?
That library actually changes the HTML structure of your select box. You have provided this
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
But when using patosai's plugin, it becomes as here below
<div class="section" data-key="0">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">fruit</div>
<div class="item" data-key="0" data-value="1">
<input class="option" type="checkbox" id="treemultiselect-0-0">
<label for="treemultiselect-0-0">Banana</label>
</div>
<div class="item" data-key="3" data-value="4">
<input class="option" type="checkbox" id="treemultiselect-0-3">
<label for="treemultiselect-0-3">Pineapple</label>
</div>
<div class="item" data-key="4" data-value="5">
<input class="option" type="checkbox" id="treemultiselect-0-4">
<label for="treemultiselect-0-4">PenPineappleApplePen</label>
</div>
</div>
<div class="section" data-key="1">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">animal</div>
<div class="item" data-key="5" data-value="6">
<input class="option" type="checkbox" id="treemultiselect-0-5">
<label for="treemultiselect-0-5">Tiger</label>
</div>
<div class="item" data-key="6" data-value="7">
<input class="option" type="checkbox" id="treemultiselect-0-6">
<label for="treemultiselect-0-6">Lion</label>
</div>
<div class="item" data-key="7" data-value="8">
<input class="option" type="checkbox" id="treemultiselect-0-7">
<label for="treemultiselect-0-7">Pitbull</label>
</div>
<div class="item" data-key="8" data-value="9">
<input class="option" type="checkbox" id="treemultiselect-0-8">
<label for="treemultiselect-0-8">OrangUtan</label>
</div>
<div class="item" data-key="9" data-value="10">
<input class="option" type="checkbox" id="treemultiselect-0-9">
<label for="treemultiselect-0-9">Marsupilami Yellow cartoon</label>
</div>
</div>
Which means that you have to select your elements differently. I have inspected the document and what you need is the following;
function disableSelect() {
$('.item[data-value="2"]').remove(); // removes apple
$('.item[data-value="3"]').remove(); // removes avocado
}
To remove those two elements. Here is an updated fiddle to check it yourself: https://jsfiddle.net/htumxL5r/1/
I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>
Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute
Changing the select options on clicking check boxes, i have list of 8 check boxes dynamically it counts checked check boxes for example if i click on 1 check box it will show Number Of Credits Selected : 1 , and if i click on 2 check boxes it will show Number Of Credits Selected : 2 and soon,
below the check boxes i have select options i want dynamically change of select option when check boxes are checked
example : if i click on two check boxes my select option should change to 2 selected and so on.
can somebody help me out in achieving it!
thanks!
Here is an demo example http://jsfiddle.net/Qac6J/552/
HTML
<div class="container" >
<table class="table table-striped">
<tr>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
</tr>
</table>
</div>
<div class="container">
<div class="row">
<div class="text-center">
<h1 class="print_no_of_credits">Number Of Credits Selected : 0</h1>
</div>
</div>
</div>
</div>
<form class="form-group">
<select class="form-control">
<option value="1 selected">1 selected</option>
<option value="2 selected">2 selected</option>
<option value="3 selected">3 selected</option>
<option value="4 selected">4 selected</option>
<option value="5 selected">5 selected</option>
<option value="6 selected">6 selected</option>
<option value="7 selected">7 selected</option>
<option value="8 selected">8 selected</option>
<option value="9 selected">9 selected</option>
<option value="10 selected">10 selected</option>
<option value="11 selected">11 selected</option>
<option value="12 selected">12 selected</option>
</select>
</form>
JQUERY
$(document).ready(function()
{
$('input[type="checkbox"]').click(function()
{
var total = ($('.no_of_credits:checked').length)+0;
$(".print_no_of_credits").html( "<h1>Number Of Credits Selected : "+total+"</h1>" ).length;
});
});
Just add the below line to your click event
$('.form-control').val(total + " selected");
So your updated code would be:
$('input[type="checkbox"]').click(function() {
var total = ($('.no_of_credits:checked').length) + 0;
$(".print_no_of_credits").html("<h1>Number Of Credits Selected : " + total + "</h1>").length;
$('.form-control').val(total + " selected");
});
UPDATED FIDDLE
Update
You can modify your var total calculation as
var total=$('.no_of_credits:checked').length
On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work
I am wondering if its possible to be able to create an html type brochure that can get printed or saved to pdf but the html template would have a few things that the user can alter such as adding there own images putting there details in and a description of sorts.
I would prefer to use javascript,html,css and if necessary php.
I am at the moment kind of stuck at the moment I have created an html form so it does not go further than that.
Is there an api of sorts that I can use to create several templates and allow the users to be able add what they need.
Here is the form so far:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="FlyCreator.aspx.vb" Inherits="FlyCreator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flyer Creator test</title>
<link rel="stylesheet" type="text/css" href="css/mainFlyer.css" media="all">
<script type="text/javascript" src="jquery/view.js"></script>
</head>
<body id="main_body" >
<div id="form_container">
<h1><a>Untitled Form</a></h1>
<form id="form_Flyer" class="appnitro" enctype="multipart/form-data" method="post" action="">
<div class="form_description">
<%--<h2>Flyer Creator Test</h2>--%>
</div>
<ul >
<li class="section_break">
<h3>Name and Title:</h3>
<p>Leave fields blank if they are not needed</p>
</li>
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="element_1_1" name= "element_1_1" class="element text" maxlength="255" size="20" value=""/>
<label>First</label>
</span>
<span>
<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="20" value=""/>
<label>Last</label>
</span>
<span>
<input id="element_1_3" name="element_1_3" class="element text" maxlength="50" size="40" />
<label>Title</label>
</span>
</li>
<li class="section_break">
<h3>Business Address:</h3>
<p></p>
</li>
<li id="li_3" >
<div>
<input id="element_3_1" name="element_3_1" class="element text" maxlength="35" size="30" />
<label>Company Name</label>
</div>
<div>
<input id="element_3_2" name="element_3_2" class="element text" value="" type="text" maxlength="35" size="30"/>
<label for="element_3_1">Street Address</label>
</div>
<div class="left">
<input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_2">City</label>
</div>
<div class="right">
<input id="element_3_4" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text"/>
<label for="element_3_5">Postal / Zip Code</label>
</div>
</li>
<li class="section_break">
<h3>Phones,Emails, and Website:</h3>
<p></p>
</li>
<li id="li_21" >
<label class="description" for="element_21" style="text-align:left;color:black"><b>phone no1 :</b> </label>
<div>
<select class="element select medium" id="element_21" name="element_21">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph11" value="" maxlength="3" type="text" id="ph11" size="3"/>
<input name="ph12" value="" maxlength="3" type="text" id="ph12" size="3"/>
<input name="ph13" value="" maxlength="4" type="text" id="ph13" size="3"/>
</div>
</li>
<li id="li_22" >
<label class="description" for="element_22">phone no2: </label>
<div>
<select class="element select medium" id="element_22" name="element_22">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph21" value="" maxlength="3" type="text" id="ph21" size="3"/>
<input name="ph22" value="" maxlength="3" type="text" id="ph22" size="3"/>
<input name="ph23" value="" maxlength="3" type="text" id="ph23" size="3"/>
</div>
</li>
<li id="li_23" >
<label class="description" for="element_23">phone no3: </label>
<div>
<select class="element select medium" id="element_23" name="element_23">
<option value="" selected="selected">Choose label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph31" value="" maxlength="3" type="text" id="ph31" size="3"/>
<input name="ph32" value="" maxlength="3" type="text" id="ph32" size="3"/>
<input name="ph33" value="" maxlength="3" type="text" id="ph33" size="3"/>
</div>
</li>
<li id="li_5" >
<label class="description" for="element_5">Email : </label>
<div>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<li id="li_6" >
<label class="description" for="element_6">company or personal website: </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="http://"/>
</div>
</li>
<li class="section_break">
<h3>Section Break</h3>
<p></p>
</li> <li id="li_8" >
<label class="description" for="element_8">Photo of your self </label>
<div>
<input id="element_8" name="element_8" class="element file" type="file"/>
</div>
</li> <li id="li_9" >
<label class="description" for="element_9">Main photo of house </label>
<div>
<input id="element_9" name="element_9" class="element file" type="file"/>
</div>
</li> <li id="li_10" >
<label class="description" for="element_10">interior 1 </label>
<div>
<input id="element_10" name="element_10" class="element file" type="file"/>
</div>
</li> <li id="li_11" >
<label class="description" for="element_11">house 2 </label>
<div>
<input id="element_11" name="element_11" class="element file" type="file"/>
</div>
</li> <li id="li_12" >
<label class="description" for="element_12">house 3 </label>
<div>
<input id="element_12" name="element_12" class="element file" type="file"/>
</div>
</li> <li id="li_13" >
<label class="description" for="element_13">company logo </label>
<div>
<input id="element_13" name="element_13" class="element file" type="file"/>
</div>
</li>
<li id="li_14" >
<label class="description" for="element_14">qr code </label>
<div>
<input id="element_14" name="element_14" class="element file" type="file"/>
</div>
</li>
<li id ="li_15">
<label class="description" for="element_15">Opional IEASA logo</label><img src="images/ieasa.gif" />
<div >
<input id="element_15a" name="select1" value="on" type="radio" />On<br />
<input id="element 15b" name="select1" value="on" type="radio" />Off<br />
</div>
</li>
<li class="section_break">
<h3></h3>
<p></p>
</li>
<li id="li_16" >
<label class="description" for="element_16">Property Information:</label>
<div>
<input id="element_16_1" name="element_16_1" class="element text large" value="" type="text"/>
<label for="element_16_1">Street Address</label>
</div>
<div>
<input id="element_16_2" name="element_16_2" class="element text large" value="" type="text"/>
<label for="element_16_2">Address Line 2</label>
</div>
<div class="left">
<input id="element_16_3" name="element_16_3" class="element text medium" value="" type="text"/>
<label for="element_16_3">City</label>
</div>
<div class="right">
<input id="element_16_4" name="element_16_4" class="element text medium" value="" type="text"/>
<label for="element_16_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_16_5" name="element_16_5" class="element text medium" maxlength="15" value="" type="text">
<label for="element_16_5">Postal / Zip Code</label>
</div>
</li>
<li id="li_17" >
<label class="description" for="element_17">Description of property </label>
<div>
<textarea id="element_17" name="element_17" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_18" >
<label class="description" for="element_18">property details </label>
<div>
<textarea id="element_18" name="element_18" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_19" >
<label class="description" for="element_19">property details 2 </label>
<div>
<textarea id="element_19" name="element_19" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_20" >
<label class="description" for="element_20">property details 3 </label>
<div>
<textarea id="element_20" name="element_20" class="element textarea medium"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="745249" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
</body>
</html>
To create and thereafter save/print pdf, you can try "DOMPDF". Its pretty easy to use and good results. Essentially what you would do is create your application and user options as usual using html/css/php etc. Add in your adjustments etc.
Once done, you wrap the result in a php variable called......well for now, called " $html ",
then inside of your processing page you put something like
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("YOURPDFNAMEHERE.pdf");
?>
and the domPDF lib will create a pdf with your html in it.
check it out
https://code.google.com/p/dompdf/
good luck
EDIT***
to expand on this, say that your result from all the edits/user selections is html that looks like this:
(random code)
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
then youd assign this code into any php variable. We will call it " $html ". Youd assign it like so:
$html = '
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
';
and this below
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("sample.pdf");
?>
takes your $html content and creates the pdf accordingly.