ONLY Visible Div form elements will get submitted

问题

I have used 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(es) 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 5 divs with five inputs, if a user selects two checkboxes and submits the form, I don't want the other 3 input fields to get submitted with empty fields. Rather ONLY selected 2 input field's value should get submitted.

回答1:

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

回答2:

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.

回答3:

I can think of only two ways to solve this:

Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
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.

来源：https://stackoverflow.com/questions/3958907/only-visible-div-form-elements-will-get-submitted

标签

javascript

html

show-hide