How to get textbox values inside the table - c#

I have a table (with two textboxes Item and Count) in my webpage.
I try to access the values of two textboxes in each rows.
Please see my code below
<table id="tbl-contents" class="table">
<thead>
<tr>
<th>Item</th>
<th>Count</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="clsRow">
<td>
#*
<input type="text" class="form-control" placeholder="Item" data-required="true">*#
<input id="txtItem" class="form-control" placeholder="Item" type="text" value="" tabindex="-1" name="" data-required="true">
</td>
<td>
#*
<input type="text" class="form-control" placeholder="Item Count" data-required="true">*#
<input id="txtItemCount" class="form-control" placeholder="Item Count" type="text" value="" tabindex="-1" name="" data-required="true">
</td>
</tr>
<tr class="clsRow">
<td>
<input type="text" class="form-control" placeholder="Item">
</td>
<td>
<input type="text" class="form-control" placeholder="Item Count">
</td>
<td>
<a class="clsDelContent"><i class="fa fa-minus-square" style="font-size: 22px;"></i></a>
</td>
</tr>
<tr class="clsRow">
<td>
<input type="text" class="form-control" placeholder="Item">
</td>
<td>
<input type="text" class="form-control" placeholder="Item Count">
</td>
<td>
<a class="clsDelContent"><i class="fa fa-minus-square" style="font-size: 22px;"></i></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: right;">
<a class="clsAddContent"><i class="fa fa-plus-square" style="font-size: 22px;"></i></a>
</td>
</tr>
</tfoot>
</table>
Script
$('#tbl-contents tbody tr').each(function () {
var customerId = $(this).find("td").html();
alert(customerId);
});

$('.clsRow').each(function() {
var foo = $(this).find('input');
var item = foo[0].value;
var itemcount = foo[1].value;
})
JSFiddle

You could try:
$('table tbody tr td input').each(function(){
console.log($(this).val())
});
LIVE DEMO

You can use the following script.
var reqValues = [];
$('.clsRow').each(function(i){
var $currentTD = $(this).find('td')
reqValues["item"+i] = $currentTD.eq(0).find('input').val();
reqValues["values"+i] = $currentTD.eq(1).find('input').val();
});
To get a particular value use the following code -
reqValues["item1"]
reqValues["values1"]
reqValues["item2"]
reqValues["values2"]

Related

Passing HTML table to controller

using MVC;
passing a table of elements as a list from controller to razor view
<tr>
<td> Select Account </td>
<td> Select LOB</td>
<td onclick="RemoveRow(this)"> <i class="fa fa-times text-danger"></i></td>
<td><input name="TLAccountIds.Index" value="0" autocomplete="off" type="hidden"></td>
<td><input name="TLSPVAssignedAccounts[0].AccountId" value="0" type="text"> </td>
<td><input name="TLSPVAssignedAccounts[0].LOBId" value="0" type="text"</td>
</tr>
then adding by JQuery more rows as below:
<tr>
<td id="1">TE</td><td id="3">TE-Inbound</td>
<td onclick="RemoveRow(this)"> <i class="fa fa-times text-danger"></i> </td>
<td <input name="TLSPVAssignedAccounts.Index" value="1" type="hidden"></td>
<td> <input id="TLSPVAssignedAccounts[1].AccountId" name="TLSPVAssignedAccounts[1].AccountId" value="1" type="text"> </td>
<td> <input id="TLSPVAssignedAccounts[1].LOBId" name="TLSPVAssignedAccounts[1].LOBId" value="3" type="text"> </td>
</tr>
when submitting to form the JQuery made only is sent to controller
Can someone please tell me why and what can i do to send all tbl to controller
Noting that when only exists html row without jquery appened rows, the html row is seen by controller inside the list

Tab Indexing not working in Grid

