Develop Reference

dynamic form using javascript

I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

concatenate values from select inputs and radio groups into one hidden field value

I'm trying to concatenate various select menus and radio groups into one hidden field value. I have something that "works" but does not provide the desired results. Basically it returns the first value of the radio groups but not the "selected" one. I'm assuming I need an array of some sort and then concatenate the "selected" value.
Here is some pertinent code:
jQuery
$(window).load(function() {
$(document).ready(function() {
$("#colorSelect, input[name=Radiogroup1]:checked, input[name=Columns]:checked, #fontSelect").change(function() {
concatenated_string = $("#colorSelect").val() + '&' +
$("input[name=Names]").val() + '&' +
$("input[name=Columns]").val() + '&' +
$("#fontSelect").val();
$("#productImage").val(concatenated_string);
$("#temp_display").text(concatenated_string)
})
})
});
html
<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="image" id="productImage" value="http://2plygraphics.com/im-here/images/01.jpg" />
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required>
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection-->
<div class="left eighty center">Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />One
<br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />Two
<br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />Three
<br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />Four
<br>
</div>
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" tabindex="2" required>
<option value="" selected="selected" disabled>Choose A Font...</option>
<option value="Arial">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content">
<div class="NameTxt1 right test">
<input class="test" type="text" name="name1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt2 right test ">
<input class="test" type="text" name="name2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt3 right test">
<input class="test" type="text" name="name3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt4 right test">
<input class="test" type="text" name="name4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13" />
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>
<div id="temp_display"></div>
here is a fiddle:
http://jsfiddle.net/mU3Ab/
Thanks for any help :)

Fix these lines:
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
concatenated_string =
$("#colorSelect").val() + '&' +
$("input[name=Names]:checked").val() + '&' +
$("input[name=Columns]:checked").val() + '&' +
$("#fontSelect").val();
Anyway, I recommend you to have a look to:
https://api.jquery.com/serialize/

try this.
var concatenated_object ={};
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
$("#colorSelect, input[name=Names]:checked, input[name=Columns]:checked, #fontSelect").each(function(){
concatenated_object[$(this).attr("name")]=$(this).val();
});
console.log(JSON.stringify(concatenated_object));
$("#productImage").val(JSON.stringify(concatenated_object));
$("#temp_display").text(JSON.stringify(concatenated_object))
});
});

HTML based brochures/flyers

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.

One label with three inputs with jQuery Mobile

I'd like to know if it's possible to make a form line with jQuerymobile like this prototype bellow.
I tried to use a layout grid with four columns, like the one bellow, but the Birthday label is bigger than the second column and increases it size.
<div class="ui-block-a">
<label for="idnumber" style="width:50%">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b">
<label for="month" style="width:10%">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:10%">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:30%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

After some minutes I posted the question I realized what was the problem. By mistake I put the style="width:XX%" inside the labels on the first two fields, instead of putting them inside the block div.
The correct code is the following:
<div class="ui-block-a" style="width:40%; margin-right: 10px;">
<label for="idnumber">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b" style="width:15%; margin-right: 5px;">
<label for="month">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:15%; margin-right: 5px;">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:20%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
And the correct result is the following:

Try this:
<div data-role="content" class="ui-grid-a">
<div class="ui-block-a">
<label for="idnumber">
ID:
</label>
<input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text" style="width:90%">
</div>
<div class="ui-block-b ui-grid-b">
<div class="ui-block-a" style="width:20%">
<label for="month">
Birthday:
</label>
<input name="month" id="month" placeholder="MM" value="" type="text" style="width:90%">
</div>
<div class="ui-block-b" style="width:20%">
<label for="day">
</label>
<input name="day" id="day" placeholder="DD" value="" type="text" style="width:90%">
</div>
<div class="ui-block-c" style="width:60%">
<label for="year">
</label>
<input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>
</div>
</div>
I think this is more simple. I'm using 2 grid and 3 grid into the second.