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">
$(document).ready(function() {
$('#btnHide').click(function() {
$('td:nth-child(3),th:nth-child(3)').hide();
});
});
</script>
<script type="text/javascript">
$(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">
function btn_changeColumns_onClick()
{
window.location.href = "checkbox.html";
}
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
</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:
<!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">
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-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