Member Avatar for numele

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
  • 254 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

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">
Member Avatar for numele

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

Member Avatar for stbuchok

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/

Member Avatar for numele

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 for stbuchok

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 = '';
        }
    }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.