SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    use jquery to prevent the others type?

    Code:
    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code html4strict:
    <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:

    Code 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();
    });

    and then trigger the first radio option when the page loads, resulting in the other sections being hidden:

    Code javascript:
    // 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.

    Code html4strict:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    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:

    Code javascript:
    $(function () {
        ...
    });

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

    Code javascript:
    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:

    Code javascript:
    $('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:

    Code javascript:
    $('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.

    Code javascript:
    // trigger the first radio as the default
    $('input[name="type"]:first', form).click();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •