www.webdeveloper.com
Results 1 to 10 of 10

Thread: Form does not submit unless you choose Yes

  1. #1
    Join Date
    Aug 2012
    Posts
    9

    Form does not submit unless you choose Yes

    Hi,

    I am facing a weird problem. I have this form. Ideally this form should submit either ways, whether you click YES or whether you click NO.

    But, the problem I am facing is, if I click YES, it submits. If i click YES and then I click NO, it submits. But, if I click NO and try to submit it does not.

    My HTML file is as below:

    <html>
    <head>
    <title> Test form in Java
    </title>
    <h1 align="center"><b> Customer Upgrade Request Form</b></h1>
    <style type="text/css">
    body
    {
    margin:
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" src="displaycontrol.js;"></script>
    <h2><b>Basic Information</b></h2>
    <form action="servlet1" method="get" onsubmit="return checkit()">
    <b>Company Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input required="required" type="text" name="cmpyName" id="name"> <br>

    <b>Hub Address/General Location&nbsp
    <input required="required" type="text" name="hubAddress" id="addr"><br>

    <b>Primary Contact Information &nbsp&nbsp&nbsp&nbsp
    <input required="required" type="text" name="pContact" id="pcont"><br>

    <b>Date &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp
    <input required="required" type="date" name="uidate" id="pdate"><br>
    <br>

    <!-- Hub Equipment section. If CHASSIS option is set to NO -->
    <h2><b>Hub Equipment</b></h2>
    <b> Does the Network Manage Chassis ?
    <input type="radio" name="chassisyn" id="chassisy" required="required" value="Yes" onclick="displayyeschassis()" >YES
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="radio" name="chassisyn" id="chassisn" required="required" value="No" onclick="displaynochassis()">NO





    <!-- Group of boxes being displayed if USER selects YES for CHASSIS -->
    <div id="yesChassis" style="display:none; visibility:hidden;">
    <br>
    Number of slots being used by the network
    <input type="number" max="20" min="0" required="required" id="ychassisSlots" name="ychassisSlots" width="10">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis Model Number
    <input type="text" id="ychassisModel" required="required" name="ychassisModel">

    <br><br>
    Chassis Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp
    <input type="number" max="999999" min="000001" required="required" id="ychassisSerial" name="ychassisSerial" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis IP address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="ychassisIP" required="required" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="ychassisIP">
    </div>

    <!-- Group of boxes being displayed if USER selects NO CHASSIS -->
    <div id="noChassis" style="display:none; visibility:hidden;">
    <br>
    Provide the below information about the NMS that is controlling the Chassis:<br><br>
    Ownership/HNO &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="ownerHNO" name="ownerHNO">
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp HNO Name &nbsp&nbsp&nbsp
    <input type="text" id="nameHNO" name="nameHNO">
    <br>
    HNO Point of Contact &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pocHNO" name="pocHNO">
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Email &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="email" id="emailHNO" name="emailHNO">
    <br>
    Software Version &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="softVersion" name="softVersion">

    <br><br>
    <i>Please Note: If you do not manage the chassis and/or are not sure if the NMS Server controlling the chassis
    is running iDX 2.0 or later, contact the iDirect TAC for further instructions</i>

    <br><br>
    Number of slots being used by the network
    <input type="number" max="20" min="0" id="chassisSlots" name="chassisSlots" width="10">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis Model Number
    <input type="text" id="chassisModel" name="chassisModel">

    <br><br>
    Chassis Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="number" max="999999" min="000001" id="chassisSerial" name="chassisSerial" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis IP address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="chassisIP" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="chassisIP">
    </div>



    <br>

    <h2><b>NMS Information</b></h2>
    Primary NMS Model Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsModel" required="required" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Primary NMS Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsSerial" name="pnmsSerial" required="required" >

    <br>
    Backup NMS Model Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="bkpnmsModel" name="bkpnmsModel" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Backup NMS Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="bkpnmsSerial" name="bkpnmsSerial">


    <br>
    Primary MAC Address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsMac" required="required" pattern="[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}" name="pnmsMac">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Backup MAC Address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp
    <input type="text" id="bkpnmsMac" name="bkpnmsMac">

    <br><br>
    <input type="submit" value ="Submit" id="submitButton">
    </form>
    </body>
    </html>









    The javascript file is as below:

    var nochassisflag=0, yeschassisflag=0;

    function displaynochassis()
    {
    if(yeschassisflag==1)
    {
    yesChassis.style.display = 'none';
    yesChassis.style.visibility = 'hidden';
    yeschassisflag=0;
    }
    noChassis.style.display = 'block';
    noChassis.style.visibility = 'visible';
    nochassisflag=1;

    }


    function displayyeschassis()
    {
    if(nochassisflag==1)
    {
    noChassis.style.display = 'none';
    noChassis.style.visibility = 'hidden';
    nochassisflag=0;
    }
    yesChassis.style.display = 'block';
    yesChassis.style.visibility = 'visible';
    yeschassisflag=1;

    }

    function checkit()
    {
    var bkpnmsserial = document.getElementById("bkpnmsSerial").value;
    var bkpnmsmac = document.getElementById("bkpnmsMac").value;


    if(bkpnmsserial !="")
    {
    if(bkpnmsmac=="")
    {
    window.alert("Enter the MAC address of the BackUp NMS");
    return false;
    }
    }
    else
    {
    return true;
    }
    }


    I am using Servlets.

    Please help me resolve this issue.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Quote Originally Posted by DevFreak View Post
    Hi,

    I am facing a weird problem. I have this form. Ideally this form should submit either ways, whether you click YES or whether you click NO.

    But, the problem I am facing is, if I click YES, it submits. If i click YES and then I click NO, it submits. But, if I click NO and try to submit it does not.

    My HTML file is as below:

    ...

    I am using Servlets.

    Please help me resolve this issue.
    How fast are you clicking NO after the YES click?
    The computer may be winning in the race to submit before you change your mind!

  3. #3
    Join Date
    Aug 2012
    Posts
    9
    See what is happening is,
    if i choose NO, i display another set of user input elements (defined in noChassis div element)
    if i choose YES, i display another set of user input elements (defined in yesChassis)

    the form submits when I click submit

    But, somehow, when i choose NO, and try to submit, it does not submit


    if i choose YES, and click submit, it submits

    if I choose YES, (and within some 2 secs) click NO, it submits.


    But, I want the form to submit in both cases, whether I click NO or whether I click YES

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Exclamation

    Quote Originally Posted by DevFreak View Post
    ...
    But, I want the form to submit in both cases, whether I click NO or whether I click YES

    Then why bother checking if you click YES or NO?
    Makes no sense to me.
    Just display what is appropriate and skip the YES/NO submission check.

  5. #5
    Join Date
    Aug 2012
    Posts
    9
    Well the actual reason is this:

    if user selects NO:
    1) he/she has the option to enter some other fields

    if user selects YES
    1) he/she has to compulsorily enter some other fields


    I have got to the bottom of this as to why I am facing the error.

    The reason is this:

    there are a set of hidden fields initially in the form

    1) if user clicks NO, we display some fields (these fields are not "required" fields)
    2) if user clicks YES, we display the "required" fields

    So what is happening is, when I click NO, we dont show the "required" fields as they do not hold valid if user clicks NO.
    So, HTML5/JAVASCRIPT does not execute the submit button considering the "required" fields have not been entered.

    Can you help me with this ??

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    When the 'required' fields are not required, fill in the hidden values with a dummy entry so that it appears something has been submitted.
    In your server code (assumed that is where you are sending information), when the dummy entry is analysed, ignore it.

  7. #7
    Join Date
    Aug 2012
    Posts
    9
    I figured this out my friend.

    Thanks a lot for your help. I will also analyse ur suggestion. I highly appreciate the fact you bothered to help me.

    What i did was. I initially removed the "required" attribute and set it only if user clicked "yes".

    Below is the working code in case you want to see.




    <html>
    <head>
    <title> Test form in Java
    </title>
    <h1 align="center"><b> Customer Upgrade Request Form</b></h1>
    <style type="text/css">
    body
    {
    margin:
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    var nochassisflag=0, yeschassisflag=0;

    function displaynochassis()
    {
    yesChassis.style.display = 'none';
    yesChassis.style.visibility = 'hidden';
    yeschassisflag=0;

    noChassis.style.display = 'block';
    noChassis.style.visibility = 'visible';
    nochassisflag=1;

    };


    function displayyeschassis()
    {
    noChassis.style.display = 'none';
    noChassis.style.visibility = 'hidden';
    nochassisflag=0;

    document.getElementById("ychassisSlots").required="required";
    document.getElementById("ychassisModel").required="required";
    document.getElementById("ychassisSerial").required="required";
    document.getElementById("ychassisIP").required="required";
    yesChassis.style.display = 'block';
    yesChassis.style.visibility = 'visible';
    yeschassisflag=1;

    }

    function checkit()
    {
    var bkpnmsserial = document.getElementById("bkpnmsSerial").value;
    var bkpnmsmac = document.getElementById("bkpnmsMac").value;


    if(bkpnmsserial !="")
    {
    if(bkpnmsmac=="")
    {
    window.alert("Enter the MAC address of the BackUp NMS");
    return false;
    }
    }
    else
    {
    return true;
    }
    };
    </script>


    <h2><b>Basic Information</b></h2>
    <form action="servlet1" method="get" onsubmit="return checkit()">
    <b>Company Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input required="required" type="text" name="cmpyName" id="name"> <br>

    <b>Hub Address/General Location&nbsp
    <input required="required" type="text" name="hubAddress" id="addr"><br>

    <b>Primary Contact Information &nbsp&nbsp&nbsp&nbsp
    <input required="required" type="text" name="pContact" id="pcont"><br>

    <b>Date &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp
    <input required="required" type="date" name="uidate" id="pdate"><br>
    <br>

    <!-- Hub Equipment section. If CHASSIS option is set to NO -->
    <h2><b>Hub Equipment</b></h2>
    <b> Does the Network Manage Chassis ?
    <input type="radio" name="chassisyn" id="chassisy" required="required" value="Yes" onclick="displayyeschassis()" >YES
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="radio" name="chassisyn" id="chassisn" required="required" value="No" onclick="displaynochassis()">NO





    <!-- Group of boxes being displayed if USER selects YES for CHASSIS -->
    <div id="yesChassis" style="display:none; visibility:hidden;">
    <br>
    Number of slots being used by the network
    <input type="number" max="20" min="0" id="ychassisSlots" name="ychassisSlots" width="10">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis Model Number
    <input type="text" id="ychassisModel" name="ychassisModel">

    <br><br>
    Chassis Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp
    <input type="number" max="999999" min="000001" id="ychassisSerial" name="ychassisSerial" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis IP address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="ychassisIP" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="ychassisIP">
    </div>

    <!-- Group of boxes being displayed if USER selects NO CHASSIS -->
    <div id="noChassis" style="display:none; visibility:hidden;">
    <br>
    Provide the below information about the NMS that is controlling the Chassis:<br><br>
    Ownership/HNO &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="ownerHNO" name="ownerHNO">
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp HNO Name &nbsp&nbsp&nbsp
    <input type="text" id="nameHNO" name="nameHNO">
    <br>
    HNO Point of Contact &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pocHNO" name="pocHNO">
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Email &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="email" id="emailHNO" name="emailHNO">
    <br>
    Software Version &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="softVersion" name="softVersion">

    <br><br>
    <i>Please Note: If you do not manage the chassis and/or are not sure if the NMS Server controlling the chassis
    is running iDX 2.0 or later, contact the iDirect TAC for further instructions</i>

    <br><br>
    Number of slots being used by the network
    <input type="number" max="20" min="0" id="chassisSlots" name="chassisSlots" width="10">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis Model Number
    <input type="text" id="chassisModel" name="chassisModel">

    <br><br>
    Chassis Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="number" max="999999" min="000001" id="chassisSerial" name="chassisSerial" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Chassis IP address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="chassisIP" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="chassisIP">
    </div>



    <br>

    <h2><b>NMS Information</b></h2>
    Primary NMS Model Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsModel" required="required" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Primary NMS Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsSerial" name="pnmsSerial" required="required" >

    <br>
    Backup NMS Model Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="bkpnmsModel" name="bkpnmsModel" width="15">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Backup NMS Serial Number&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="bkpnmsSerial" name="bkpnmsSerial">


    <br>
    Primary MAC Address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id="pnmsMac" required="required" pattern="[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}" name="pnmsMac">

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Backup MAC Address&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    &nbsp&nbsp
    <input type="text" id="bkpnmsMac" name="bkpnmsMac">

    <br><br>
    <input type="submit" value ="Submit" id="submitButton">
    </form>
    </body>
    </html>

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Alternative display...

    It bothered me to see so many &nbsp;&nbsp; ... &nbsp;&nbsp; characters which makes it difficult to read and debug you code.
    So I played around with your code to see what a bit of CSS could do.
    Hopefully I have not changed the functionality of your script, only the source and display formatting.

    Note some changes in your code:
    1. You do not need both style.display:none and style.display:hidden
    Same with style.display:block and style.display:visible
    One or the other will do.

    2. You had several id="xxx" assignments that were never used elsewhere.
    I removed them. There may be more that I have missed.

    3. I combined a bit of your displaynochassis() and displayyeschassis() functions to reduce duplicated code.
    I find it easier to debug when you don't have to type so much.

    4. Added a bit of CSS to make it pretty, but remove it if does not meet your needs.
    Note, your margin: setting of the body does nothing.

    There are still some things I would do differently, but if it's working for you, go for it as is!
    Some thoughts have comments scattered about in your script.

    BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read, copy and test while still retaining the formatting.
    If you retain the indents, it makes it a lot easier to spot dropped ']' characters and such.

    Code:
    <html>
    <head>
    <title> Test form in Java(SCRIPT) </title>
    
    <style type="text/css">
    /* body { margin: } NOTE: nothing set for margin */
    .RJ { text-align:right; }
    </style>
    
    <script type="text/javascript">
    
    function displayChassis(flag) {
      if (flag == false) {
        yesChassis.style.display = 'none';    noChassis.style.display = 'block';
      } else { 
        yesChassis.style.display = 'block';   noChassis.style.display = 'none';
      }
    };
    
    function displaynochassis(){ displayChassis(false); }
    
    function displayyeschassis() { displayChassis(true);
      document.getElementById("ychassisSlots").required="required";
      document.getElementById("ychassisModel").required="required";
      document.getElementById("ychassisSerial").required="required";
      document.getElementById("ychassisIP").required="required";
    }
    
    function checkit() {
      var bkpnmsserial = document.getElementById("bkpnmsSerial").value;
      var bkpnmsmac = document.getElementById("bkpnmsMac").value;
    
      if(bkpnmsserial !="") {
        if(bkpnmsmac=="") {
          window.alert("Enter the MAC address of the BackUp NMS");
          return false;
        }
      } else {
        return true;
      }
    };
    </script>
    
    </head>
    <body>
    <h1 align="center"><b> Customer Upgrade Request Form</b></h1>
    
    <h2><b>Basic Information</b></h2>
    <form action="servlet1" method="get" onsubmit="return checkit()">
    
    <table border="0">
     <tr>
      <td class="RJ"><b>Company Name: </b></td>
      <td><input required="required" type="text" name="cmpyName" id="name"> </td>
     </tr>
     <tr>
      <td class="RJ"><b>Hub Address/General Location: </b></td>
      <td><input required="required" type="text" name="hubAddress" id="addr"></td>
     </tr>
     <tr>
      <td class="RJ"><b>Primary Contact Information: </b></td>
      <td><input required="required" type="text" name="pContact" id="pcont"></td>
     </tr>
     <tr>
      <td class="RJ"><b>Date: </b></td>
      <td><input required="required" type="date" name="uidate" id="pdate"></td>
     </tr>
    </table>
    <p>
    
    <!-- Hub Equipment section. If CHASSIS option is set to NO -->
    <h2><b>Hub Equipment</b></h2>
    <b> Does the Network Manage Chassis ?</b>
    <label>
     <input type="radio" name="chassisyn" required="required" value="Yes" onclick="displayyeschassis()" >
     YES </label>
    <label>
     <input type="radio" name="chassisyn" required="required" value="No" onclick="displaynochassis()">
     NO </label>
    <p>
    
    <!-- Group of boxes being displayed if USER selects YES for CHASSIS -->
    <div id="yesChassis" style="display:none">
     <table border="0">
      <tr>
       <td class="RJ">Number of slots being used by the network</td>
       <td><input type="number" max="20" min="0" id="ychassisSlots" name="ychassisSlots" width="10"></td>
       <td class="RJ">Chassis Model Number</td>
       <td><input type="text" id="ychassisModel" name="ychassisModel"></td>
      </tr>
      <tr>
       <td class="RJ">Chassis Serial Number</td>
       <td><input type="number" max="999999" min="000001" id="ychassisSerial" name="ychassisSerial" width="15"></td>
       <td class="RJ">Chassis IP address</td>
       <td><input type="text" id="ychassisIP" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="ychassisIP"></td>
      </tr>
     </table>
    </div>
    
    <!-- Group of boxes being displayed if USER selects NO CHASSIS -->
    <div id="noChassis" style="display:none">
     Provide the below information about the NMS that is controlling the Chassis:<p>
    <table border="0">
     <tr>
      <td class="RJ">Ownership</td>
      <td><input type="text" id="ownerHNO" name="ownerHNO"></td>
      <td class="RJ">HNO</td>
      <td><input type="text" id="nameHNO" name="nameHNO"></td>
     </tr>
     <tr>
      <td class="RJ">HNO Point of Contact </td>
      <td><input type="text" id="pocHNO" name="pocHNO"></td>
      <td class="RJ">Email </td>
      <td><input type="email" id="emailHNO" name="emailHNO"></td>
     </tr>
     <tr>
      <td class="RJ">Software Version</td>
      <td><input type="text" id="softVersion" name="softVersion"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td colspan="4">
       <i><b style="color:red">Please Note: </b><br>
          If you do not manage the chassis and/or are not sure if the NMS Server controlling the chassis
          is running iDX 2.0 or later, <br>contact the iDirect TAC for further instructions</i>
      </td>
     </tr>
     <tr>
      <td class="RJ">Number of slots being used by the network</td>
      <td><input type="number" max="20" min="0" id="chassisSlots" name="chassisSlots" width="10"></td>
      <td class="RJ">Chassis Model Number</td>
      <td><input type="text" id="chassisModel" name="chassisModel"></td>
     </tr>
     <tr>
      <td class="RJ">Chassis Serial Number</td>
      <td><input type="number" max="999999" min="000001" id="chassisSerial" name="chassisSerial" width="15"></td>
      <td class="RJ">Chassis IP address</td>
      <td><input type="text" id="chassisIP" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" name="chassisIP"></td>
     </tr>
    </table>
    </div>
    
    <br>
    
    <h2><b>NMS Information</b></h2>
    <table border="0">
     <tr>
      <td class="RJ">Primary NMS Model Number</td>
      <td><input type="text" id="pnmsModel" required="required" width="15"></td>
      <td class="RJ">Primary NMS Serial Number</td>
      <td><input type="text" id="pnmsSerial" name="pnmsSerial" required="required" ></td>
     </tr>
     <tr>
      <td class="RJ">Backup NMS Model Number</td>
      <td><input type="text" id="bkpnmsModel" name="bkpnmsModel" width="15"></td>
      <td class="RJ">Backup NMS Serial Number</td>
      <td><input type="text" id="bkpnmsSerial" name="bkpnmsSerial"></td>
     </tr>
     <tr>
      <td class="RJ">Primary MAC Address
      <td><input type="text" id="pnmsMac" required="required" name="pnmsMac"
           pattern="[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}.[A-Za-z0-9]{2}">
      </td>
      <td class="RJ">Backup MAC Address</td>
      <td><input type="text" id="bkpnmsMac" name="bkpnmsMac"></td>
     </tr>
    </table>
    
    <p><input type="submit" value ="Submit" id="submitButton">
    </form>
    </body>
    </html>

  9. #9
    Join Date
    Aug 2012
    Posts
    9
    Thanks a ton ! I wanted to revamp by removing the "&nbsp".

    I liked your suggestions. Thank You.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Quote Originally Posted by DevFreak View Post
    Thanks a ton ! I wanted to revamp by removing the "&nbsp".

    I liked your suggestions. Thank You.
    You're most welcome.
    Happy to help.

    Note: You might want to re-think the following...
    Code:
    function displaynochassis(){ displayChassis(false); }
    
    function displayyeschassis() { displayChassis(true);
      document.getElementById("ychassisSlots").required="required";
      document.getElementById("ychassisModel").required="required";
      document.getElementById("ychassisSerial").required="required";
      document.getElementById("ychassisIP").required="required";
    }
    It does not appear that choosing the displaynochassis() function
    will reset the required settings of the displayyeschassis() function
    if the former is chosen after the latter had been clicked.

    Easy fix might be ...
    Code:
    function displayChassis(flag) {
      if (flag == false) {
        yesChassis.style.display = 'none';    noChassis.style.display = 'block';
      } else { 
        yesChassis.style.display = 'block';   noChassis.style.display = 'none';
      }
    };
    
    function displaynochassis(){ displayChassis(false);  setRequirements(false); }
    
    function displayyeschassis() { displayChassis(true); setRequirements(true); }
    
    function setRequirments(flag) {
      var tmp = '';
      if (flag == true) { tmp = 'required'; }
      document.getElementById("ychassisSlots").required = tmp;
      document.getElementById("ychassisModel").required = tmp;
      document.getElementById("ychassisSerial").required = tmp;
      document.getElementById("ychassisIP").required = tmp;
    }

    Good Luck!
    Last edited by JMRKER; 08-24-2012 at 03:37 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles