same fields within tabbed content

Question

I have a form that covers CSS tabbed content and will calculate stuff based on selected fields from tabs.

Question 1: Will the form work in general across multiple tabs?

Question 2: I have fields that will repeat in multiple tabs. How do I managed this? Just copy and paste them or use different IDs? Not sure how form will behave in this case. Please advise.

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
    </ul>
    <div id="tabCtrl">

<form name="myForm" METHOD=post ACTION="/Calculate">

     <div id="page1" style="display: block;">Page 1
        <select name="field1" id="field1">
        <option value="0" selected="selected">- Select</option>
        <option value="65">Value 1</option>
        <option value="75">Value 2</option>
        </select>
      </div>

      <div id="page2" style="display: none;">Page 2
        <select name="field1" id="field1">
            <option value="0" selected="selected">- Select</option>
            <option value="65">Value 1</option>
            <option value="75">Value 1</option>
        </select>
        <select name="field2" id="field2">
            <option value="0" selected="selected">- Select</option>
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
        </select>
      </div>      
     </form>      
    </div>
  </body>
</html>

There are two different things to watch out for. No two elements in the same document can have the same `id`, so you should namespace those like `page1_field1`. When your form is serialized and sent to the server, the `name` attribute becomes the serialization key for each field, so you should probably namespace those the same way. — Austin Mullins, Mar 30 '15 at 17:14
So, there is no way not to duplicate fields that will be common for both tabs? — Myroslav Tedoski, Mar 30 '15 at 18:42
I'm not sure I understand the question. If all the data is being sent to the server simultaneously in one post request, each field should represent something unique, so there shouldn't be any duplicate fields. — Austin Mullins, Mar 30 '15 at 18:52
Apologies, I was not clear enough. There will be fields that overlap between both tabs as well as other fields that will be unique to each tab. Something like tab 1 will be a "basic" version of the form while tab 2 will be "advanced" version of the form. I'm wondering if I should have two separate forms for each tab... — Myroslav Tedoski, Mar 30 '15 at 18:58
This is just my opinion, and thus not a real answer, but I think it would make more sense in this case to define a separate form for each tab. — Austin Mullins, Mar 30 '15 at 19:26

score 0 · Accepted Answer · answered Apr 06 '15 at 17:23

0

As Austin suggested two forms are the answers for my problem

answered Apr 06 '15 at 17:23

Myroslav Tedoski

301
3
14

same fields within tabbed content

1 Answers1