Develop Reference

Trying to pull table values from a selected check box correctly

I am trying to pull columns from a table if a checkbox was selected. Here is the table that contains the checkbox called 'selectedSched'
<tbody style="overflow-y: scroll; ">
<c:forEach var="row" items="${Updresults}">
<c:set var="sched" value="${row.getSCHEDULE_NUMBER()}" />
<c:set var="eftyear" value="${row.getEFT_CONTRACT_YEAR()}" />
<c:set var="EFTstatus" value="${row.getSTATUS()}" />
<c:set var="schedcombo" value="${sched}${eftyear}" />
<fmt:formatNumber var="schedTotl" value="${row.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
<tr>
<td align="center">
<input style="width:50px;" type="checkbox" name="selectedSched"
value="<c:out value="${schedcombo}"/>"/>
</td>
<td id="ModifyScheduleNumber"><c:out value="${row.getSCHEDULE_NUMBER()}" /></td>
<td id="ModifyYear"><c:out value="${row.getEFT_CONTRACT_YEAR()}" /></td>
<td id="ModifyCreationDate"><c:out value="${row.getCREATION_DATE()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${row.getNUM_OF_PAY_RECORDS()}"/></td>
<td style="text-align: right; padding-right: 5px;"><c:out value="${schedTotl}"/></td>
<td><select style="width:45px;" size="1" id="ModifyStatus" name="ModifyStatus_<c:out value="${schedcombo}"/>"
class="combosmall">
<c:forEach items="${ModifyList}" var="statusValue">
<option value="${statusValue}"
<c:if test="${EFTstatus} = statusValue"> selected="selected"</c:if>
>${statusValue}</option>
</c:forEach>
</select> </td>
<td>
<input style="width:85px" id="ModifyStatusDate" name="ModifyStatusDate_<c:out value="${schedcombo}"/>"
type="text" class="texttable" value="${row.getSTATUS_DATE()}"/>
</td>
<td><c:out value="${row.getAPPR_HUD_EMPLOYEE()}"/></td>
</tr>
</c:forEach>
</tbody>
I am creating a function that is trying to compare the Creation date field to an input Status Date field. Here is my function call:
$("#submitMEFTS").mouseup(function ()
{
for(var i=0; i<updateformID.selectedSched.length; i++)
{
if(updateformID.selectedSched[i].checked == true)
{
var holdCreationDate = $('#ModifyCreationDate[i]').val();
var holdSchedule = $('#ModifyScheduleNumber[i]').val();
alert("The checked button was clicked");
}
else
{
alert("The checked button was not clicked") ;
}
}
});
I have the selected check working but I am getting an error trying to use the 'ModifyCreationDate' field. Clearly just putting a '[i]' at the end is invalid. What is the proper way to pull the correct index of this field?
I know with a servlet call I had to do something similar to the ModifyStatus field to create different "names" for each row but wondering if there is a better/cleaner option.
Thanks again

Why onclick is not working without return false

Why onclick method is not working without return false. When i try to use it without return false it's show answer and then values disappear..
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
</td>
</table>
</form>
Javascript:
function addNumbers() {
var firstNumber = document.getElementById('first').value;
var secondNumber = document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
}
JSFIDDLE

Why onclick method is not working without return false?
The default action of button inside the form is to submit the form when you click on the button. To prevent this from happening you need to use e.preventDefault() or return false on the button click.
Why the values disappear?
When the form is submitted the page is redirected to the URL where form is submitted. As the action attribute is not provided, the form is submitted to the same page. And as the default values are not set the values are cleared when the page is reloaded.
How to solve the problem
You can stop this from happening by using return false; in the click event handler function as the last statement and adding return before the onclick attribute before the function in the HTML.
One more thing you forgot to do is to cast the string to Number when the values are read from the DOM element. Otherwise + will be used as string concatenation operator and the result will be a joined string.
You can cast the string to number by putting +(unary + operator) before the string.
Updated fiddle: http://jsfiddle.net/tusharj/ufe7aqhw/
function addNumbers() {
var firstNumber = +document.getElementById('first').value;
var secondNumber = +document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
return false;
}
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="return addNumbers();">Add</button>
</td>
</table>
</form>
Sidenote:
I will suggest/recommend to
not to use table for formatting the UI, you can use div with simple styles
move the styles to separate stylesheet and not to use inline styles
use addEventListener to bind event

