I have jQuery like this :
jqObj.bind('change', function () {
debugger;
});
jqObj matches two elements (dropDownList), but only the firs of them respond to the 'change' event, the second element that on position [1] do nothing on change.
This is my HTML :
<div id="area-146">
<div class="blockContent">
<div class="form-element duplicate ">
<label for="71">Idioma </label>
<select id="combo-71" style="width: 200px;">
<option value="Russo">Russo</option>
<option value="Sueco">Sueco</option>
</select>
<input id="text-71" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="72">Escrita </label>
<input class="peq" id="72" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="73">Conversação </label>
<input class="peq" id="73" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="85"> </label>
<br>
<br style="clear: left;">
</div>
</div>
<div id="area-146-2"><div class="form-element duplicate ">
<label for="71">Idioma </label>
<select id="combo-71-2" style="width: 200px;">
<option value="Russo">Russo</option>
<option value="Sueco">Sueco</option>
</select>
<input id="text-71-2" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="72">Escrita </label>
<input class="peq" id="72-2" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="73">Conversação </label>
<input class="peq" id="73-2" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="85"> </label>
<br>
<br style="clear: left;">
</div>
</div>
jqObj object is the following:
[<select id="combo-71" style="width: 200px;">…</select>, <select id="combo-71-2" style="width: 200px;">…</select>]
I don't know why it respond only for a first element, but not the both of them.
The elements are added dynamically, then I make a new select to match all existing elements in the page. I also cannot use .on() because the version of my jQuery is 1.6 .
Any suggestion?
bind will not bind a listener to an element created dynamically after bind has been called. However, delegate will, you just need to specify an appropriate ancestor:
$('#area-146').delegate('select', 'change', function(){
//glorious code!
});
ref: https://api.jquery.com/delegate/
Related
The question may sound complicated but all I just wanna do is to make the maximum number allowed to input in the damaged less than to the number that is being inputted in the quantity. I need to make the input of the other input field is based on the input on another input field.
Here is my code for the input form:
`
<div id="addtransaction" class="col-12" style="display:none">
<div class="card overflow-auto">
<div class="card-body ">
<div class="row">
<h5 class="add-title text-center">Add Transaction</h5>
<form method="POST" action="inv-add.php" id="form1" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-3">
<label for="customer" class="text-black"><strong>Customer</strong></label>
<input class="form-control" type="text" name="customer" maxlength="10" required >
</div>
<div class="col-md-3">
<label for="transaction" class="text-black"><strong>Transaction</strong></label>
<select class="form-control" name="transaction" required>
<option value="" disabled selected>Choose a transaction</option>
<option value="1">Regular</option>
<option value="2">Refill</option>
</select>
</div>
<div class="col-md-3">
<label for="item" class="text-black"><strong>Item</strong></label>
<select class="form-control" name="item" required>
<option value="" disabled selected>Choose an item</option>
<option value="0">Slim</option>
<option value="1">Round</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="quantity" class="text-black"><strong>Quantity</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="quantity" required>
</div>
<div class="col-md-3">
<label for="price" class="text-black"><strong>Price per galon</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="4" name="price" placeholder="₱ 0.00" required >
</div>
<div class="col-md-3">
<label for="returns" class="text-black"><strong>Gallons returned</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="returns">
</div>
<div class="col-md-2">
<label for="damaged" class="text-black"><strong>Damaged</strong> </label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="damaged">
</div>
</div>
<div style="padding-top: 10px; display: flex; align-items: flex-end;">
<button type="submit" name="add" id="add" class="btn btn-primary add">Confirm</button>
</div>
</form>
</div>
</div>
</div>
`
You can use the setAttribute() method in order to modify the maximum number allowed in you imput.
element.setAttribute(attributeName, attributeValue)
And call this method each time the value of the other imput is modify.
I have been locked in this logic for 2 weeks, I need to do that only the "div" containing the "linha-opcao-resposta" class that has other children with the same class.
In other words.
I need to make the children of the "div" input parent containing "div" children with the same parent class when selected appear and hide the others from the group of radio buttons
Look in the example below.
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>
only radio buttons containing children with the same class of "linha-opcao-resposta" should appear, other radio buttons that do not contain, should make those containing children disappear.
I tried to do it this way, but without success.
$('input[type="radio"]').on('change', function () {
var element = $(this);
var pais = element.parent().parent();
var filhos;
var aux = 0;
pais.forEach(pai => {
if (element.val() == aux) {
filhos = pai.children();
if (filhos.length > 1) {
for (var j = 0; j < filhos.length; j++) {
filhos[j].style.display = "block";
}
}
}
else {
filhos = pai.children();
for (var k = 0; k < filhos.length; j++) {
filhos[k].style.display = "none";
}
}
aux++;
});
First set display = 'none' to all radio button's parent. Then set display = 'block' only to the radio button's parents matching the condition. Try the following way:
var radio = document.querySelectorAll('input[type=radio]');
radio.forEach(function(radEl){
radEl.parentElement.style.display = 'none';
});
var radShow = document.querySelectorAll('div.linha-opcao-resposta + div.linha-opcao-resposta > div > input[type=radio]');
radShow.forEach(function(radEl){
radEl.parentElement.style.display = 'block';
});
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>
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
I would like to put elements inline.
Here's my code:
<div class="form-group">
<div data-bind="foreach: myList">
<label class="checkbox">
<input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids" />
<span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()" />
</label>
<input type="text" class="form-control" value="TEST" />
</div>
</div>
Now It looks like:
checkbox, label
input
I want to put all elements in one line like:
checkbox label input
checkbox label input
checkbox label input
You can do this using Bootstrap's form-inline class.
Working Example
<div class="form-inline">
<div data-bind="foreach: myList">
<div class="checkbox">
<label>
<input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids">
<span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()"></span>
</label>
</div>
<input type="text" class="form-control" value="TEST">
</div>
</div>
Check this:
<div class="form-group">
<div data-bind="foreach: myList">
<label class="checkbox col-sm-6">
<input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids" />
<span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()" />
</label>
<div class="col-sm-6" >
<input type="text" class="form-control" value="TEST" />
</div>
</div>
</div>
You can change col-sm-6 to change width..
<form class="form-inline">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<input type="text" class="form-control" value="TEST">
</div>
</form>
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))
});
});