I have a form which will show hidden <div> on selection of a dropdown menu item. My problem is when the form is submitted, all the hidden <div> form elements are sent. I either need to clear all hidden <div> form fields before submit or only submit the visible <div>.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
.hide{
display:none;
}
</style>
<script type="text/javascript">

// script that shows the hidden div associated with dropdown choice when selected

var lastSelection1 = undefined;function handleSelection1(choice) {
    document.getElementById('name').disabled=false;
    document.getElementById(choice).style.display="block";

    if ( lastSelection1 != undefined ) {
        document.getElementById(lastSelection1).style.display="none";
    }

    lastSelection1 = choice;

}
</script>
</head>

<body>
<form name="seForm" method="POST" action="some_web_page">
<select id="name" onChange="handleSelection1(value)" size="1" name="command">
<option value="clear" selected></option>
<option value="option one">option one</option>
<option value="option two">opttion two</option>
<option value="option three">option three</option>
</select>

<!-- START OF A NEW COMMAND -->
<div class="hide" id="se_clear">
</div>

<!-- START OF A NEW COMMAND -->
<div class="hide" id="option one">
  <div align="center">
    <center>
  <div align="left">
  <table border="0" cellspacing="0">
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Slot: </td>
    </center> 
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="slot" size="20" name="slot"></p>
  </td>
    </tr>
  <center>
<center>
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Port: </td>
</center> 
  </center>
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="port" size="20" name="port"></p>
</td>
    </tr>
  </table>
    </div>
    <p align="left">
<input type="submit" value="Submit">
</div>
</div>

<!-- START OF A NEW COMMAND -->
<div class="hide" id="option two">
  <div align="center">
    <center>
  <div align="left">
  <table border="0" cellspacing="0">
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Name: </td>
    </center> 
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="age" size="20" name="name"></p>
  </td>
    </tr>
  <center>
<center>
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Age: </td>
</center> 
  </center>
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="age" size="20" name="age"></p>
</td>
    </tr>
  </table>
  </div>
    <p align="left">
<input type="submit" value="Submit">
</div>
</div>

<!-- START OF A NEW COMMAND -->
<div class="hide" id="option three">
  <div align="center">
    <center>
  <div align="left">
  <table border="0" cellspacing="0">
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Phone: </td>
    </center> 
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="phone" size="20" name="phone"></p>
  </td>
    </tr>
  <center>
<center>
    <tr>
      <td valign="middle" width="30%">
        <p align="right">Age: </td>
</center> 
  </center>
      <td valign="middle" width="70%">
        <p align="left"><input type="text" id="address" size="20" name="address"></p>
</td>
    </tr>
  </table>
  </div>
    <p align="left">
<input type="submit" value="Submit">
</div>
</div>
</form>
</body>
</html>
Member Avatar

With jquery:

assuming that the divs with a class of hide are the ones you are talking about.

$(function(){

    $('#btnSubmit').click(function(){
        submitMe();

        return true;
    });

    function submitMe(){
        $('.hide').remove();
    }

});

...

<input id="btnSubmit" type="submit" value="Submit">

Thanks stbuchok, I tried this but it hides everything even the one which is displayed.

Member Avatar

ok, so don't hide the one that is displayed. I gave you an example, work with it. If you don't know jQuery, learn it: http://jquery.com/

My solution was with javascript which cleared all input text fields when form is submitted.

function ClearAllControls() 
    {
       for (i=0; i<document.forms[0].length; i++)
           {
              doc = document.forms[0].elements[i];
              switch (doc.type) 
                 {
                        case "text" :
                                doc.value = "";
                                break;

                          default :
                                break;
                 }
            }
     }
Member Avatar

it'd be quicker if you did document.getElementsByTagName and your function name is not accurate as you are not clearing all controls, you are only clearing textboxes.

something like the following (haven't tested):

function clearTextBoxes(){
    var elements = document.getElementsByTagName('input');

    for(var i = 0; i < elements.length; i++){
        if(elements[i].type === 'text'){
            elements[i].value = '';
        }
    }
}