When you process the form, you need to also ensure that the form can be correctly processed on the server-side regardless of how the user treats it. If the user doesn’t have scripting, it can help if you are able to properly handle that too.
One way to do that is to use radio options to choose which type the person wants to use. That way the script can then show the appropriate type, and on the server-side you can ignore anything that isn’t of the desired type.
Here’s a sample of the form:
<form id="descriptiveNameForForm">
<fieldset>
<legend>Type to use</legend>
<p><input type="radio" name="type" value="nsq"> N sq und 0 value</p>
<p><input type="radio" name="type" value="nyear"> N year und 0 value</p>
<p><input type="radio" name="type" value="vpssq"> vps sq und 0 value</p>
<p><input type="radio" name="type" value="nzh"> N zh und 0 value</p>
</fieldset>
<fieldset id="nsq">
<legend>N sq</legend>
<p><label>14 sq und 0 value <input id="14sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>510 sq und 0 value <input id="510sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1119 sq und 0 value <input id="1119sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>20j sq und 0 value <input id="20jsq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="nyear">
<legend>N year</legend>
<p><label>one year und 0 value <input id="oneyear-und-0-value" maxlength="10" class="form-text" type="text"></label></p>
<p><label>two year und 0 value<input id="twoyear-und-0-value" maxlength="10" class="form-text" type="text"></label></p>
<p><label>three year und 0 value<input id="threeyear-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="vpssq">
<legend>VPS sq
<p><label>vls sq und 0 value <input id="vpssq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="nzh">
<legend>N zh</legend>
<p><label>500 zh und 0 value <input id="500zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1000 zh und 0 value <input id="1000zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1500 zh und 0 value <input id="1500zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
</form>
Then you can use the radio value to hide each of the appropriate sections:
$('#descriptiveNameForForm input[name="type"]').click(function () {
// hide all of the sections where the radio value is the id
$('[name="' + this.name + '"]', this.form).each(function () {
$('#' + this.value).hide();
});
// show the selected section
$('#' + this.value).show();
});
and then trigger the first radio option when the page loads, resulting in the other sections being hidden:
// trigger the first radio as the default
$('#descriptiveNameForForm input[name="type"]:first').click();
That’s about the most robust and simplest way to do it.
Here’s a test demo, which uses inline styles and scripts.
In your finished page you would use an external css and js file instead.
<html>
<head>
<style>
form {
width: 30em;
}
form p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form id="descriptiveNameForForm">
<h3>Type to use</h3>
<p><input type="radio" name="type" value="nsq"> N sq und 0 value</p>
<p><input type="radio" name="type" value="nyear"> N year und 0 value</p>
<p><input type="radio" name="type" value="vpssq"> vps sq und 0 value</p>
<p><input type="radio" name="type" value="nzh"> N zh und 0 value</p>
<fieldset id="nsq">
<legend>N sq</legend>
<p><label>14 sq und 0 value <input id="14sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>510 sq und 0 value <input id="510sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1119 sq und 0 value <input id="1119sq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>20j sq und 0 value <input id="20jsq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="nyear">
<legend>N year</legend>
<p><label>one year und 0 value <input id="oneyear-und-0-value" maxlength="10" class="form-text" type="text"></label></p>
<p><label>two year und 0 value<input id="twoyear-und-0-value" maxlength="10" class="form-text" type="text"></label></p>
<p><label>three year und 0 value<input id="threeyear-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="vpssq">
<legend>VPS sq</legend>
<p><label>vls sq und 0 value <input id="vpssq-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<fieldset id="nzh">
<legend>N zh</legend>
<p><label>500 zh und 0 value <input id="500zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1000 zh und 0 value <input id="1000zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
<p><label>1500 zh und 0 value <input id="1500zh-und-0-value" size="12" maxlength="10" class="form-text" type="text"></label></p>
</fieldset>
<input type="submit">
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$('#descriptiveNameForForm input[name="type"]').click(function () {
// hide all of the sections where the radio value is the id
$('[name="' + this.name + '"]', this.form).each(function () {
$('#' + this.value).hide();
});
// show the selected section
$('#' + this.value).show();
});
// trigger the first radio as the default
$('#descriptiveNameForForm input[name="type"]:first').click();
</script>
</body>
</html>
Because you cannot guarantee that scripting was used to submit the form, on the server-side use the radio type to determine which part of the form should be processed.