I want to add text box in table > td where checkbox is checked, but not working. How can I do this? I'm new to jQuery.
This is my code html:
<table id="list_lab" class="checkbox-inline">
<tr>
<td><input id="list_lab_0" type="checkbox" name="list_lab$0" checked="checked" value="Electrolyte (Lab)"><label for="list_lab_0">Electrolyte (Lab)</label></td>
</tr><tr>
<td><input id="list_lab_1" type="checkbox" name="list_lab$1" checked="checked" value="Creatinine (plus eGFR)"><label for="list_lab_1">Creatinine (plus eGFR)</label></td>
</tr><tr>
<td><input id="list_lab_2" type="checkbox" name="list_lab$2" value="Blood Urea Nitrogen"><label for="list_lab_2">Blood Urea Nitrogen</label></td>
</tr><tr>
<td><input id="list_lab_3" type="checkbox" name="list_lab$3" value="Complete Blood Count"><label for="list_lab_3">Complete Blood Count</label></td>
</tr><tr>
<td><input id="list_lab_4" type="checkbox" name="list_lab$4" value="Dengue NS1 Ag"><label for="list_lab_4">Dengue NS1 Ag</label></td>
</tr><tr>
<td><input id="list_lab_5" type="checkbox" name="list_lab$5" value="Influenza A/B A/(H1N1) Screening"><label for="list_lab_5">Influenza A/B A/(H1N1) Screening</label></td>
</tr><tr>
<td><input id="list_lab_6" type="checkbox" name="list_lab$6" value="Urine Exam"><label for="list_lab_6">Urine Exam</label></td>
</tr>
And this is my script:
$(document).ready(function(){
$('#btn_check').click(function () {
var length = 0;
$('#list_lab').find('tr').each(function(){
var row = $(this);
if(row.find('input[type="checkbox"]').is(':checked')){
$('#list_lab').find(td).append('<input type="text" name="mytext[]" id="txt_row '" + length + "'" />')
}
length++;
});
});
});
Here's working code. Click the button below to run it.
This line:
$('#list_lab').find(td).append('<input type="text" name="mytext[]" id="txt_row '" + length + "'" />')
should have been:
$('#list_lab').find('td').append('<input type="text" name="mytext[]" id="txt_row_"' + length + '" />');
$(document).ready(function() {
function create_inputs() {
var length = 0;
$('#list_lab').find('tr').each(function() {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
// first check if you've already added an input to this row
if ($(this).find('input[type="text"]').length == 0) {
$(this).find('td').append('<input type="text" name="mytext[]" id="txt_row_"' + length + '" />');
}
} else {
// if this is not checked, then remove any inputs that you might have added
$(this).find('input[type="text"]').remove();
}
length++;
});
}
// set this to run whenever you click a checkbox
$('input[type="checkbox"]').click(function() {
create_inputs();
});
// and also run once when you first load
create_inputs();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list_lab" class="checkbox-inline">
<tr>
<td>
<input id="list_lab_0" type="checkbox" name="list_lab$0" checked="checked" value="Electrolyte (Lab)">
<label for="list_lab_0">Electrolyte (Lab)</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_1" type="checkbox" name="list_lab$1" checked="checked" value="Creatinine (plus eGFR)">
<label for="list_lab_1">Creatinine (plus eGFR)</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_2" type="checkbox" name="list_lab$2" value="Blood Urea Nitrogen">
<label for="list_lab_2">Blood Urea Nitrogen</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_3" type="checkbox" name="list_lab$3" value="Complete Blood Count">
<label for="list_lab_3">Complete Blood Count</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_4" type="checkbox" name="list_lab$4" value="Dengue NS1 Ag">
<label for="list_lab_4">Dengue NS1 Ag</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_5" type="checkbox" name="list_lab$5" value="Influenza A/B A/(H1N1) Screening">
<label for="list_lab_5">Influenza A/B A/(H1N1) Screening</label>
</td>
</tr>
<tr>
<td>
<input id="list_lab_6" type="checkbox" name="list_lab$6" value="Urine Exam">
<label for="list_lab_6">Urine Exam</label>
</td>
</tr>
</table>
<button id="btn_check">click me</button>
Related
I've got a deadline for an 'interview project' that I'm almost certain I've botched, but I, personally, NEED to know how this works! I've got a CRM that is the project of managing different employees as the project. Yes, it's full-stack development which I'm not up to snuff for, but I've tried saving this information to a MySQL database, which I couldn't get past a 500 error or 'user is not allowed on database' even though MySQL Workbench connected just fine.
Anyways, I'm now trying to save this information from this form into a CSV flat-file database. I'm accustomed much more to PHP, but the interviewing people want ASP.NET and I've learned everything I've coded in about a week that I happened to be moving in as well.
Regardless, here's the files, I can't make heads or tails of this right now and need to relax before I start my day job as a Customer Service Rep. (=_=)
The controller function in charge of this page:
[HttpPost]
public ActionResult Success(string Name, string StartDate, string Address, string Email, string PhoneNumber, string Position, string Department, Boolean Employment, string StartTime, string EndTime)
{
string fileName = "data.csv";
string folder = #"C:\ProgramData\";
string fullPath = folder + fileName;
string query = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
query += " , " + Name + " , " + StartDate + " , " + Address + " , " + Email + " , " + PhoneNumber + " , " + Position + " , " + Department + " , " + Employment + " , " + StartTime + " , " + EndTime;
using StreamWriter writer = new StreamWriter(fullPath);
writer.WriteLine(query);
return Content(query);
}
}
The .cshtml
#model Conservice.Models.Add
#{ViewBag.Title = "Display";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm(new { controller = "Team", action = "Success"})) ;
<h2>Add Member</h2>
<table style="width:100%;">
<tr>
<td> Insert Hire Date (i.e. 2020-01-30)</td>
<td> <input name="startDate" type="text" required="" /></td>
</tr>
<tr>
<td> Name</td>
<td> <input name="Name" type="text" /></td>
</tr>
<tr>
<td> Address</td>
<td> <input name="Address" type="text" /></td>
</tr>
<tr>
<td> Email Address</td>
<td> <input name="Email" type="text" required="" /></td>
</tr>
<tr>
<td> Preferred Phone Number</td>
<td> <input name="PhoneNumber" type="text" required="" /></td>
</tr>
<tr>
<td> Position</td>
<td> <input name="Position" type="text" required="" /></td>
</tr>
<tr>
<td> Department</td>
<td> <input name="Department" type="text" required="" /></td>
</tr>
<tr>
<td> Employment Status</td>
<td>
<input name="Employment" type="radio" value="true"><label for="true">Employed</label><br />
<input type="radio" name="Employment" value="false" /><label for="false">Terminated</label>
</td>
</tr>
<tr>
<td> Shift start time</td>
<td> <input name="StartTime" type="text" /></td>
</tr>
<tr>
<td> Shift End Time</td>
<td> <input name="EndTime" type="text" /></td>
</tr>
<tr>
<td> <a asp-area="" asp-controller="Team" asp-action="Success">Submit</a></td>
</tr>
</table>
The View for the landing page after the button press which displays a 405 error
#model Conservice.Models.Member
#{
ViewBag.Title = "Success";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Success!</h2>
<br />
<p>
<a asp-area="" asp-controller="Team" asp-action="Display">Continue</a>
</p>
Your begin form statement:
#using (Html.BeginForm(new { controller = "Team", action = "Success"})) ;
Will just write open and closed form tags before rest of html (see docs about using statement ). Change it to:
#using (Html.BeginForm(new { controller = "Team", action = "Success"}))
{
<table style="width:100%;">
<tr>
<td> Insert Hire Date (i.e. 2020-01-30)</td>
<td> <input name="startDate" type="text" required="" /></td>
</tr>
..... rest of the form
}
I am getting an error message - Object reference not set to an instance of an object. I believe that 'files' is empty - but not sure why. Could someone tell me why files would be empty?
Thanks!
View:
<form type="multipart/form-data" action="#Url.Action("AddImage", "HelpDesk")" method="post">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 105px"><br /></td>
<td> </td>
</tr>
<tr>
<td style="width: 105px; font-weight: bold">Attach File(s):</td>
<td> </td>
</tr>
<tr>
<td>
<input type="hidden" id="id" name="id" value=#item.ID>
<input type="hidden" id="requesttype" name="RequestType" value=#item.RequestType>
<input type="file" id="files" name="files" multiple>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</td>
<td> </td>
</tr>
</table>
</form>
Controller:
public ActionResult AddImage(HelpdeskImage model, int id, string requesttype, HttpPostedFileBase[] files)
{
foreach (HttpPostedFileBase file in files)
{
var fileBytes = new byte[file.ContentLength];
file.InputStream.Read(fileBytes, 0, file.ContentLength);
hd.HelpdeskImages.Add(new HelpdeskImage
{
HelpdeskNum = id,
DocumentExt = Path.GetExtension(file.FileName),
Image = fileBytes,
DocumentName = System.IO.Path.GetFileName(file.FileName),
RequestType = requesttype,
Created = DateTime.Now,
}
);
hd.SaveChanges();
}
//}
return RedirectToAction("Details", new { id = id });
}
Modify your form tag to include enctype="multipart/form-data". Specifying this type is necessary when you have an input type="file".
<form enctype="multipart/form-data" action="#Url.Action("AddImage", "HelpDesk")" method="post">
...
</form>
I am trying to iterate through a table to get the input value. How can I do that ?
tried looping and iterating over the tr and class names. console.log showing nothing for the moment.
CSHTML
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.PositionDebit)
</td>
<td class="Debit">
<span>#item.Debits</span>
<input class="Debits" type="number" value="#item.Debits" />
</td>
<td class="CoefPonderation">
<span>#item.CoefficientDePonderation</span>
<input class="CoefPonderation" type="number" value="#item.CoefficientDePonderation" />
</td>
<td class="Jauge">
<span>#item.Jauge</span>
<input class="Jauge" type="number" value="#item.Jauge" />
</td>
</tr>
}
</tbody>
Javascript
The id of the table is tblDebit
$("#tblDebit tr").each(function () {
var debit = {};
debit.Debits = $(this).find(".Debits").html();
debit.CoefPonderation = $(this).find(".CoefPonderation").html();
debit.Jauge = $(this).find(".Jauge").html();
console.log(debit.Debits);
console.log(debit.CoefPonderation);
alert(debit.CoefPonderation);
debits.push(debit);
});
Hi you have some issues here:
First use .val() instead of .html().
you should use the class CoefPonderation in your td or input not both.
in your loop get each element and dont use this.
here is the javascript code:
$("#tblDebit").find("tbody").children("tr").each(function(index, element) {
let debits = [],
debit = {};
debit.Debits = $(element).find(".Debits").val();
debit.CoefPonderation = $(element).find(".CoefPonderation").children('input[type="number"]').val();
debit.Jauge = $(element).find(".Jauge").val();
// console.log(debit.Debits);
// console.log(debit.CoefPonderation);
console.log('row:' + $.trim($(element).find("td").first().text()) + ', debit:' + debit.Debits + ', ponderation:' + debit.CoefPonderation);
debits.push(debit);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblDebit" border="1">
<thead>
<th>row</th>
<th>Debits</th>
<th>Ponderation</th>
<th>Jauge</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="Debit">
<span>item 1</span>
<input class="Debits" type="number" value="1" />
</td>
<td class="CoefPonderation">
<span>ponderation 1</span>
<input class="CoefPonderation" type="number" value="1" />
</td>
<td class="Jauge">
<span>Jauge 1</span>
<input class="Jauge" type="number" value="1" />
</td>
</tr>
<tr>
<td>
2
</td>
<td class="Debit">
<span>item 2</span>
<input class="Debits" type="number" value="2" />
</td>
<td class="CoefPonderation">
<span>ponderation 2</span>
<input class="CoefPonderation" type="number" value="2" />
</td>
<td class="Jauge">
<span>Jauge 2</span>
<input class="Jauge" type="number" value="2" />
</td>
</tr>
</tbody>
</table>
Hope it helps
Instead of html() use val()
debit.Debits = $(this).find(".Debits").val();
debit.CoefPonderation = $(this).find(".CoefPonderation").val();
debit.Jauge = $(this).find(".Jauge").val();
So I've got a HtmlPage with 2 forms in it, not one of those have Id to get.
I've tried to get them by getting the last child on the body (which is the form I need to get), I've been trying to receive it on a HTMLFORM element, but no luck. Any ideas?
Edit:
I'm adding the part of the code you can see :(
<table width="650" bordercolor="#cccccc" bgcolor="white" border="1">
<tbody>
<tr>
<th>
<font size="1">ACCION </font>
</th>
<th>
<font size="1">ESTADO </font>
</th>
<th>
<font size="1">DESCRIPCION </font>
</th>
<th>
<font size="1">CANTIDAD </font>
</th>
</tr>
<form action="le_02pre_deim_anticipada.asp?submit=AA" method="post"></form>
<input name="cod_estado" type="hidden" value="100">
<input name="descrip" type="hidden" value="100">
<input name="buzon" type="hidden" value="B1_">
<input name="filtro_fecha" type="hidden" value="1">
<tr>
<td width="20%" align="CENTER">
<input name="SUBMIT" type="SUBMIT" value="SELECCIONAR"></td>
<td width="10%" align="CENTER">
<font size="2">100</font>
</td>
<td width="60%">
<font size="2">
Informadas en espera de la presentación en Bancos
</font>
</td>
<td width="10%" align="CENTER">
<font size="2">233</font>
</td>
</tr>
<form action="le_02pre_deim_anticipada.asp?submit=AA" method="post"></form>
<input name="cod_estado" type="hidden" value="200">
<input name="descrip" type="hidden" value="200">
<input name="buzon" type="hidden" value="B2_">
<input name="filtro_fecha" type="hidden" value="1">
<tr>
<td width="20%" align="CENTER" bgcolor="#cccccc">
<input name="SUBMIT" type="SUBMIT" value="SELECCIONAR"></td>
<td width="10%" align="CENTER" bgcolor="#cccccc">
<font size="2">200</font>
</td>
<td width="60%" bgcolor="#cccccc">
<font size="2">
Presentadas en entidades recaudadoras en espera de la Solicitud de Levante
</font>
</td>
<td width="10%" align="CENTER" bgcolor="#cccccc">
<font size="2">194</font>
</td>
</tr>
</tbody>
</table>
So I need to send this values through post.
<input name="cod_estado" type="hidden" value="200">
<input name="descrip" type="hidden" value="200">
<input name="buzon" type="hidden" value="B2_">
<input name="filtro_fecha" type="hidden" value="1">
I'm receiving the body on:
HtmlBody body0 = (HtmlBody)P0.Body;
I solved it :D
I just wanted to let you know how I solved this issue.
Not one element on the page has ID, but you can use the position of some markers to navigate it.
HtmlForm f02Submit = PageDecla.Forms[1];
HtmlSubmitInput SubM02 = (HtmlSubmitInput)PageDecla.GetElementsByName("SUBMIT")[1];
f02Submit.AppendChild(SubM02);
var count = f02Submit.ChildElementCount;
SubM02 = (HtmlSubmitInput)f02Submit.ChildNodes[count-1];
PaginaDecla = (HtmlPage)SubM02.Click();
f02Submit = null;
SubM02 = null;
int f = 0, hfImp = 0;
f = PaginaDecla.Forms.Count;
for (int i = 0; i < f; i++)
{
var form = PageDecla.Forms[i];
hfImp = form.ChildElementCount;
SubM02 = (HtmlSubmitInput)PageDecla.GetElementsByName("SUBMIT")[i];
for (int j = 0; j < hfImp; j++)
{
var hfI = (HtmlHiddenInput)form.ChildNodes[j];
var nameHF = hfI.NameAttribute;
var val = hfI.ValueAttribute;
if ((val == cod_int) && (nameHF == name))
{
form.AppendChild(SubM02);
hfImp = form.ChildElementCount;
var btn = (HtmlSubmitInput)form.ChildNodes[hfImp-1];
PageDecla = (HtmlPage)btn.Click();
j = hfImp;
i = f;
}
}
}
Thanks for those who tried, I know I did not provide that much information.
This is the script I am working with.
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedId").length === $(".selectedId:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".selectedId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
And this is the cshtml view.
<table id="notificationsTableId">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">
<input type="checkbox" id="selectall" />
</th>
</tr>
</thead>
<tbody>
<tr class="results-table-row odd">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
</td>
</tr>
<tr class="results-table-row even">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();"/>
</td>
</tr>
<tr class="results-table-row even odd">
<td>
<input type="checkbox" class="selectedId" name="selectedId" onclick="resetSelectAll();" />
</td>
</tr>
</tbody>
</table>
Right now the select button will work like it should, if i check it it will check all the dates inside that table.
But what I want to do is I want that button to select all the Check-boxes on the page.
But if I give a checkbox the same ID inside my foreach loop like this:
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" id="selectedId" name="isoDate" value="#isoDate"/>#day-#isoDate
</label>
}
It doesn't work, it will still only select those 3 check-boxes on the top of the page. I would assume it would check all the check-boxes correct?
It ends up like this:
You are using selectedId as id instead of class like other checkboxes. Use it as class attribute as shown below
#foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" class="selectedId" name="isoDate" value="#isoDate"/>#day-#isoDate
</label>
}