![enter image description here][1]In my application, I have used the MVC telerik grid, bounded with input textboxes. While I run the application in Internet Explorer and the Chrome browser, the tab indexing in working fine and control is moving from one textbox to the other. But when using the Firefox browser, the tab indexing is moving from table row to table row and highlighting the complete cell.
Please help me to fix this.
<div class="appln-cnt-c2">
<div class="frm-fldrow">
<div class="appln-txtrow" style="width: 800px; position: relative; left: 45px;">
#{
Html.Telerik().Grid(Model.FacultyCompositions)
.Name("FacultyComositionGrid")
.DataKeys(keys => keys.Add(m => m.FacultyCompositionPK))
.ClientEvents(events => events.OnComplete("FacultyComositionGrid_onComplete").OnError("FacultyComositionGrid_onError").OnDelete("OnDelete").OnEdit("OnEdit"))
.Columns(columns =>
{
columns.Bound(m => m.EthnicityDescription)
.Title("<strong>Ethnicity</strong>").Width(180).Filterable(false).Sortable(false).ReadOnly(true);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear1Male" #(Model.ReadOnlyFacultyCompositionNew[0])#(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear1Female" #(Model.ReadOnlyFacultyCompositionNew[0]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" />
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[0] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[0]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear2Male" #(Model.ReadOnlyFacultyCompositionNew[1]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<div style="position: relative;">
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear2Female" #(Model.ReadOnlyFacultyCompositionNew[1]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" />
</div>
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[1] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[1]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear3Male" #(Model.ReadOnlyFacultyCompositionNew[2]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear3Female" #(Model.ReadOnlyFacultyCompositionNew[2]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[2] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[2]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear4Male" #(Model.ReadOnlyFacultyCompositionNew[3]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" /></td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear4Female" #(Model.ReadOnlyFacultyCompositionNew[3]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[3] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[3]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(60);
})
.DataBinding(dataBinding => dataBinding.Ajax())
.ABAGridConfiguration(true)
.KeyboardNavigation(kbd => kbd.EditOnTab(false))
.Render();
}
</div>
</div>
</div>
Finally found the solution :)
Steps Invloved :
1. To find the associated key value with TAB key
2. Once Keydown event fires focus moves to next control
$('input.FacultyCompositionTextbox').keydown(function(event) {
if(event.which == 9) {
//alert('a');
$(this).next('input.FacultyCompositionTextbox').focus();
}
});
Regards,
Praveen Nelge

Parsing HTML with XPath following Categories

I have the following HTML structure, each tr tag is separated with each other, so when i tried to parse with XPATH, it is supposed to have 2 subitems for just one category, but with my code below it selects all 4 subitems into 1 category, so each category has 4 subitems instead of just 2.
<table class="available">
<tbody>
<tr>
<td class="catname" colspan="2">
<span>Category 1</span>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem1-1
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">39.99 €</strong>
</div>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem1-2
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">49.99 €</strong>
</div>
</td>
</tr>
<tr>
<td class="catname" colspan="2">
<span>Category 2</span>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem2-1
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">59.99 €</strong>
</div>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem2-2
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="tooltip3">
<strong class="price">69.99 €</strong>
</div>
</td>
</tr>
</tbody>
</table>
var doc = new HtmlDocument(); // with HTML Agility pack
doc.LoadHtml(uricontent);
var rooms = doc.DocumentNode
.SelectNodes("//table[#class='available']//td[#class='catname']")
.Select(r => new
{
Type= r.InnerText.CleanInnerText(),
SubTypes= r.SelectNodes("../..//tr//td[#class='itemdetail']//div[#class='subname']")
.Select(s => new
{
SubType= s.InnerText.CleanInnerText(),
Price =
s.SelectSingleNode(".//parent::td/following-sibling::td[#class='allprice']//div[#class='preprice']//strong[#class='price']")
.InnerText.CleanInnerText()
}).ToArray()
}).ToArray();
If I understand your question correctly, to select all the Categories you want //tr[td[#class='catname']], and to select their sub-items you want following-sibling::tr/td[div[#class='subname']].

Assigning "HTML Select Control" Values in PageLoad() Event

