0

I tried changing the input type of the input tags but the enable and disable functions can't seem to work on integers, only on text fields. How can I fix that?

My submission is tomorrow, and here is my search code:

 <script type="text/javascript">

            $('#exactButton').live('click', function(){
                $(this).prev().prev().prev().prev().prev().removeAttr('disabled');

                $(this).prev().prev().prev().attr('disabled',true);
                $(this).prev().prev().prev().prev().attr('disabled',true); 
            });

            $('#rangeButton').live('click',function(){
                $(this).prev().prev().removeAttr('disabled');
                $(this).prev().prev().prev().removeAttr('disabled');

                $(this).prev().prev().prev().prev().attr('disabled',true);
            });

        })
    </script>

And this is my HTML code:

 <button id="button">Add List</button><br><br>
        <form id ="form" name="search" method="get" action="test.php">
            <div id="div">
                <select name ="select" >
                    ...options...
                </select>

                Value:<input type="text" name="exact" id="exactField" />

                From: <input type="text" name="from" id="fromField" />
                To: <input type="text" name="to" id="toField" />

                <br>
                <input type="button" name="answer" value="Range" id="rangeButton" />
                <input type="button" name="answer" value="Exact" id="exactButton" />

            </div>
            <br>
            <input type="submit"name="search" value="Submit">
        </form>

Thank you in advance..

Improve this question
8
  • 4
    Using prev() like that makes this code almost unreadable. Commented Jan 14, 2013 at 21:53
  • 2
    Can you elaborate on what you're trying to do? It's difficult to understand what you were trying to achieve. Commented Jan 14, 2013 at 21:55
  • 1
    Why not $('#fromField').removeAttr('disabled'); instead of the prev, prev, prev? Commented Jan 14, 2013 at 21:56
  • 2
    You shouldn't use live(), use .on() instead. You shouldn't chaining .prev() method, use better selector (id?) instead. You shouldn't use removeAttr('disabled'), use .prop('disabled',false) and .prop('disabled',true) instead of .attr('disabled',true). Wow, i think thats enough... Commented Jan 14, 2013 at 21:59
  • 1
    "the enable and disable functions can't seem to work on integers" I don't understand what you are talking about. Commented Jan 14, 2013 at 22:01

3 Answers 3

Reset to default
2

There is no input type "integer". There is only text, password, checkbox, radio, submit, reset, file, hidden, image, and button as per HTML 4. Most sites use "text" for numbers; this lack of specificity is one of the original reasons for JavaScript: to detect people entering letters into text-fields intended for numbers (and/or to warn them that they need to fix those values before submitting).

In HTML 5, additional input types were added: search, tel, url, email, datetime, date, month, week, time, datetime-local, range, and color are now available; this makes markup more readable, and allows developers to leave some of the client-side validation to the browser.

The currently-recommended way to make numerical inputs is to use type="number". Older, non HTML 5 browsers render unknown types as type="text", so nothing is lost when support is not available.

See jQuery - Disable Form Fields for the correct way of enabling/disabling fields. The type of the input fields is irrelevant - jquery is smart enough to do the right thing for you.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

"Everybody uses "text" for numbers" - not really. HTML 5 supports <input type="number"> which is far more suitable, works in an increasing number of browsers, and falls back to text if not supported.
You are right @TimMedora; on the other hand, not that many pages use HTML5 features; many seem to be stuck on the HTML 4 standard...
Perhaps, but the way to change that is to encourage people to use the more semantic/functional counterparts. Regardless, it's still not clear what the OP is looking for.
1

First of all. Don't use "live" api of jquery it is going to be deprecated. http://api.jquery.com/live/

Note : for "on" api you need latest jquery.

Are you trying to do this

Updated HTML

        <button id="button">Add List</button><br><br>
          <form id ="form" name="search" method="get" action="test.php">
           <div id="maindiv">
             <div id="div">
            <select name ="select" >
                ...options...
            </select>

            Value:<input type="text" name="exact" id="exactField" />

            From: <input type="text" name="from" id="fromField" />
            To: <input type="text" name="to" id="toField" />

              </div>
            </div>
            <br>
            <input type="button" name="answer" value="Range" id="rangeButton" />
            <input type="button" name="answer" value="Exact" id="exactButton" />
        <br>
        <input type="submit"name="search" value="Submit">
    </form>

Updated javascript

           // When exact button is clicked, disable from and exact field and enable exactfield text field
    $(document).live('click','#exactButton', function(){
        $('#exactField').removeAttr('disabled');
        $('#fromField,#toField').attr('disabled',true);
    });

    // When range button is clicked, enable from and exact field and disable exactfield option
    $(document).on('click','#rangeButton',function(){
        $('#fromField,#toField').removeAttr('disabled');
        $('#exactField"]').attr('disabled',true);
    });

    $('#button').click(function(){
       $('#maindiv').append($('#div').clone());
     });

This code works for me with number as well as characters. Let me know if i am missing anything.

Improve this answer

10 Comments

Dude, why is this an answer?
No this is a suggestion. Adding answer with this.
I find it more readable to target ids instead of names; there may be multiple duplicate names, but ids "must" be unique...
@insomiac thanks for your time. the first function is to disable from and to, and enable exact. The second button (rangeButton) enables from to and disables exact. The select (drop list) is ALWAYS enables. And when I clone these fields, it won't work for the cloned fields, just the original.
Wrote more readable code, check my updated answer. What do you mean by clone fields ?
|
1

What version of jquery are you using?

In 1.6 anyway, to change the disabled property you should use the .prop() function.

e.g $(this).prop('disabled', true);

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.