I'm trying to get unique id for each table row on my input fields and buttons. Currently all ids in my table are the same. I want to set unique id for each input field ans save button. Here is my HTML code:
<cfoutput query="qryTable" group="DateSch">
<tbody>
<tr>
<td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
</tr>
<cfoutput>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<label>
<input type="text" name="email" id="email" class="email" placeholder="example#gmail.com">
<input type="button" id="slot" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
</label>
</td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
As you can see from code above my input field ids are all email and my button ids are slot. How I can make them unique for each row? If anyone can help please let me know.
Add the currentRow to the ID
<cfoutput query="qryTable" group="DateSch">
<tbody>
<tr>
<td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
</tr>
<cfoutput>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<label>
<input type="text" name="email" id="email#currentRow#" class="email" placeholder="example#gmail.com">
<input type="button" id="slot#currentRow#" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
</label>
</td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
To dynamically add unique id to the row use uniqueId or just a counter with some specific prefix.
To make input ids unique add entity id or the row number to them.
There is another thread here:
Create GUID / UUID in JavaScript?
If you cannot find a solution there:
I got a UUID class from Erik Giberti (AF-Design). While his file is no longer available for downloading, I would be willing to provide it to.
Related
Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
I have made the table structure below. How can I add a second column of this table dynamically whenever I click add1 link using javascript? The whole column from up to down.This same column must be repeated again and again
Here is my HTML:
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add1
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add2
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<tdAdd3
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
<tr>
<td>Add4
</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]">
</td>
</tr>
</tbody>
</table>
You need to bind a function to the link's click event. In that function, you need to iterate through each row, find the position where you want to add the column, and then insert it.
$(function(){
// bind the function to the click event
$("#add1").on("click", function(){
// iterate through each row
$("table tbody tr").each(function(){
// insert the column HTML at the desired point
$(this).children().first().after("<td>New Column</td>");
});
});
});
DEMO
If you want to make all of the links add the column when clicked, then just replace #add1 with .add in the jQuery.
I created a JavaScript function that adds a row to your table.
I also removed the <p> tag because it's not valid HTML and makes no visual difference.
<table id="datble" class="form" border="1">
<tbody>
<tr>
<td>Add 1</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
<tr>
<td>Add 2</td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_NAME[]" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function addColumn(element) {
var tr = element.parentElement.parentElement;
var td = document.createElement("td");
td.innerHTML = '<label>Name</label>';
td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
tr.appendChild(td);
}
</script>
EDIT: Sorry, I misunderstood and thought you wanted to add a row. I changed the code to add a column instead.
EDIT 2: I changed the code so you can use it on multiple rows.
I have search lot of about this but haven't found any solution. I want to validate multiple array named file inputs and dropdowns in JQuery validate.
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
I have added JQuery Validate Code like this:
$("#formname").validate(
{
rules:{
times:{required:true, digits:true}
}}
);
But its only validating first input and showing error message there only whether 2nd or 3rd input field entered or not.
I don't want to change this "times[]" name because functionality is depending on this. Only I want validation using JQuery validate.
Is there any trick available for this?
Any help would be appreciated.
Thanks
The plugin doesn't handle fields with the same name well. Here's how I solved it in my application.
I gave all the repetitive fields distinct names, and put the validation method names in the class.
<td> <input type="text" class="times required digits" name="times[0]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[1]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[2]" /> </td>
</tr>
You can remove the indexes before submitting with code like this:
$("#formname").validate({
...
submitHandler: function(form) {
$(form).find(":input[name*='[']").each(function() {
this.name = this.name.replace(/\[\d+\]/, '[]');
}
form.submit();
}
});
I am using the following code to make a certain section of my form show or hide depending on the selection of the radio buttons. However, if I leave the page and come back to it (I leave the page to fill out other sections of the form that are then placed back on the main form) the state of the radio button selection isn't remembered even if the user already made a selection and filled out the fields. Have I done something wrong with my Jquery?
Code for Jquery radio button hide/show:
$(document).ready(function() {
$("[name=delvchoice]").change(function(){
$("#list").toggle($("[name=delvchoice]").index(this)===1);
});
});
HTML code of the page for the radio buttons:
<div>
<table>
<tr>
<td>Will the above items be delivered by your department to the Surplus Warehouse?</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="Yes"/>Yes</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="No"/>No</td>
</tr>
</table>
</div>
HTML code for the hide/show section:
<div id="list" style="display: none;">
<div>
<table>
<tr>
<td>Should you choose to have Physical Plant Support Services deliver the items for your department you must provide an
account number for the labor charge:</td>
</tr>
</table>
<table>
<tr>
<td>Account Number :</td>
<logic:notEmpty name="SurplusSaveForm" property="acctno1" scope="session">
<td>
<table border="0">
<tr>
<td><bean:write name="SurplusSaveForm" property="acctno1" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno2" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno3" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno4" scope="session"/>
</td>
</tr>
</table>
</td>
</logic:notEmpty>
<logic:empty name="SurplusSaveForm" property="acctno1" scope="session">
<td><html:text size="2" property="acctno1" maxlength="2" onkeyup="nextbox(this,'acctno2');"/>-
<html:text size="2" property="acctno2" maxlength="2" onkeyup="nextbox(this,'acctno3');"/>-
<html:text size="5" property="acctno3" maxlength="5" onkeyup="nextbox(this,'acctno4');"/>-
<html:text size="3" property="acctno4" maxlength="3" onkeyup="nextbox(this,'acctno4');"/>
</td>
</logic:empty>
<td><b><html:submit property="btn_findAccount">Search for and choose</html:submit><br>your Account</b></td>
</tr>
</table>
</div>
css-tricks has a nice screencast on forms storage if you want to check it out.
http://css-tricks.com/video-screencasts/96-localstorage-for-forms/