如何接收表格发送到其他网页 [英] How to receive form sending to other web page
问题描述
我是JavaScript和网络编程的新手。我发现了很多关于如何将数据发送到另一个网页而不是如何在另一个页面上接收它的例子。
我一直在看这些链接：[第一个前任 [ ^ ]] [1]，[ second ex [ ^ ]] [2]，[ third ex [ ^ ]] [3]，[第四个前 [ ^ ]] [4]，[第五个前 [ ^ ] ] [5]，[真有趣的 ex [ ^ ]] [6]， [第七个前任 [ ^ ]] [7]，[第八个 [ ^ ]] [8]，[http://knockoutjs.com/documentation/submit-binding.html [ ^ ]提交绑定] [9]。
现在我已经设置好了，所以我点击了一个按钮，它在页面之间来回传递。我想发送整个checkbox.html表单并提取table.html页面上检查的项目的信息以显示在表格标题中。我想我现在正在发送表单，但不知道如何获取它并将其发送到我的处理方法。
但是，现在我'我试图弄清楚如何将表格发送到table.html页面（来自checkbox.html）并从那里检索它。有谁知道怎么做？我在下面注释掉了代码。随意忽略它，因为它还没有被使用。我确定我需要使用GET，但我不确定我是否需要POST来发送它，或者如果返回（我现在已经足够）了。如果我需要GET，我不确定table.html中的哪个位置。另外，如果将整个表单发送到table.html是正确的方法（复选框列表最终会很长，所以我的第一个数组方法可能不是最好的想法），这仍然是最终从复选框发送整个表单的正确方法。 HTML？
如果从table.html开始，我们按下按钮进入checkbox.html。在checkbox.html中我按下按钮进入table.html并最终发回数据（到table.html）。
Table.html：
I'm new to JavaScript and web programming. I've found a lot of examples of how to send data to another web page but not how to receive it on the other page.
I've been looking at these links: [first ex[^]][1], [second ex[^]][2], [third ex[^]][3], [fourth ex[^]][4], [fifth ex[^]][5], [really interesting ex[^]][6], [seventh ex[^]][7], [eighth[^]][8], [http://knockoutjs.com/documentation/submit-binding.html[^] submit binding][9].
Right now I have it set up so I click a button and it goes back and forth between pages. I'd like to send the entire checkbox.html form over and extract info on items checked on the table.html page to display in table headings. I think I'm sending the form now, but don't know how to get it and send it to my method for processing.
However, right now I'm trying to figure out how to send the form over to the table.html page (from checkbox.html) and retrieve it from there. Does anyone have any idea how to do that? I left in commented out code below. Feel free to ignore that since it's not being used yet. I'm sure I need to use GET, but I'm not sure if I need POST to send it or if the return (I have now) is enough. If I need GET I'm not sure where in table.html it goes. Plus if it's the correct approach to send the entire form over to table.html (checkbox list will be really long eventually so my first array approach maybe not best idea), is this still the correct approach to send the entire form eventually from checkbox.html?
If start from table.html, we press button to get to checkbox.html. In checkbox.html I press button to get to table.html and eventually send data back (to table.html).
Table.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="utf-8" http-equiv="encoding"/>
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//Used to hide given number row
$(document).ready(function() {
$('#btnHide').click(function() {
// table has header(th), use this
$('td:nth-child(3),th:nth-child(3)').hide();
});
});
</script>
<script type="text/javascript">
//Used to make row editable or not
$(document).ready(function () {
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
</script>
<script language="javascript" type="text/javascript">
//go to checkbox web page
function btn_changeColumns_onClick()
{
//it doesn't like localhost here
window.location.href = "checkbox.html";
}
</script>
<script type="text/javascript">
//function getUrlVars() {
// var vars = {};
// var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
// vars[key] = value;
// });
// return vars;
//}
//not sure if onload is real to use
//not sure if need to put anything where btntest is
//document.getElementById('btntest').onload = function() {
// $(function(){
// var ckBoxForm = getUrlVars();
// alert(ckBoxForm);
//maybe add something to call getSelectedChbox here
// });
//}
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
//function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
//var selchbox = []; // array that will store the value of selected checkboxes
//var allLabels = []; // array to store value of all checkboxes, selected and not
// gets all the input tags in frm, and their number
//var inpfields = frm.getElementsByTagName('input');
//var lblFields = frm.getElementsByTagName('label');
//var allLabelFields = frm.getElementsByTagName('label').innerHTML;
//var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
//for(var i=0; i<nr_inpfields; i++) {
// if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);
// if(inpfields[i].type == 'checkbox') allLabels.push(lblFields[i].innerHTML);
//}
//alert(allLabels);
//return selchbox;
//}
</script>
</head>
<body>
<table id="tableone" border="1">
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
</thead>
<tr class="del">
<td contenteditable="false">Row 0 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 0 Column 1</td>
<td contenteditable="false">Row 0 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 1 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 1 Column 1</td>
<td contenteditable="false">Row 1 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 2 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 2 Column 1</td>
<td contenteditable="false">Row 2 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 3 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 3 Column 1</td>
<td contenteditable="false">Row 3 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 4 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 4 Column 1</td>
<td contenteditable="false">Row 4 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 5 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 5 Column 1</td>
<td contenteditable="false">Row 5 Column 2</td>
</tr>
</table>
<input id="btnHide" type="button" value="Hide Column 2"/>
<input id="chgColumns" type="button" value="Change Columns Displayed"
önclick="return btn_changeColumns_onClick()" />
</body>
</html>
checkbox.html：
checkbox.html:
<!DOCTYPE html>
<!--
I am child window.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script language="javascript" type="text/javascript">
//go to table web page
function btn_goToTable_onClick()
{
window.location.href = "table.html";
return "stuff";
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form id="myCheckboxForm" method="GET">
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="Ckbox1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="Ckbox2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="Ckbox3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="Ckbox4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
</dd>
</dl>
</div>
<div>
<input id="goBack" type="button" value="Update Table"
önclick="return btn_goToTable_onClick()" />
</div>
</form>
</body>
</html>
[1] ：http：//www.boutell.com/newfaq/creating/scriptpass.html
[2]：http：//stackoverflow.com/questions/275092/windows-location-href-not- work-on-firefox3
[3]：http：//stackoverflow.com/questions/21182019/window-location-or-window-location-href-not-changing-the-value-in -all-browsers-m
[4]：http：//papermashup.com/read-url-get-variables-withjavascript/
[5]：http：//stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page
[6]：https：//开发人员。 mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript
[7]：http：//www.xul.fr/javascript/parameters.php
[8]：http：//stackoverflow.com/questions/3682805/javascript-load-a-page-on-button-click
[9]：http：// knockoutjs .com / documentation / submit-binding.html
[1]: http://www.boutell.com/newfaq/creating/scriptpass.html
[2]: http://stackoverflow.com/questions/275092/windows-location-href-not-working-on-firefox3
[3]: http://stackoverflow.com/questions/21182019/window-location-or-window-location-href-not-changing-the-value-in-all-browsers-m
[4]: http://papermashup.com/read-url-get-variables-withjavascript/
[5]: http://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page
[6]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript
[7]: http://www.xul.fr/javascript/parameters.php
[8]: http://stackoverflow.com/questions/3682805/javascript-load-a-page-on-button-click
[9]: http://knockoutjs.com/documentation/submit-binding.html
推荐答案
（ document ）。ready（ function （）{
(document).ready(function() {
（' #btnHide'）。点击（ function （）{
// 表有标题（th），使用此
('#btnHide').click(function() { // table has header(th), use this
（' td：nth-child（3），th：nth-child（3） ）隐藏（）;
}）;
}）;
< / script>
< script type = text / javascript>
// 用于使行可编辑
('td:nth-child(3),th:nth-child(3)').hide(); }); }); </script> <script type="text/javascript"> //Used to make row editable or not
这篇关于如何接收表格发送到其他网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
