Click here to Skip to main content
15,034,432 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

JavaScript
<!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:

JavaScript
<!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-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
Posted

1 solution

You have read too many resrouces and got confused along the way, a typical case of too many cooks spoil the soup. This is way too much for a beginner, you should go back to the start point and do a systematic learning from the basic. Firstly, there is no server-side scripts, they are only client side html and javascript. I suggest you read and go through the hands-on in this article: Beginner's Guide to HTML5 & CSS3 - Formidable Forms with HTML5[^]
You will have a better understanding after this.
If you want to proceed to server-side scripting later on, then read this: Beginner's Guide to HTML5 & CSS3 - Server Side Story[^] which will give you a head start.
   
v3
Comments
MichCl 28-May-14 15:30pm
   
Thanks for the link. It's very informative. I wish you had the code for acknowledge.html...your acknowledge.php in the second link isn't what I would need, I think, since I have table.html that I'm navigating back to with returned form from the checkbox.html.
MichCl 29-May-14 13:46pm
   
I'm still trying to get the ckboxList to come over, but hopefully I'll get it. I changed my table to table.php with a POST. For some reason it's saying "on" once instead of the full form showing the name="ckboxList" .

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900