I made a form in html and want the user to be able to press submit when some fields are filled. So my button is disabled in the beginning, but for some reason my button doesn't become clickable when things are filled.
This is the form in my html:
<fieldset>
<legend>U gegevens</legend>
<form name="signup" action="index.html" method="post">
<ul>
<li> <label>Naam</label>
<input type="text" name="name" size="30" />
</li>
<li> <label>Voornaam</label>
<input type="text" name="voornaam" size="30" />
</li>
<li> <label>Adress</label>
<input type="text" name="adress" size="30" />
</li>
<li> <label>Gemeente</label>
<input type="text" name="gemeente" size="30" />
</li>
<li> <label>Postcode</label>
<input type="text" name="postcode" size="30" />
</li>
<li>
<p>Ik wens een alternatief facturatieadres <input type="checkbox" id="be1"onclick="if(this.checked){displayFac()}"></p>
</li>
<li style="display:none;" id="fac1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac2"> <label >Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac3"> <label>Postcode</label>
<input type="text" size="30" />
</li>
<li>
<p>Ik wens een alternatief leveringsadress <input type="checkbox" id="be2" onclick="if(this.checked){displayLe()}"></p>
</li>
<li style="display:none;" id="le1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le2"> <label>Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le3" > <label>Postcode</label>
<input type="text" size="30" />
</li>
<li><label for="submit"></label>
<button type="submit" id="submit" disabled>Verzenden</button>
</li>
</ul>
</form>
</fieldset>
And this is the javascript i use to check if there is something filled:
function validateForm()
{
while (true){
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if (a!=null && a!="" && b !=null && b!="" && c!=null && c!= "" && d!=null && d!="" && e!=null && e!="")
{
document.getElementById("submit").disabled=false;
}
}
}
Thanks in advance!
Remove the while loop from validateForms() function and call it on every inputs onblur event and also if the checkbox checked. hope this helps.
try this:
function validateForm()
{
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if ( a!="" && b!="" && c!= "" && d!="" && e!="")
{
document.getElementById("submit").disabled=false;
}
}
Related
Here is my javaScript:
<script type="text/javascript">
$(function () {
$('#first_name, #second_name, #third_name, #fourth_name').bind("change keyup",
function () {
if ($("#first_name").val() && $("#second_name").val() != "" && $("#third_name").val() != "" && $("#fourth_name").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
</script>
And here is my HTML:
<form method="post" id="myForm" name="myForm">
<div id="terms_area">
<ul>
<li>
<label>Print your name</label>
<input id="first_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="second_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="third_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input id="fourth_name" type="text" />
</li>
</ul>
<center>
<input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
</center>
</div>
</form>
Is there any way I can get the JavaScript to target the form name of 'myForm' as I have multiple forms on one page?
IDs have to be unique, and an ID selector will always target the first element with that ID on the page. Reusing IDs in different forms won't work. Use classes instead.
<form method="post" id="myForm" name="myForm">
<div id="terms_area">
<ul>
<li>
<label>Print your name</label>
<input class="first_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="second_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="third_name" type="text" />
</li>
<li>
<label>Print your surname</label>
<input class="fourth_name" type="text" />
</li>
</ul>
<center>
<input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
</center>
</div>
</form>
Then you can target the elements in a specific form with:
$("#myForm").find(".first_name, .second_name, .third_name, .fourth_name").on("change keyup", function() {
$("#myForm :submit").prop("disabled",
$("#myForm .first_name").val() == "" ||
$("#myForm .second_name").val() == "" ||
$("#myForm .third_name").val() == "" ||
$("#myForm .fourth_name").val() == "");
});
I've made a form with a few items. Each item has a value.
Now my question is, how can I add the values from these items (when you check them) to the total value?
See JSFiddle
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> <label for="value1">Cheesecake</label>
<input class="v1" id="value1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
<input class="v2" id="value2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="value3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
Note: without the use of jQuery.
This should do it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<style type="text/css">
ul{list-style-type:none;}
ul#AddValueList{float:left;}
.v1, .v2, .v3
{
width:35px;
text-align:right;
color:#000;
}
.v1{margin:0px 0px 0px 50px;}
.v2{margin:0px 0px 0px 56px;}
.v3{margin:0px 0px 0px 19px;}
.t
{
width:35px;
text-align:right;
color:#000;
margin:20px 0px 0px 118px;
}
#ValueSubmit,
#AddValueTotalList
{
clear:left;
}
#ValueSubmit input{margin:20px 0px 0px 0px;}
</style>
<script type="text/javascript">
var totalcounter = 0;
totaltracker = function (event) {
var targetelement = (typeof event.target != "undefined") ? event.target : event.srcElement;
var multipler = 0;
if (targetelement.checked) {
multipler++;
} else {
multipler--;
}
var targetvalue = document.getElementById(targetelement.id + 'a');
var idtotal = document.getElementById("total");
if (idtotal) idtotal.value = parseFloat(idtotal.value) + (multipler * parseFloat(targetvalue.value));
};
function totalloader () {
var elements = document.getElementsByTagName('INPUT');
for (var i=0; i<elements.length; i++) {
var thisElement = elements[i];
if (thisElement.getAttribute("type") == "checkbox") {
if (typeof thisElement.addEventListener != "undefined") {
thisElement.addEventListener("click", totaltracker, true);
} else if (typeof thisElement.attachEvent != "undefined") {
thisElement.attachEvent("onclick", totaltracker);
}
}
}
}
</script>
<title>Add Values in Form</title>
</head>
<body onLoad="totalloader();">
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10"/>
<label for="value1">Cheesecake</label>
<input class="v1" id="value1a" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
<input class="v2" id="value2a" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="value3a" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
</body>
</html>
I have changed the id of the disabled value field to more easier equate from the check box to the value to be totaled.
I have added an onload to the body tag.
I have added a script section to do the work.
var t=0;
for (i=1; i<=3; i++) {
t = t + document.getElementById('value' + i).value;
}
document.getElementById('total').value = t;
Please use the code Below
function recalculate(obj, id) {
var total = parseFloat(document.getElementById('total').value);
var amount = parseFloat(document.getElementById(id).value);
if (obj.checked) {
total += amount;
} else {
if (total >= 0) {
total -= amount;
}
}
document.getElementById('total').value = total;
}
</script>
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10" onchange="recalculate(this, 'txtValue1');"/> <label for="value1">Cheesecake</label>
<input class="v1" id="txtValue1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20" onchange="recalculate(this, 'txtValue2');"/> <label for="value2">Banana Pie</label>
<input class="v2" id="txtValue2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30" onchange="recalculate(this, 'txtValue3');"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="txtValue3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
Using JQuery JSFIDDLE:
$(document ).ready(function() {
console.log( "ready!" );
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$('#total').val( parseFloat($('#total').val())+parseFloat($(this).parent().find('input[type=text]').val()));
} else {
$('#total').val( parseFloat($('#total').val())-parseFloat($(this).parent().find('input[type=text]').val()));
}
});
});
fiddle
html
<ol id="input-l8YFwLZvwNZ4" class="infinitext-lis">
<li>
<input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text">
<input type="hidden" name="answers[0][order]">
</li>
<li class="">
<input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text">
<input type="hidden" name="answers[1][order]">
</li>
...
</ol>
js
$('#input-l8YFwLZvwNZ4').sortable();
When you grab one of the list items by the number and drag it up or down over top of one of the other list numbers, they don't move and allow you to drop the list item there. You have to pick an item up, move your mouse to the right and drop it over one of the text boxes instead.
Is there a way to fix this?
Have a look at this fiddle : http://jsfiddle.net/k19o7adr/1/
There is some problem with ordered list with sortable, so i have changed it to ul tag and all is working fine now.
$('#input2').sortable();
<ul id="input2" class="infinitext-lis">
<li>1.
<input type="text" name="answers[0[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[0][order]"/>
</li>
<li class="">2.
<input type="text" name="answers[1[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[1][order]"/>
</li>
<li class="">3.
<input type="text" name="answers[4[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[4][order]"/>
</li>
<li>4.
<input type="text" name="answers[2[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[2][order]"/>
</li>
<li class="">5.
<input type="text" name="answers[5[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[5][order]"/>
</li>
<li>6.
<input type="text" name="answers[6[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[6][order]"/>
</li>
<li class="">7.
<input type="text" name="answers[3[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[3][order]"/>
</li>
<li class="">8.
<input type="text" name="answers[7[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[7][order]"/>
</li>
<li>9.
<input type="text" name="answers[8[text]" style="width:275px" class="infinitext-text"/>
<input type="hidden" name="answers[8][order]"/>
</li>
</ul>
here i use a same address option in my page
when i click on checkbox for same address my other input must disable
my code:
<ul><input type="checkbox" name="same-address" /> Click for same address <br />Enter Address here: <input type="text" name="address" /> Enter City here: <input type="text" name="city" /> </ul>
Try this
$('#same').click(function () {
if ($(this).is(':checked')) {
$(this).parents('ul').find('li input[type="text"],select').attr('disabled', 'disabled');
} else {
$(this).parents('ul').find('li input[type="text"],select').removeAttr('disabled')
}
});
DEMO Fiddle
You can use attribute equals selector to select the input by type and use .prop to update the disabled state of your input:
$('input[type="checkbox"]').click(function() {
$('input[type="text"]').prop('disabled',this.checked);
});
Fiddle Demo
You can use input selector for selecting all the input elements and in conjunction use Prop for disabling the controls.
$('input[type="checkbox"]').click(function() {
$('input[type="text"]').prop('disabled',this.checked);
})
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.SameAsBillingAddress').on('click',function(){
if($(this).prop('checked'))
{
$('.Address2').prop('disabled', true);
}
else
{
$('.Address2').prop('disabled', false);
}
});
});
</script>
</head>
<body>
<div>
<ul>
<div style="height:30px; width:80%; margin-left:30px; clear:both;">
<input name="" type="checkbox" value="" class="SameAsBillingAddress" />Same as Billing Address</div>
<li>
<label>House No.:</label>
<input type="text" name="house no" class="Address2" placeholder="House No" />
</li>
<li>
<label>Street:</label>
<input type="text" name="street" class="Address2" placeholder="Your Street" />
</li>
<li>
<label>City</label>
<input type="text" name="city" class="Address2" placeholder="Your City" />
</li>
<li>
<label>Zip:</label>
<input type="text" name="zip" class="Address2" placeholder="Your Zip" />
</li>
<li>
<label>Country:</label>
<select class="Address2">
<option>India</option>
</select>
</li>
<li style="float:right;">
<label></label>
<input type="submit" name="save" class="Address2" value="Save Details" />
</li>
</ul>
</div>
</body>
</html>
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.