I have a form with a dynamic table. when its submitted for some calculation i need the checkboxes that were origninally checked to be checked again. I do bring back a list of sq_claim_ids thats comma delimmeted #form.number#, I cant figure out the syntax to get coldfusion to loop through the list and check mark each row whos value is in the list. I know I should probably use a cfif tag but i dont know whats the right syntax for the rest of what I need
<CFOUTPUT query = "qGetOpenItemsTrans">
<TR>
<TD ALIGN = "CENTER">
<input type="checkbox" name = "chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther(this)" unchecked = 0 >
</TD>
<TD ALIGN = "CENTER">#Inventory_Date#</TD>
<TD ALIGN = "CENTER">#seq_claim_id#</TD>
<TD ALIGN = "CENTER">#Month_Closed#</TD>
<TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD>
<TD ALIGN = "CENTER">#Commission_Amt#</TD>
<TD ALIGN = "CENTER">#Net_Recovery#</TD>
</TR>
</CFOUTPUT>
<cfif (form.number) NEQ "">
<cfloop index="i" list="#form.number#" delimiters=",">
</cfif>
Try this concept.
<cfset lang_list = "C,C++,Java">
<cfoutput >
<form method="post">
Favorite Programing Language:
<cfloop list="#lang_list#" index="i" >
<cfif structKeyExists(FORM,"fav") and listFind(FORM.fav,i)>
<cfset isChecked = "checked">
<cfelse>
<cfset isChecked = "">
</cfif>
<input type="checkbox" name="fav" value="#i#" #isChecked#>#i#
</cfloop>
<input type="submit" value="Submit">
</form>
</cfoutput>
this worked for me. since the table already loops i used a cfif tag around it
<cfset ischecked = "">
<cfif (form.number) NEQ "">
<CFOUTPUT query = "qGetOpenItemsTrans">
<cfif #ListFind(#form.number#, #qGetOpenItemsTrans.seq_claim_id#)# NEQ 0>
<cfset isChecked = "checked">
</cfif>
<TR>
<TD ALIGN = "CENTER">
<input type="checkbox" name = "chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther(this)" unchecked = 0 #ischecked# >
</TD>
<TD ALIGN = "CENTER">#Inventory_Date#</TD>
<TD ALIGN = "CENTER">#seq_claim_id#</TD>
<TD ALIGN = "CENTER">#Month_Closed#</TD>
<TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD>
<TD ALIGN = "CENTER">#Commission_Amt#</TD>
<TD ALIGN = "CENTER">#Net_Recovery#</TD>
</TR>
<cfset ischecked = "">
</CFOUTPUT>
<cfelse>
<CFOUTPUT query = "qGetOpenItemsTrans">
<TR>
<TD ALIGN = "CENTER">
<input type="checkbox" name = "chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther(this)" unchecked = 0 >
</TD>
<TD ALIGN = "CENTER">#Inventory_Date#</TD>
<TD ALIGN = "CENTER">#seq_claim_id#</TD>
<TD ALIGN = "CENTER">#Month_Closed#</TD>
<TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD>
<TD ALIGN = "CENTER">#Commission_Amt#</TD>
<TD ALIGN = "CENTER">#Net_Recovery#</TD>
</TR>
</CFOUTPUT>
</cfif>
To expand on Deepak's answer.
First, as Leigh said, use ListFind() over ListContains(). This is important and not just semantics. #ListContains("42,17,32",4)# will match and cause the checkbox to be checked. #ListFind("42,17,32",4)# will (correctly) not match because no single element equals 4. The potential here could be catastrophic left unchanged. Records could be irrevocably altered or dropped if a user doesn't realize that box was checked mistakenly.
Second, Deepak's answer is otherwise great, but this is a great opportunity to use an inline if statement.
With Cold Fusion 9, or Railo 3.1+, you can use an inline-if statement like this
<input type="checkbox" name="fav" value="#i#"
#(structKeyExists(FORM,"fav") and listfind(FORM.fav,i) ? "checked" : "")#>
Inline Ifs in the above format are #(condition ? expression-if-true : expression-if-false)#
For older versions of either, you can use the Iif function, though there's a little bit of a stigma attached to IIf.
<input type="checkbox" name="fav" value="3"
#IIf(structKeyExists(FORM,"fav") and listfind(FORM.fav,i),DE("checked"),"")#>
Iif syntax is #iif(condition, expression-if-true, expression-if-false)#. However, pass a string, such as "checked"` as above, you have to wrap it in DE(), otherwise Cold Fusion (and Railo) will look for a variable named checked.
If you can use CF9's inline ifs over IIf, defnitely do so, unless backwards compatibility is a concern.
Both methods above serve the same purpose as Deepak's answer, with Leigh's ListFind() correction, and all would be identical to
<input type="checkbox" name="fav" value="3"
<cfif (structKeyExists(FORM,"fav") and listfind(FORM.fav,i))>checked</cfif>>
Aside from adding some visual bloath, this code works fine, but many html editors auto-formatting features do funky things with that, like
<input type="checkbox" name="fav" value="3"
<cfif (structKeyExists(FORM,"fav") and listfind(FORM.fav,i))>
checked
</cfif>
>
Or just break the code completely.
Related
I have a question about processing data for lines where checkbox is checked.
When I hit "Submit", I need to end up with as many lines in a table as checked on the form.
Here is code that populates the form data. Checkbox''s value is unique.
<CFLOOP query = "ship_details">
<tr bgcolor="#IIf(CurrentRow Mod 2, DE('ffffff'), DE('f8f8f8'))#">
<TD class="TDC" align="right"><INPUT TYPE="CHECKBOX" name="MYCHECKBOX" value="#ship_details.cust_po_nbr#" ID="chkPo" checked></TD>
<TD class="TDC">#ship_details.cust_po_nbr#</TD>
<TD class="TDC">#ship_details.store_id#</TD>
<TD class="TDC">#ship_details.numb_of_cart#</TD>
<TD class="TDC">#ship_details.total_qty#</TD>
<TD class="TDC">#ship_details.weight#</TD>
<TD class="TDC">#ship_details.volume#</TD>
<cfif form.soldto EQ "AMAZON">
<TD class="TDC"><cfinput name="pallets" type="text" size="10"></TD>
</cfif>
</TR>
</CFLOOP>
When I hit "Submit", following query fails.
<cfquery name="abc" datasource="#REQUEST.T#">
insert into T
values (
#ship_details.cust_po_nbr#
,#pallets#
)
</cfquery>
It''s because values entered into fields coming over as list:
<cfloop list="#MYCHECKBOX#" index="i">
<cfoutput>#i# - #pallets#<br /></cfoutput>
</cfloop>
<cfabort>
I see this:
152N0000 - 1,2,5
152N5IKV - 1,2,5
6N8SCRIY - 1,2,5
A simple approach is appending or prepending an identifier or index to all of your input names. This way you can connect fields with each other in the controller.
Simplified example (ugly iteration)
<cfloop query="ship_details">
<input type="checkbox" name="MYCHECKBOX_#ship_details.currentRow#" value="#ship_details.cust_po_nbr#">
<input type="text" name="pallets_#ship_details.currentRow#">
</cfloop>
yields a form submit like
{
"MYCHECKBOX_1": "12345",
"MYCHECKBOX_3": "12347",
"pallets_1": "5",
"pallets_2": "",
"pallets_3": "7"
}
(row 1 and 3 have been checked - unchecked inputs are not part of a submit)
which you can connect doing
<cfset inputData = []>
<cfset MAX_ROWS = 99>
<cfloop from="1" to="#MAX_ROWS#" index="row">
<!--- has this row been checked? --->
<cfif not structKeyExists(FORM, "MYCHECKBOX_#row#")>
<cfcontinue>
</cfif>
<cfset inputData.add({
"cust_po_nbr": FORM["MYCHECKBOX_#row#"],
"pallets": FORM["pallets_#row#"]
})>
</cfloop>
<cfdump var="#inputData#">
and ending up with
[
{
"cust_po_nbr": "12345",
"pallets": "5"
},
{
"cust_po_nbr": "12347",
"pallets": "7"
}
]
Proper example
Since iterating over an artificial limit is pretty ugly, you can also just extract the checkboxes beforehand by matching against fieldnames
<cfset inputData = []>
<cfset checkedRows = reMatchNoCase("\bMYCHECKBOX_[0-9]+\b", FORM.FIELDNAMES)>
<cfloop array="#checkedRows#" index="cbKey">
<cfset row = listLast(cbKey, "_")>
<cfset inputData.add({
"cust_po_nbr": FORM[cbKey],
"pallets": FORM["pallets_#row#"]
})>
</cfloop>
<cfdump var="#inputData#">
I have to update the value of multiple Inputs using ng-repeat. i usually get the value with JQuery $(class/id).val() and get its value. but now i have no idea how to access the input values since i only have one id for each. (i have like 20 input in the table)
View:
<tr ng-repeat="i in list">
<td><input list="itemNames" class="item_name" ng-model="i.item_name" value="{{i.item_name}}" type="text"/></td>
<datalist id="itemNames">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
</tr>
I expect to store all values in an arrays, but what i got is only values of the first row.
JS:
$scope.updateAll=function(){
// getting vallues
var item_name=$(".item_name").val();
var quantity=$(".quantity").val();
var price=$(".price").val();
}
I think your list is a scope variable. So, in controller its defined as $scope.list. You need not to think about id as you are using angular code, angular framework will do it for you.
As you used the two way data binding with ng-model, so any change to the bind variable will be immediately visible to controller and html view.
The use of ng-model ensures the immediate update to the $scope.list variable.
For example, if you add any text for "item_name" in the control index 0 from html view, the variable $scope.list[0].item_name will be automatically updated, also the change in $scope.list[0].item_name = "Some name" in controller will be automatically reflected in the view.
So, your given code can be re-written as following:
<tr ng-repeat="i in list">
<td><input list="itemNames_{{$index}}" class="item_name" id="txt_name_{{$index}}" ng-model="selectedValue" ng-change = "getSelectedId(selectedValue, $index)" type="text"/></td>
<datalist id="itemNames_{{$index}}">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
The javascript method can be written as:
var getSelectedId = function(selectedValue, index) {
var val = document.getElementById('txt_name_' + index).value;
var text = $('#itemNames_' + index).find('option[value="' + val + '"]').attr('data-item');
alert(text);
}
I am writing a CF mobile app and am using the cfclient tag. I am encountering issues with remote datasource connections and can’t get it resolved.
From cfclient, I am using “rooms” as my datasource string which is defined in the CF Administrator as a data source. It is connecting to a remote SQL Server. “Tblblogs” exists in the "rooms" database, but under cfclient I get an error that: > No such table exists
However, if I take same query [blgQ] that selects “tblblogs” outside cfclient, it works fine and without issue. I am not sure why it is not making right datasource connection under cfclient (as defined in the administrator) .
<!DOCTYPE html>
<html >
<body>
<h2>Add Expense</h2>
<form >
<table >
<tr>
<td>Date:</td> <td><input type="date" id="dateTxt"></td>
</tr>
<tr>
<td>Amount:</td> <td><input type="number" id="amtTxt"></td>
</tr>
<tr>
<td>Description</td>
<td><input type="text" id="descTxt"></td>
</tr>
<tr>
<td colspan="2">
<button type="button" id="addBtn">Add</button>
</td>
</tr>
</table>
</form>
<h2>Expenses:</h2>
<table id="expList">
<tr>
<th>Date</th>
<th>Amount</th>
<th>Description</th>
</tr>
</table>
</body>
</html>
<script >
document.getElementById("addBtn").onclick = function(){
addExpense();
}
</script>
<!--- cfclient code starts here --->
<cfclient>
<cfset document.getElementById("expList").innerHTML =''>
<!--- on client side you do not need to pre-configure datasource --->
<cfset dsn = "rooms">
<cftry>
<!--- create database if not already created --->
<cfquery datasource="rooms">
create table if not exists expenses (
id integer primary key,
expense_date integer,
amount real,
desc text
)
</cfquery>
<!--- Get expense records from the table --->
<cfquery datasource="rooms" name="expenses">
select * from expense order by expense_date desc
</cfquery>
<cfset alert(expenses.amount)>
<!--- Loop over expenses query object and display --->
<cfloop query="expenses">
<cfset var tmpDate = new Date(expense_date)>
<cfset addExpenseRow(expense_date,amount,desc)>
</cfloop>
<cfcatch type="any" name="e">
<cfset alert(e.message)>
</cfcatch>
</cftry>
<!--- Helper function to add epxpense row to HTML table --->
<cffunction name="addExpenseRow" >
<cfargument name="expense_date" >
<cfargument name="amt" >
<cfargument name="desc" >
<cfoutput >
<cfsavecontent variable="rowHtml" >
<tr>
<td>#dateFormat(expense_date,"mm/dd/yyyy")#</td>
<td>#amt#</td>
<td>#desc#</td>
</tr>
</cfsavecontent>
</cfoutput>
<cfset document.getElementById("expList").innerHTML += rowHtml>
</cffunction>
<!--- Called from JS script block in response to click event for addBtn --->
<cffunction name="addExpense" >
<cfset var tmpDate = new Date(document.getElementById("dateTxt").value)>
<cfset var amt = Number(document.getElementById("amtTxt").value)>
<cfset var desc = document.getElementById("descTxt").value>
<!--- TODO: Do data validation --->
<cftry>
<!--- Insert expense row into database table --->
<cfquery datasource="rooms" result="result">
insert into expense (expense_date,amount,desc) values(
<cfqueryparam cfsqltype="cf_sql_date" value="#tmpDate.getTime()#">,
<cfqueryparam cfsqltype="cf_sql_numeric" value="#amt#">,
<cfqueryparam cfsqltype="cf_sql_varchar" value="#desc#">
)
</cfquery>
<cfcatch type="any" name="e">
<cfset alert(e.message)>
</cfcatch>
</cftry>
<!--- add the new expense row to HTML table --->
<cfset addExpenseRow(tmpDate,amt,desc)>
</cffunction>
</cfclient>
<cfquery datasource="rooms" name="blgQ">
select * from tblblogs
</cfquery>
<cfdump var="#blgQ#"
> Blockquote
<cfquery> on <cfclient> is not really the same thing as the regular <cfclient>.
It is intended to do light weight interactions with Web SQL. Web SQL is not universally supported, and it is not likely to. <cfclient> will also suffer from all the issues that plagued <cfform>. Namely javascript will move forward, but the code generated by this tag may not.
See Client side CFML For Mobile Development.
I suspect you are trying to do something that might be more appropriate with AJAX or REST
I'm using AngularUI's ui-mask directive to mask phone numbers. We'd like to save both the masked and unmasked value to the database.
I see the docs have the option to use the model-view-value="true" to store the $viewValue as the model giving us the masked value.
However since we'd like both I'd prefer a way to leave this false and access the $viewValue on my own. I see in the demo however this is for a single input. It looks like it is bound to the name of the inputs.
My issue is this is a ng-repeat and so the names vary. I got it working for a single item (you can see in the first table it works).
The last <td> is where I'm trying to show the $viewValue. I'm also trying to pass it in to the setPhoneValue function but it is undefined there also.
Edit: Created a fiddle: https://jsfiddle.net/n35u7ncz/
<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl">
<table cellpadding="2">
<tr>
<td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="button" ng-click="addNumber()" value="Add" /></td>
<td>{{phone_form.new_phone.$viewValue}}</td>
<td>{{addNumber.phoneNumber}}</td>
</tr>
</table>
<table cellpadding="2">
<thead>
<tr>
<th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="number in numbers">
<td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td>
<td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td>
<td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td>
<td>View: {{phone_form.phone_number_input.$viewValue}}</td>
</tr>
</tbody>
</table>
</form>
We got this working. The trick was to use the $index to generate a unique Id for the element and then pass that to the controller.
I've updated the fiddle here: https://jsfiddle.net/n35u7ncz/3/
The general idea is that the input field needs to be tagged and have an ng-change:
<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" />
And then:
$scope.setValue = function(item, index)
{
item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue;
}
im trying to save the data from a table when a checkbox or selectbox is selected.
Table when loaded
code Product Checkbox SelectBox
0 45 checkbox selectoption
11 78 check box selectoption
html code:
<tr id="TableBody" ng-repeat="code in Codes.CodesDetails">
<td><input type="checkbox" ng-model="code.Presentstatus" id="Checkbox" name="Checkbox" /></td>
<td><select id="reasons" name="reasons" ng-model="code.Category" ng-disabled="code.Presentstatus" ng-clicked="code.Presentstatus && O" ></td>
</tr> <input type="button" value="save" ng-click="module.RegisterDetails"/>
the checkbox is checked it must show me a value of one and ignore the selectbox and vice versa.
but this is the output I get
Code= 0,Product=45,CheckBox="",selectbox=""
sorry about the table structure
on the ng-click you just add the following`
<td><input type="checkbox" ng-model="code.Presentstatus" id="PresentCheckbox" name="PresentCheckbox" ng-click="code.Category=0"/></td>
<td><select id="reasons" name="reasons" ng-model="code.Category" ng-disabled="code.Presentstatus" ng-click="code.PresentStatus=false" ></td>
`