Announcement

Collapse
No announcement yet.

Test box's and Java

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Test box's and Java

    Hi All
    I have a form with 10 questions. The questions allow users to input a cost for "Each" or "Total" depending.
    The code below ensures that if a user enters text in one of the two box's, the other box will be disabled. I.e if someone enters text in the "each" form box, then the "Total" box will be disabled and users cant enter anything.

    I have tried to use this code for each of the 10 questions however only the first question will deactivate a box when content is entered.
    The code I have is as follows:

    <script type="text/javascript">
    window.onload = function() {
    var first = document.getElementById("packageeach");
    var last = document.getElementById("packagetotal");
    first.addEventListener("input", function(e){
    last.disabled = this.value.trim().length != 0;
    });
    last.addEventListener("input", function(e){
    first.disabled = this.value.trim().length != 0;
    });
    }

    So for example if I have packageeach1, packagetotal1, packageeach2, packagetotal2 as the ID's in the form, how do I code the above so that if the user enters text in one off the box's in all questions, the blank box'swill be made inactive on each row?

    Cheers



  • #2
    Hi there rude awakening,

    can we see the actual HTML that you are using for this project?


    ~ the original bald headed old fart ~

    Comment


    • #3
      Hi there rude awakening,

      in lieu of your not forthcoming HTML code, here is an example for you to try...

      Code:
      <!DOCTYPE html>
      <html lang="en">
      <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
      
      <title>untitled document</title>
      
      <link rel="stylesheet" href="screen.css" media="screen">
      
      <style media="screen">
      body {
          background-color: rgba(241,241,241,1);
          text-align: center;
       }
      
      #questions {
          display: inline-block;
          padding: 2em;
          border: 0.06em solid rgba(0,0,0,0.5);
          border-radius: 1em;
          background-color: rgba(255,255,255,1);
          box-shadow: inset 0 0 1em rgba(0,0,0,0.4),
                            0.3em 0.3em 0.3em rgba(0,0,0,0.4);
       }
      
      #questions h2 {
          color: rgba(0,0,0,0.6);
       }
      
      #questions div {
          margin: 0.5em 0;
       }
      
      #questions input[type="text"] {
          border: 0.06em solid rgba(0,0,0,0.4);
          border-radius: 0.25em;
          color: rgba(0,0,0,0.6);
       }
      
      #questions label {
          margin:0 0.25em;
          cursor: pointer;
          color: rgba(0,0,0,0.6);
       }
      
      </style>
      
      </head>
      <body>
      
      <form id="questions" action="#">
      <h2>Select one of each pair</h2>
      <div>
       <input id="packageeach0" type="text"><label for="packageeach0">: each0</label>
       <input id="packagetotal0" type="text"><label for="packagetotal0">:total0</label>
      </div><div>
       <input id="packageeach1" type="text"><label for="packageeach1">: each1</label>
       <input id="packagetotal1" type="text"><label for="packagetotal1">:total1</label>
      </div><div>
       <input id="packageeach2" type="text"><label for="packageeach2">: each2</label>
       <input id="packagetotal2" type="text"><label for="packagetotal2">:total2</label>
      </div><div>
       <input id="packageeach3" type="text"><label for="packageeach3">: each3</label>
       <input id="packagetotal3" type="text"><label for="packagetotal3">:total3</label>
      </div><div>
       <input id="packageeach4" type="text"><label for="packageeach4">: each4</label>
       <input id="packagetotal4" type="text"><label for="packagetotal4">:total4</label>
      </div><div>
       <input id="packageeach5" type="text"><label for="packageeach5">: each5</label>
       <input id="packagetotal5" type="text"><label for="packagetotal5">:total5</label>
      </div><div>
       <input id="packageeach6" type="text"><label for="packageeach6">: each6</label>
       <input id="packagetotal6" type="text"><label for="packagetotal6">:total6</label>
      </div><div>
       <input id="packageeach7" type="text"><label for="packageeach7">: each7</label>
       <input id="packagetotal7" type="text"><label for="packagetotal7">:total7</label>
      </div><div>
       <input id="packageeach8" type="text"><label for="packageeach8">: each8</label>
       <input id="packagetotal8" type="text"><label for="packagetotal8">:total8</label>
      </div><div>
       <input id="packageeach9" type="text"><label for="packageeach9">: each9</label>
       <input id="packagetotal9" type="text"><label for="packagetotal9">:total9</label>
      </div><div>
       <input id="clearup" type="reset" value="tidy up">
      </div>
      </form>
      
      <script>
      (function() {
         'use strict';
      
         var c=0;
         var k=0;
         var inp=document.getElementById('questions').getElementsByTagName('input');
      for(c=0;c<inp.length;c++) {
      if(inp[c].type==='text') {
         inp[k].addEventListener('input',disableInputs(k),false);
         k++;  
        }
       }
      
      document.getElementById('clearup').addEventListener('click',function() {
      for(c=0;c<inp.length;c++) {
         inp[c].disabled=false;
        }
       },false);
      
      function disableInputs(k) {
      inp[k].oninput=function() {
      if(k%2===0) {
         inp[k+1].disabled=true;
       }
      else {
         inp[k-1].disabled=true;
         }
        };
       }
      }());
      </script>
      
      </body>
      </html>


      ~ the original bald headed old fart ~

      Comment


      • #4
        Cheers coothead
        Works as required, I will integrate that into the webpage.
        Apologies, I posted the code from work and was called away during mid post. Only getting back to this now.

        Comment


        • #5
          No problem, you're very welcome.


          ~ the original bald headed old fart ~

          Comment

          Working...
          X