JQuery试图打印选中复选框的表的列,然后打印来自web服务器的响应
本文关键字:打印 然后 web 响应 服务器 JQuery 复选框 | 更新日期: 2023-09-27 18:24:48
我正试图使用JQuery创建一个URL,但遇到了一个小问题。我正在将表格打印到我的页面上,如下所示:
<table id="employeeTable">
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Phone No.</th>
<th>Extension</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var prod in Model)
{
<tr>
<td>@prod.FullName</td>
<td>@prod.Branch</td>
<td>@prod.PhoneNo</td>
<td>@prod.Extension</td>
<td>@prod.Email</td>
@if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
{
<td><a href="/home/edit/@prod.Id" style="color: blue;">edit</a></td>
}
else
{
<td>User => @User.ToString()</td>
}
<td>
<input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
</td>
</tr>
}
</tbody>
</table>
然后我有一个下面的表格,我要求用户输入一些值:
@{if (IsPost) {
string ua = Request["u"];
string pa = Request["p"];
string ma = Request["m"];
<p>You entered: </p>
<p>Company Name: @ua </p>
<p>Contact Name: @pa </p>
<p>Contact Name: @ma </p>
<p>It should appear here, but it won't =></p>
<p id="out"></p>
}
else
{
<form method="post" runat="server" id="FormID">
Username:<br />
<input type="text" name="u" id="u" /><br />
Password<br />
<input type="text" name="p" id="p" /><br />
<br />
Password<br />
<textarea name="m" id="m" cols="25" rows="5">
Enter your comments here...
</textarea><br>
<br />
<input type="submit" value="Submit" class="submit" id="thebutton" />
</form>
}
我想使用我的JQuery构建一个URL,导航到它并在屏幕上打印响应-使用表中复选框和表单中的值,所以在我的脚本中我有:
<script>
$("#thebutton").click(function () {
$('#out').text('');
var form = $(document.getElementById('FormID'));
var urlToConstruct = 'http://webaddress.com/web/d.php';
urlToConstruct += '?u=' + form.find('#u').val();
urlToConstruct += '&p=' + form.find('#p').val();
$('#employeeTable tr').has(':checkbox:checked').find('td:eq(2)').each(function () {
urlToConstruct += ($(this).text());
});
alert(urlToConstruct);
});
</script>
我想从这个表单构建的URL是:
http://webaddress.com/web/d.php?u=<Username entered by user>&p=<Password entered by user>&s=<List of Phone Numbers from the C# above where the checkbox is selected, comma separated>&m=<Comment submitted by user>
因此,如果我的名字是"John",密码是"Password1",注释是"Test",并且我为电话号码为"12345678"的用户选择了一个复选框,我将导航到的URL是:
http://webaddress.com/web/d.php?u=John&p=Password1&s=12345678&m=Test
理想情况下,如果可能的话,我想在同一个父网页上打印网页的响应,而不是转到新的网页。
所以,我的问题-
- 我如何修复上面的JQuery,使其使用正确的
alert()
URL构造 - 单击时如何显示服务器的响应提交,在div中,而不从父级导航
网站
更新:
这让我抓狂:)。我已经尝试删除警报,并简单地查看在fiddler中创建的url。JQuery工作的表单部分;桌子部分根本拒绝。
更新#2:
脚本:
<script>
$("#thebutton").click(function () {
evt.preventDefault();
var $form = $('#FormID');
var urlToConstruct = 'http://webaddress.com/web/d.php';
urlToConstruct += '?u=' + $form.find('#u').val();
urlToConstruct += '&p=' + $form.find('#p').val();
var phoneNumbers =
$.map($('#employeeTable').find('input:checked')
.parent()
.siblings('.js-phoneNumbers'),
function (elem, index) {
return $(elem).text();
});
urlToConstruct += 's=' + phoneNumbers.join(',');
alert(urlToConstruct);
form.submit();
});
</script>
HTML:
<table id="employeeTable">
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Phone No.</th>
<th>Extension</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var prod in Model)
{
<tr>
<td>@prod.FullName</td>
<td>@prod.Branch</td>
<td class="js-phoneNumbers">@prod.PhoneNo</td>
<td>@prod.Extension</td>
<td>@prod.Email</td>
@if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
{
<td><a href="/home/edit/@prod.Id" style="color: blue;">edit</a></td>
}
else
{
<td>User => @User.ToString()</td>
}
<td>
<input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
</td>
</tr>
}
</tbody>
</table>
仍然没有警报对话框:(
var form = $(document.getElementById('FormID'));
- 我在您的标记中没有看到id为
FormID
的元素 - 为什么选择
document.getElementById('FormID')
?由于您已经包含了jQuery,只需使用var form = $('#FormID');
如果你能用正确的标记更新你的问题,我可以进一步帮助你。
另一种想法是,你的点击处理程序附在表单的submit
按钮上。这意味着,浏览器在点击该按钮时执行的默认操作是提交表单。如果你仍然希望明确提交表单,你可能需要修改你的点击处理器,如下所示:
$("#thebutton").click(function(evt) {
evt.preventDefault();
// rest of the code as before
...
...
});
第三个想法,你可以重组你的标记和js如下,
<table id="employeeTable">
<thead>
// markup as before
</thead>
<tbody>
@foreach (var prod in Model)
{
<tr>
// markup as before
<td class="js-phoneNumbers">@prod.PhoneNo</td>
// markup as before
</tr>
}
</tbody>
</table>
$("#thebutton").click(function(evt) {
evt.preventDefault();
var $form = $('#FormID');
var urlToConstruct = 'http://webaddress.com/web/d.php';
urlToConstruct += '?u=' + $form.find('#u').val();
urlToConstruct += '&p=' + $form.find('#p').val();
var phoneNumbers =
$.map($('#employeeTable').find('input:checked')
.parent()
.siblings('.js-phoneNumbers'),
function (elem, index){
return $(elem).text();
});
urlToConstruct += 's=' + phoneNumbers.join(',');
alert(urlToConstruct);
form.submit();
});
我们感兴趣的td
,我给它一个特定的类js-phoneNumbers
。js
前缀向读者传达了该类主要通过js使用,而不是用于样式设计。
点击处理程序然后使用这个类,而不是一个神奇的td:eq(2)
。我觉得这样可以更清楚地传达意图。
$.map
用于将jquery元素数组转换为字符串数组(即电话号码)。
您以前必须构造url的电话号码部分的代码是错误的。Cheifly &s=
没有添加到url中,电话号码也没有逗号分隔。