Unique increment id / class to display different inputs using JQuery
I have a form that is currently running as a single line allowing different input fields based on the Production dropdown.
i.e. If you choose CPE or CPM, you will receive input for impressions and targeting. If you choose Eggs2Go, you will only get an impression.
While this works, if I add a line and use the dropdown menu it affects the first ID tag changing that line, not the new line parameters.
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
document.getElementById("showTarget").style.display = "block";
document.getElementById("showImpressions").style.display = "none";
}
else if (that.value == "EGGS") {
document.getElementById("showImpressions").style.display = "block";
document.getElementById("showTarget").style.display = "none";
}
else {
document.getElementById("showTarget").style.display = "none";
document.getElementById("showImpressions").style.display = "none";
}
}
Is there a way that I can give an auto-increment for each new line so that showTarget and ShowImpressions act individually?
Details in the fiddle
+3
source to share
3 answers
You cannot repeat the ID on the page, they must be unique by definition.
A common approach to iterating over such strings is to use generic classes for similar elements and allocate instances in event handlers by looking up the parent string element and then looking at that particular string for the required elements
Suppose we change all duplicate identifiers to the same class name, then you do the following in jQuery
$('#tableContainer').on('change', 'select', function(e){
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
// flags for toggling various classes
showImpressions = false,
showTarget = false;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
}
// other conditionals to set flags based on other values
// now toggle display of instances of classes within row instance
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
});
+1
source to share
As mentioned by charlietfl, IDs are unique. Using an existing encoding format
Change all id to class Find the second parentNodes of your select tag Once the main parent pointer is found, find your sisters' input fields that need to be changedBelow is snippet below
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<select name="products" onchange="showTargetCheck(this);">' +
'<option>Select one</option>' +
'<option disabled>---</option>' +
'<option value="PRODUCTION">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
'<div class="showImpressions" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="showTarget" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
#tableContainer {
display: table;
}
.tableRow {
display: table-row;
}
.tableLeft,
.tableRight,
.tableMiddle {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
} else if (that.value == "EGGS") {
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
} else {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
}
}
</script>
<!-- IO Table -->
<div id="tableContainer">
<!-- IO Row -->
<div class="tableRow">
<!-- Start Date -->
<div class="tableLeft">
<h4>Start</h4>
<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">
</div>
<div class="tableMiddle">
<h4>End</h4>
<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">
</div>
<!-- End Date -->
<!-- Products -->
<div class="tableMiddle">
<h4>Products</h4>
<select name="products" onchange="showTargetCheck(this);">
<option>Select one</option>
<option disabled>---</option>
<option value="PRODUCTION">Production</option>
<option value="CPE">CPE</option>
<option value="CPM">CPM</option>
<option value="SWIFT">Swift</option>
<option value="EGGS">Eggs2Go</option>
</select>
</div>
<!-- Products -->
<!-- Show Impressions Only -->
<div class="showImpressions" style="display: none;">
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Impressions Only -->
<!-- Show Targeting & Impressions -->
<div class="showTarget" style="display: none;">
<div class="tableMiddle">
<h4>Targeting</h4>
<input type="text" placeholder="Targeting">
</div>
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Targeting & Impressions -->
<!-- Rates -->
<div class="tableMiddle">
<h4>Rate</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="rates">
</span>
</div>
<!-- Rates -->
<!-- Gross Cost -->
<div class="tableMiddle">
<h4>Gross</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="grosscost">
</span>
</div>
<!-- Gross Cost -->
<!-- Net Cost -->
<div class="tableMiddle">
<h4>Net</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="netcost">
</span>
</div>
<!-- Net Cost -->
<!-- Notes -->
<div class="tableRight">
<h4>Notes</h4>
<input type="text" placeholder="Notes" class="notes">
</div>
<!-- Notes -->
</div>
<!-- IO Row -->
</div>
<!-- ADD NEW IO LINE -->
<div id="IOLine"></div>
<button type="button" id="addNewIOLine">+ Add New Line</button>
<!-- ADD NEW IO LINE -->
0
source to share
(Posted on behalf of the OP).
Working version here in case anyone needs a link:
/*
Toggle Impressions and Targeting Fields
*/
$('#tableContainer').on('change', 'select', function(e) {
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
showImpressions = true,
showTarget = true,
showDefault = true;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
showImpressions = false;
showDefault = false;
} else if (currVal == "EGGS") {
showImpressions = true;
showTarget = false;
showDefault = false;
} else if (currVal == "DEFAULT" || currVal == "") {
showDefault = true;
showTarget = false;
showImpressions = false;
}
// other conditionals to set flags
// now toggle instances of classes within row
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
$row.find('.showDefault').toggle(showDefault);
});
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
/* DATES */
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
/* PRODUCTS */
'<div class="tableMiddle">' +
'<select name="products">' +
'<option value="DEFAULT">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
/* Show Default */
'<div class="showDefault">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="N/A" class="imps" disabled>' +
'</div>' +
'</div>' +
/* Show Impressions Only */
'<div class="showImpressions">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* Show Targeting & Impressions */
'<div class="showTarget">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* RATES */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
/* GROSS COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
/* NET COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
/* NOTES */
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
0
source to share