I want to Use only the HTML Controls on my page. For that i want to use some text boxes and a HTML select(List box) and a Submit button for Post Event.
The Code is as follows:
<script type="text/javascript">
function dropdown(mySel) {
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if (myVal) {
if (mySel.form.target) myWin = parent[mySel.form.target];
else myWin = window;
if (!myWin) return true;
myWin.location = myVal;
}
return false;
}
</script>
This Java Script i am using for the HTML Select List.
The Rest of the Code are As follows:
<form action="feedback.aspx" method="post" onsubmit="return dropdown(this.feeds)">
<h1>
Let us know your inconvenience for the following Listing:
</h1>
<table>
<tr>
<td>
<b>Type : </b>
</td>
<td>
<asp:Label ID="lbltype" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<b>ID : </b>
</td>
<td>
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<b>Title: </b>
</td>
<td>
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</td>
</tr>
</table>
<table>
<tr>
<td>
User ID:
</td>
<td>
<input type="text" name="txtUserid" />
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" name="txtName" />
</td>
</tr>
<tr>
<td>
Contact:
</td>
<td>
<input type="text" name="txtContact" />
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="txtemail" />
</td>
</tr>
</table>
<br />
<table cellpadding="5" cellspacing="5" width="500px">
<tr>
<td style="width: 400px">
<b>Please Select the given option </b>
</td>
</tr>
<tr>
<td style="width: 400px">
<select name="feeds">
<option value="">Choose an Option...</option>
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
</select>
</td>
</tr>
<tr>
<td style="width: 400px">
<b>Write your Comment Here: </b>
<br />
<textarea id="TextArea" name="txtcomment" cols="45" rows="5"></textarea>
</td>
<td>
</td>
</tr>
<Efextra:Captcha ID="Captcha1" runat="server" TabIndex="29" ValidationErrorMessage="Verification Code"
ValidationGroup="Feeds" ValidationText="*"></Efextra:Captcha>
<tr>
<td>
<input type="submit" value="Submit FeedBack" validationgroup="Feeds" />
</td>
</tr>
</table>
</form>
I have a XML document having the following Format:
<?xml version="1.0" encoding="utf-8" ?>
<Feedback>
<Options>
<ID>0</ID>
<option>[Select your option]</option>
</Options>
<Options>
<ID>1</ID>
<option>I got Incomplete/wrong information posted here.</option>
</Options>
<Options>
<ID>2</ID>
<option>The Content is not in Proper Format.</option>
</Options>
<Options>
<ID>3</ID>
<option>How can get the similar type of properties?</option>
</Options>
<Options>
<ID>4</ID>
<option>This Listing is Sold and Still Displaying here.</option>
</Options>
<Options>
<ID>5</ID>
<option>I can not send SMS for this Listing.</option>
</Options>
<Options>
<ID>6</ID>
<option>I can not get the Contact Information of the owner of this post.</option>
</Options>
<Options>
<ID>7</ID>
<option>My problem is not given here!</option>
</Options>
</Feedback>
Now what i ahve to do is:
When Page load it checks whether the user is registered or not, if he/She is a registered user, the first four field [User ID, Name, Contact, Email] can be be loaded itself.
for this my code behind file assigns value like this:
User FeedUser = Propertywala.User.GetAuthUser();
Txt1.Text=Feeduser.UserID; and so on..
If he/she is not a registered user then User will get this field blank and i will get fetch all the filled values through Page.Request().
Second Issue is that i want to load the Option of select box from XML file which is above.
I am a newbie to this code and flow. so please anybody can help me doing this.
Thanks in Advance.
You'll need to assign the runat="server" attribute to the input type="text" controls as well. Then you can access them in codebehind just like a webcontrol. The same goes for your select html control.
For the Xml document you're going to need an XmlReader object. For the implementation of that, please look up MSDN
Finally i did it without using a single asp control. I solved the problem like this:
<form name="feedback" action="FeedBack.aspx">
<h1>
Let us know your inconvenience for the following Listing:
</h1>
<table>
<%if (IsUserLoggedIn) %>
<%{ %>
<tr>
<td>
<b>User ID:</b>
</td>
<td>
<input type="text" value="<%=VisitingUser.UserIdn%>" size="30" readonly="readonly" />
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<input type="text" value="<%=VisitingUser.FullName%>" size="30" readonly="readonly" />
</td>
</tr>
<tr>
<td>
<b>Contact:</b>
</td>
<td>
<input type="text" value="<%=VisitingUser.MobileNumber %>" size="30" readonly="readonly" />
</td>
</tr>
<tr>
<td>
<b>Email:</b>
</td>
<td>
<input type="text" value="<%=VisitingUser.PrimaryEmail%>" size="30" readonly="readonly" />
</td>
</tr>
<%} %>
<%else%>
<%{ %><tr>
<td>
<h3>
Enter the Folowing details to submit the Feedback:
</h3>
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" name="txtName" />
</td>
</tr>
<tr>
<td>
Contact:
</td>
<td>
<input type="text" name="txtContact" />
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="txtEmail" />
</td>
</tr>
<%} %>
</table>
<br />
<%if (int.TryParse(Request.QueryString["property"], out Property)) %>
<%{ %>
<%Propertywala.Property prp = new Propertywala.Property(Property);%>
<%if (prp.OwnerId > 0) %>
<%{ %>
<table>
<tr>
<td>
<b>Property ID :</b>
</td>
<td>
<%=Property.ToString() %>
</td>
</tr>
<tr>
<td>
<b>Property Title :</b>
</td>
<td>
<%=prp.AutoGeneratedTitle %>
</td>
</tr>
</table>
<%} %>
<%} %>
<%else if (int.TryParse(Request.QueryString["project"], out Project)) %>
<%{ %>
<%Propertywala.Project prj = new Propertywala.Project(Project);%>
<%if (prj.UserId > 0) %>
<%{ %><table>
<tr>
<td>
<b>Project ID : </b>
</td>
<td>
<%=Project.ToString() %>
</td>
</tr>
<tr>
<td>
<b>Project Title : </b>
</td>
<td>
<%=prj.Title %>
</td>
</tr>
</table>
<%} %>
<%} %>
<table cellpadding="5" cellspacing="5" width="500px">
<tr>
<td style="width: 400px">
<b>Please Select the given option </b>
</td>
</tr>
<tr>
<td style="width: 400px">
<select name="feeds">
<%foreach (System.Xml.XmlNode xNode in FeedXmlList)%>
<%{ %>
<option value="<%=xNode.ChildNodes[1].InnerText%>">
<%=xNode.ChildNodes[1].InnerText%></option>
<%} %>
</select>
</td>
</tr>
<tr>
<td style="width: 400px">
<b>Write your Comment Here: </b>
<br />
<textarea name="txtcomment" cols="45" rows="5"></textarea>
</td>
<td>
</td>
</tr>
<Efextra:Captcha ID="Captcha1" runat="server" TabIndex="29" ValidationErrorMessage="Verification Code"
ValidationGroup="Feeds" ValidationText="*"></Efextra:Captcha>
<tr>
<td>
<input type="submit" value="Submit FeedBack" />
</td>
</tr>
</table>
</form>
And finally in Code behind file i just put some required condition and fetch all the html values through request.form, like this:
if (Request.HttpMethod.ToLower() == "post" && Request.Form.Count > 0)
{
if (!string.IsNullOrEmpty(Request.Form["feeds"]) || !string.IsNullOrEmpty(Request.Form["txtcomment"]))
{
if (!string.IsNullOrEmpty(Request["property"]) || !string.IsNullOrEmpty(Request["project"]))
{
if (IsUserLoggedIn||(!IsUserLoggedIn && !string.IsNullOrEmpty(Request["txtName"]) && !string.IsNullOrEmpty(Request["txtContact"]) && !string.IsNullOrEmpty(Request["txtEmail"])))
{
if (Request.Form["feeds"] != "[Select your option]")
{
Mail(Request.Form["feeds"], Request.Form["txtcomment"]);
}
else
{
Common.ClientMessage("Select the Option and Retry to Submit the feeds.", CommonConsts.AlertType.info);
}
}
else
{
Common.ClientMessage("Unregistered user must fill their name and Contact Details!", CommonConsts.AlertType.info);
}
}
}
}

How to receive value of radiobutton groups on c#

I have code in html:
<form runat="server">
<table>
<tr>
<td>
From Date:
</td>
<td>
<input type="text" runat="server" id="txtDate" placeholder="YYYY-MM-DD"/>
</td>
</tr>
<tr>
<td>
Show Data:
</td>
<td>
<input type="radio" id="rbShowDataYes" name="chShowData" value="1" checked="checked"> Yes
<input type="radio" id="rbShowDataNo" name="chShowData" value="0"> No
</td>
</tr>
...
</form>
In c#, when I try to reach txtDate.Value, it is working, but rbShowDataYes.Checked not working saying that rbShowDataYes is not in the current context. Where is my mistake?
string value=chShowData.SelectedItem.Value.ToString();
bool isChecked = radioButton1.Checked;
if(isChecked )
value=radioButton1.Text;
else
value=radioButton2.Text;

Categories