0

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>
2
Contributors
5
Replies
6
Views
4 Years
Discussion Span
Last Post by stbuchok
0

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">
0

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

0

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;
                 }
            }
     }
0

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 = '';
        }
    }
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.