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, second ex, third ex, fourth ex, fifth ex, really interesting ex, seventh ex, eighth, submit binding. Right now I have it set up so I click a button and it goes back and forth between pages. I'd eventually 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.
However, right now I'm trying to figure out how to just send basic data 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.
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"
onclick="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">
//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"
onclick="return btn_goToTable_onClick()" />
</div>
</form>
</body>
</html>
