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.
Related
I need to pass multiple filled values to a hidden form field using javascript/jquery. The fields must have a value or don't pass. I can pass the regular text fields with no problem but the checkbox and radio fields always seem to get me. Javascript is not my expertise so I'm willing to learn. Thanks in advance.
The values we are wanting to capture are:
Questions/comments
Product Interests (this can be multiple values)
Industry
Number of Employees
Multiple Locations if "true".
Each item will be separated by a pipe character.
$(document).ready(function() {
$(function(){ $('#13005,#14604').on("keyup",function(){
commentField = $("#13005").val(); + " || "
products = $("p.Custom_LR_FormServices input:checkbox:checked").map(function(){return $(this).val()}).get();
industryField = $("p.RAQFormIndustry input:checkbox:checked").map(function(){return $(this).val()}).get();
numberEmployees = $;
multipleLocations = $;
hiddenField = commentField + " || " + products + " || " + industryField + "||" + numberEmployees + " || " + multipleLocations;
$("#14604").val(hiddenField);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" onchange="" cols="40" rows="10" class="standard"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" onchange="" />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" onchange="" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" onchange="" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" onchange="" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" onchange="" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" onchange="" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" onchange="" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" onchange="" />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" onchange="" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" onchange="" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" onchange="" />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" onchange="" />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" onchange="" />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" onchange="" />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" onchange="" />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" onchange="" />
<label class="inline" for="13009_47769_47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" onchange="" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" onchange="" />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" />
<span id="error_for_14604" style="display:none"></span> </p>
**
Here's one way. You can just put a change event listener on the form tag - any changes to the form will trigger the script. The string that gets written into the hidden field is JSON and it can be easily decoded on the back end.
$('#theForm').on('change', function() {
let vals = [];
let prod = [], ind = [];
$(".fCustom_LR_FormServices input:checked").each(function(){ prod.push(getTextFromElID($(this).attr('id')))})
vals.push({'commentField': $("#13005").val() || ''})
vals.push({'products': prod || []})
vals.push({'industryField': getTextFromElID($(".fRAQFormIndustry input:checked").attr('id')) || ''})
vals.push({'numberEmployees': getTextFromElID($(".fCustom_LR_FormEmployees input:checked").attr('id')) || ''})
vals.push({'multipleLocations': getTextFromElID($(".Custom_LR_FormMulitLocation input:checked").attr('id')) || ''})
$("#14604").val(JSON.stringify(vals));
})
function getTextFromElID(id) {
return $(`[for=${id}]`).text().trim();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='theForm'>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" cols="40" rows="10" class="standard saver"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" />
<label class="inline" for="13009_47769_47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" style='width:100%;' />
<span id="error_for_14604" style="display:none"></span> </p>
</form>
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
How can i hide the textbox when the class active is found in UL > LI
when i should show its label and textbox otherwise, it should be hidden. i am trying to get the value of selected checkbox and hide it but unable to reach there.
$('ul.multiselect-container').has('li.active').css('display', 'none');
<ul class="multiselect-container dropdown-menu">
<li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Paypal</label></a>
</li>
<li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Stripe</label></a>
</li>
<li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3">Beanstream</label></a>
</li>
</ul>
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
<br>
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
<br>
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
Update
Sorry if question is not clear,
when i click the first checkbox, say paypal then only paypal label and text box should appear below, the remaining text box 2 and its labels should hide. we need to loop through UL tag with each() i guess.
Here is a fiddle. http://jsfiddle.net/nzw7LoL0/5/
update 2
i am unable to add a class to the div called option and option 1 since html is generated with a framework. so i need to hide the row which has the class .control-group http://jsfiddle.net/d280wqr4/5/
$('input:checkbox').on('change', function () { // Apply change listener to checkboxes
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.option' + $(this).prop('value'))find('.control-group').show();
} else { // Otherwise, hide the relevant element
$('.option' + $(this).prop('value')).find('.control-group')hide();
}
});
<div class="control-group "><label for="Configuration_paypalId" class="control-label">Paypal Id</label><div class="controls"><input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1"><p class="help-block">Merchant id or email of the Paypal account</p></div></div>
<div class="control-group "><label for="Configuration_stripeId" class="control-label">Stripe Id</label><div class="controls"><input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2"><p class="help-block">Stripe id or email of the Stripe account</p></div></div>
Assign a common class so that the selector becomes simple
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 classname">
then
$('input.classname').toggle($('.multiselect-container li.active').length == 0);//hides input with class `classname` if `li` has `active` class
$('ul.multiselect-container').has('li.active').hide();//hides the ul if li has active class
$('.multiselect-container input:checkbox').click(function(){
var type = $(this).data('type');
$('.'+type).toggle(this.checked);
$(this).closest('li').addClass('active')
});
$('.payid').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1" data-type="paypal"> Paypal</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2" data-type="stripe"> Stripe</label></a></li>
<li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3" data-type="bean">Beanstream</label></a></li>
</ul>
<div class="paypal payid">
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="stripe payid">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="bean payid">
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>
If you are able to change your markup little bit then you can make use of data-* attribute this way:
$('.dropdown-menu :checkbox').change(function(e) {
var target = $(this).data('target');
$('.' + target).toggle();
});
.paypal, .stripe, .beanstream{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='paypal' value="1">Paypal</label>
</a>
</li>
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='stripe' value="2">Stripe</label>
</a>
</li>
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='beanstream' value="3">Beanstream</label>
</a>
</li>
</ul>
<label for="Configuration_paypalId" class="control-label paypal">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 paypal">
<br>
<label for="Configuration_stripeId" class="control-label stripe">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 stripe">
<br>
<label for="Configuration_beanId" class="control-label beanstream">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 beanstream">
You need to apply a "change" listener to the checkboxes, and then work out if they are checked and show/hide another element based upon this information. You do need a class or id that matches the value property of the checkbox.
The below example should be working as you're hoping.
$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.option' + $(this).prop('value')).show();
} else { // Otherwise, hide the relevant element
$('.option' + $(this).prop('value')).hide();
}
});
.option {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="1" />Paypal
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="2" />Stripe
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="3" />Beanstream
</label>
</a>
</li>
</ul>
<div class="option option1"> <!-- The number refers to the value of the checkbox -->
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="option option2">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="option option3">
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>
Update based upon more information
If you can't edit the html because it's dynamically generated, you'll need to do it based upon the index. This will only work if the order of the checkboxes matches the other of the inputs, but if it's dynamically generated then I don't see why this shouldn't be the case.
$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
var index = parseInt($(this).prop('value')) - 1; // Make the index zero based
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.control-group:eq(' + index + ')').show();
} else { // Otherwise, hide the relevant element
$('.control-group:eq(' + index + ')').hide();
}
});
.control-group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="1" />Paypal
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="2" />Stripe
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="3" />Beanstream
</label>
</a>
</li>
</ul>
<p>------------------------------</p>
<div class="control-group">
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1" />
<p class="help-block">Merchant id or email of the Paypal account</p>
</div>
<div class="control-group">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2" />
<p class="help-block">Stripe id or email of the Stripe account</p>
</div>
Anyone have any sample code to provide conditional skip logic within the context of an HTML survey form?
Here is a sample of the HTML I am trying to work with; for example if a user select an answer to question 19 and then skip to 21:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/querystring.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/rateit/jquery.rateit.min.js?v=2013-08-19"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form.CoreMotives').submit(function() {
if (!ValidateRequiredFields(this)) return false;
var submitButton = $(this).find("input[type='submit']");
if (submitButton != null) {
if (submitButton.attr('disabled') == 'disabled') return false;
submitButton.attr('disabled', 'disabled');
}
coreMotives.initForm(this);
return true;
});
var qs = new Querystring();
$('#txtFirstName').val(qs.get("txtFirstName", ""));
$('#txtLastName').val(qs.get("txtLastName", ""));
$('#txtCompanyName').val(qs.get("txtCompanyName", ""));
$('#txtTelephone').val(qs.get("txtTelephone", ""));
$('#txtEmailAddress').val(qs.get("txtEmailAddress", ""));
$('#txtComments').val(qs.get("txtComments", ""));
$('#Q22').val(qs.get("Q22", ""));
$('input[name=Question19][value=' + qs.get("Question19", "") + ']').prop('checked', true);
if ($.isNumeric(qs.get("Question1", ""))) $('#Question1').val(parseInt(qs.get("Question1", "")));
if ($.isNumeric(qs.get("Question2", ""))) $('#Question2').val(parseInt(qs.get("Question2", "")));
if ($.isNumeric(qs.get("Question3", ""))) $('#Question3').val(parseInt(qs.get("Question3", "")));
if ($.isNumeric(qs.get("Question4", ""))) $('#Question4').val(parseInt(qs.get("Question4", "")));
$('div.rateit').rateit();
});
</script>
<script type="text/javascript" src="//databroker.coremotives.com/Styles/WebForms/form.js"></script>
<link rel="stylesheet" href="//databroker.coremotives.com/Styles/WebForms/form.css" type="text/css" />
<link rel="stylesheet" href="//databroker.coremotives.com/Scripts/rateit/rateit.css?v=2013-08-19" type="text/css"/>
<style type="text/css">
</style>
</head>
<body class="noI">
<div id="container">
<form class="CoreMotives" method="post" enctype="multipart/form-data" action="//databroker.coremotives.com/WebCapture.aspx?cm_cid=01d60c03-47d8-e211-b434-00155d32390f&cm_iid=1584&cm_formid=b9e27eb2-49a5-e311-8684-000c293cd65c">
<ul>
<li class="complex">
<div>
<span class="half left">
<label class="desc" for="txtFirstName">First Name</label>
<input id="txtFirstName" name="txtFirstName" type="text" class="field text full " maxlength="255" tabindex="1" value="" />
</span>
<span class="half right">
<label class="desc" for="txtLastName">Last Name</label>
<input id="txtLastName" name="txtLastName" type="text" class="field text full " maxlength="255" tabindex="2" value="" />
</span>
</div>
</li>
<li>
<label class="desc" for="txtCompanyName">Company</label>
<div class="large">
<input id="txtCompanyName" name="txtCompanyName" type="text" class="field text full " maxlength="255" tabindex="3" value="" />
</div>
</li>
<li>
<label class="desc" for="txtTelephone">Phone</label>
<div class="large">
<input id="txtTelephone" name="txtTelephone" type="text" class="field text full " maxlength="255" tabindex="4" value="" />
</div>
</li>
<li>
<label class="desc" for="txtEmailAddress">Email<span class="req">*</span></label>
<div class="large">
<input id="txtEmailAddress" name="txtEmailAddress" type="text" class="field text full email" maxlength="255" tabindex="5" value="" />
</div>
</li>
<li>
<label class="desc" for="txtComments">Comments</label>
<div class="large">
<textarea id="txtComments" name="txtComments" class="field textarea medium " rows="10" cols="50" tabindex="6"></textarea>
</div>
</li>
<li>
<label class="desc" for="Question1">1. How satisfied are you, the employer, with BCBSVT?</label>
<div class="large">
<input type="text" id="Question1" name="Question1"/><div class="rateit star_blue" data-rateit-backingfld="#Question1" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question2">2. How satisfied would you say your employees are with BCBSVT?</label>
<div class="large">
<input type="text" id="Question2" name="Question2"/><div class="rateit star_red" data-rateit-backingfld="#Question2" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question3">3. Would you recommend BCBSVT to a business colleague?</label>
<div class="large">
<input type="text" id="Question3" name="Question3"/><div class="rateit star_red" data-rateit-backingfld="#Question3" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question4">4. At your next contract renewal, how likely is your company to renew with BCBSVT?</label>
<div class="large">
<input type="text" id="Question4" name="Question4"/><div class="rateit star_red" data-rateit-backingfld="#Question4" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<div class="large">
<label id="" class="desc">5. If benefits and their costs are the most important factors for considering a health insurance car</label>
</div>
</li>
<li>
<label class="desc" for="Question19">19. Did your company conduct open enrollment meetings for employees to discuss benefits for the new</label>
<div class="large">
<div><span style="width:100%; padding-bottom:0px;"><input id="Question19_0" name="Question19" type="radio" class="field radio" value="83668" tabindex="12" /><label class="choice" for="Question19_0">Yes</label></span><span style="width:100%; padding-bottom:0px;"><input id="Question19_1" name="Question19" type="radio" class="field radio" value="60591" tabindex="13" /><label class="choice" for="Question19_1">No</label></span></div>
</div>
</li>
<li>
<label class="desc" for="Q22">22. How can BCBSVT improve the open enrollment process for your company?</label>
<div class="large">
<textarea id="Q22" name="Q22" class="field textarea medium " rows="10" cols="50" tabindex="13"></textarea>
</div>
</li>
<li class="buttons">
<div><input id="submitButton" name="submitButton" class="btTxt submit" type="submit" value="Submit" /></div>
</li>
</ul>
</form>
</div>
<img id="bottom" src="//databroker.coremotives.com/Styles/WebForms/bottom.png" alt="" />
<script type="text/javascript">
var path = (("https:" == document.location.protocol) ? "https://databroker.coremotives.com/databroker.js?version=2" : "http://cdn.coremotivesmarketing.com/databroker.js");
document.write(unescape("%3Cscript src='" + path + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var coreMotives = new DataBroker();
coreMotives.customerId = "01d60c03-47d8-e211-b434-00155d32390f";
coreMotives.instanceId = 1584;
coreMotives.formId = "b9e27eb2-49a5-e311-8684-000c293cd65c";
coreMotives.trackPageView();
} catch (e) { }
</script>
</body>
</html>
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))
});
});