enable and disable functions ONLY working on text input types, suggestions?

Question

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

Can you elaborate on what you're trying to do? It's difficult to understand what you were trying to achieve. — technophobia, Jan 14 '13 at 21:55
Why not `$('#fromField').removeAttr('disabled');` instead of the `prev, prev, prev`? — codingbiz, Jan 14 '13 at 21:56
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... — A. Wolff, Jan 14 '13 at 21:59
it's not me who wrote that piece of code, but I'm trying to do @TimMedora is that when I change the input type to INTEGER, i no longer can use the functions. they only work on text fields. That's the whole thing. — , Jan 14 '13 at 21:59
"the enable and disable functions can't seem to work on integers" I don't understand what you are talking about. — A. Wolff, Jan 14 '13 at 22:01
@MohammedAtieh are you really using type=integer? or type=number? type=number disables fine in this example http://jsfiddle.net/jPYtS/ — wirey00, Jan 14 '13 at 22:13

score 2 · Answer 1 · edited May 23 '17 at 12:21

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.

"Everybody uses "text" for numbers" - not really. HTML 5 supports `` which is far more suitable, works in an increasing number of browsers, and falls back to text if not supported. — Tim M., Jan 14 '13 at 22:10
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... — tucuxi, Jan 14 '13 at 22:13
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. — Tim M., Jan 14 '13 at 22:16

insomiac · Answer 2 · 2013-01-14T22:49:52.220

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.

edited Jan 14 '13 at 22:49

answered Jan 14 '13 at 21:59

insomiac

5,648
8
45
73

4

Dude, why is this an answer? – Colleen Jan 14 '13 at 22:00
No this is a suggestion. Adding answer with this. – insomiac Jan 14 '13 at 22:03
1

I find it more readable to target ids instead of names; there may be multiple duplicate names, but ids "must" be unique... – tucuxi Jan 14 '13 at 22:15
@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. – Jan 14 '13 at 22:35
Wrote more readable code, check my updated answer. What do you mean by clone fields ? – insomiac Jan 14 '13 at 22:42
@MohammedAtieh : updated my code of html and jquery. It works fine for me with cloning. – insomiac Jan 14 '13 at 22:50
it doesn't work with cloned elements, plus, the range button doesn't work. Cloned elements should be unique, that is, by clicking the cloned exact and range buttons, the cloned elements should react...not including original or only original.@insomiac – Jan 14 '13 at 23:08
could you provide the code or values? or could you put your code on jsfiddle ? – insomiac Jan 14 '13 at 23:08
http://jsfiddle.net/zngRc/ there is somethinbg wrong with the boundaries, but that is basically it – Jan 14 '13 at 23:25
i cant see your code. you need to save or update your code and share that link again.. – insomiac Jan 14 '13 at 23:36

score 1 · Answer 3 · edited Jan 15 '13 at 01:40

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);

edited Jan 15 '13 at 01:40

lahsrah

9,013
5
37
67

answered Jan 14 '13 at 22:02

Rachel Gallen

27,943
21
72
81

enable and disable functions ONLY working on text input types, suggestions?

3 Answers3