Use jquery to prevent the others type?

1 ,<input id="14sq-und-0-value" size="12" maxlength="10" class="form-text" type="text">

2 ,<input id="510sq-und-0-value" size="12" maxlength="10" class="form-text" type="text">

3 ,<input id="1119sq-und-0-value"  size="12" maxlength="10" class="form-text" type="text">

4, <input id="20jsq-und-0-value" size="12" maxlength="10" class="form-text" type="text">

5 ,<input id="oneyear-und-0-value"  maxlength="10" class="form-text" type="text">


6 ,<input id="twoyear-und-0-value"  maxlength="10" class="form-text" type="text">

 7 ,<input id="threeyear-und-0-value" size="12" maxlength="10" class="form-text" type="text">

8  <input id="vpssq-und-0-value" size="12" maxlength="10" class="form-text" type="text">

9 <input id="500zh-und-0-value"  size="12" maxlength="10" class="form-text" type="text">

10  <input id="1000zh-und-0-value" size="12" maxlength="10" class="form-text" type="text">

 11  <input id="1500zh-und-0-value" size="12" maxlength="10" class="form-text" type="text">

now, i want to do, if the editor type content to 1, 2, 3 4 input box and finished namely the 1 ,2,3 4have value , then he can’t type anything to the rest.

if the 5,6,7, input box has value. then can’t type anything to the rest.

if the 8, input box has value. then can’t type anything to the rest.

if the9,10,11, input box has value. then can’t type anything to the rest.

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.

many thanks. you answer is great. if i don’t want toi alter the html structure. is there a way to get that. thank you

Let’s use a map to keep track of the different groups.
To achieve that, we’ll put all of the existing scripting inside a jQuery object so that we can run the code when the document is ready:


$(function () {
    ...
});

The first thing to do is to gain a reference to the form, and add our designated groups as data to the form.


var form = $('#descriptiveNameForForm');

$(form).data('groups', {
    nsq: $('#14sq-und-0-value, #510sq-und-0-value, #1119sq-und-0-value, #20jsq-und-0-value'),
    nyear: $('#oneyear-und-0-value, #twoyear-und-0-value, #threeyear-und-0-value'),
    vpssq: $('#vpssq-und-0-value'),
    nzh: $('#500zh-und-0-value, #1000zh-und-0-value, #1500zh-und-0-value')
});

The click event can now retrieve those groups, and hide them:


$('input[name="type"]', form).click(function () {
    var groups = $(this.form).data('groups');
    
    // hide all of the groups
    $.each(groups, function (key, group) {
        group.hide();
    });
    ...
});

and once they’ve been hidden, you can then show the appropriate group:


$('input[name="type"]', form).click(function () {
    ...
    // show the selected group
    groups[this.value].show();
});

Lastly is just the clicking the first radio option, to trigger the function.


// trigger the first radio as the default
$('input[name="type"]:first', form).click();