ONLY Visible Div form elements will get submitted

Question

I have used a JavaScript to hide the DIVs containing form elements....

<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>

When certain checkbox(s) are selected the respective DIV(s) are shown or get visible.....

<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1

<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
<div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
<div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
<div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
<div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
<br />
<input type="submit" name="button" id="button" value="Submit" />
</form>

In the above case I have used Five DIVs with five inputs, if a User selects two check boxs and Submits the form, I don't want the other three input fields to get submited with empty fields. Rather ONLY selected TWO Input Field's value should get submitted.

Any suggestion on the same will be highly appreciated.....

Answer 1

This is not the way forms work. You need to either:

• modify the value of the inputs (usually bad) or...
• manipulate the DOM elements to modify what is part of the form and what is not at a structural (and not styling) level (very bad) or...
• break this into multiple forms and submit the one you're interested in only or...
• disregard the information you're not interested in at the server side or...
• change your form design.

Without further evidence I'd go with one of the latter two.

Answer 2

You can try disabling the blank fields as disabled fields do not submit with the form.

Answer 3

I can think of only two ways to solve this:

1. Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
2. When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
3. Slightly modified version of the previous one would be to have another hidden form, where you can move the divs when unchecked. You need to remove the elements from current form and move them back when checkbox is checked - this way, you could preserve the values user already filled into the textboxes, but when unchecked, the values won't be submitted with current form.