Because return false is used to stop the default action of onclick, which is submitting the form. And you obviously have not defined the post handler for your form. So if you submit your form, you will get an error.

Set the value in html text box and dropdown with Angular JS

In html we use to write like this <input type="text" value="8">. I am facing two problems while I am doing it using angular js tags.
I want to set some value which I am taking from database like value=8.
And I am using one drop down in this form. I want to auto select some value which is set in database.
<form id="attendanceSheet" name="attendanceSheet" ng-submit="fillUpTimeSheet(attendanceSheet.$valid)" >
<table ng-table="tableParams" class="table">
<tr ng-repeat="resource in resources">
<td data-title="'Working Hours'" style="text-align:center" ng-if="resource.isBillable == 1">{{resource.billable_hours}}h <input type="number" style="width: 55px;" min="0" max="8" ng-init="timeSheet[$index] = {}" ng-model="timeSheet[$index].billableHour" required></td>
<td data-title="'Non Billable Resource'" style="text-align:center" ng-if="resource.isBillable == 1"><select data-ng-options="o.resource_name for o in nonBillableResources" style="width: 150px;" ng-model="timeSheet[$index].nonBillableResource"></select></td>
</tr>
</table>
</form>
To set the value I tried like this .. value="resource.id" OR ng-init="timeSheet[$index] = {resource.id}"
Please I need help.

how to get a value in a list on a checkboxlist control and use it to validate

I have a form in asp.net 3.5 , which has a master page and a child page (content page). The form has several questions, I am using the asp.net checkboxlist for a questions, since multiple options can be selected, if the user selects 'Other' on one of the selections, then they have to enter data into a textbox field.
I made the following client side javascript to validate this but, the code doesnt seem to check wheter the Other option value is selected, I believe it has to do with the way the html is rendered on the page,,,
Can you please suggest how to do this?
Thanks in advance.
Rendered Javascript
//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>
function checkOther2(oSrc, args) {
{
var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
// You can only get the Text property, which
will be in an HTML label element.
var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ',';
checkedValues += labelArray[0].innerHTML.text;
if (checkedValues == 'Other') {
args.IsValid = !(args.Value == "")
// test
alert("Hello");
}
}
else {
args.IsValid = true;
}
}
}
}
}
// HTML Rendered
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
</strong><br /> </td>
</tr>
<tr>
<td>
<table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
<tr>
<td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
ControlToValidate="CheckBoxList1" Display="None"
ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
</strong><br /> </td>
</tr>
<tr>
<td>
----------- Actual Markup on asp.net form
<asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
<asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
<asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
<asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
<asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
<asp:CustomValidator
ID="CustomValidator3" runat="server"
ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
ValidateEmptyText="True"></asp:CustomValidator>
</td>
</tr>

Your JS looks rather complicated. Try a more simple approach...
function isValid(f)
{
var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
if(cb && cb.checked)
{
var tb = document.ElementById('<%=txt2other.ClientID%>');
if(tb && tb.value.length > 0)
{
f.submit();
}
else
{
alert('Please enter a comment in question #2.');
}
}
}
If you have a lot of these, try setting a property on the checkbox like value=other so when you loop through your checkboxes, you can use if(cb.checked && cb.value == 'other')

jQuery not detach()'ing if it contains an input tag

I have a table which i need to move elements up and down in. I have the code working, but as soon as I add a tag to it, it throws the error:
Error: this.visualElement is undefined
Source File: http://192.9.199.11:83/templates/admin/js/jquery/ui.checkbox.js
Line: 94
The HTML looks like this:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>Menu</th>
<td>Builds the main navigation menu panel</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="1" />
</td>
</tr>
<tr>
<th>Proudly Support</th>
<td>A widget which displays company's we proudly support</td>
<td width="80px">
<input type="hidden" class="hiddenData" name="" value="2" />
</td>
</tr>
</table>
And the jQuery is as follows:
$(".arrowButtons").live('click', function(e) {
e.preventDefault();
});
$(".upArrow").live('click', function(e) {
var element = $(this).parent().parent();
if(element.prev().html() != null)
{
var elementContents = element.html();
$("<tr>"+elementContents+"</tr>").insertBefore(element.prev());
element.remove();
}
});
Any idea on why that could be happening?

I just commented out the lines that were causing the problem in ui.checkbox.js and it is working. Will do proper testing, but so far everything seems to be working.