How to get and print input type number with jQuery?

Question

I want to print an input type number on confirmation page.

var displayConfirm = function() {
            $('#tab5 .form-control-static', form).each(function(){
                var input = $('[name="'+$(this).attr("data-display")+'"]', form);
                if (input.is(":radio")) {
                    input = $('[name="'+$(this).attr("data-display")+'"]:checked', form);
                }
                if (input.is(":text") || input.is("textarea")) {
                    $(this).html(input.val());
                } else if (input.is("select")) {
                    $(this).html(input.find('option:selected').text());
                } else if (input.is(":radio") && input.is(":checked")) {
                    $(this).html(input.attr("data-title"));
                } 
            });
        }

If I use input.is(":number") and $(this).html(input.val()); it crashes.

1) there is no input with the type of "number" in html. 2) show your html, this could clarify what you want to achieve. — low_rents
– low_rents, Commented Sep 15, 2015 at 8:49
there is <input type="number" name="quantity" min="1" max="5"> — guradio
– guradio, Commented Sep 15, 2015 at 8:50
@low_rents: surprise....w3.org/TR/html-markup/input.number.html :P — Milind Anantwar
– Milind Anantwar, Commented Sep 15, 2015 at 8:50
@MilindAnantwar ok, but it is maybe so new that his version of jQuery might not know about it :) — low_rents
– low_rents, Commented Sep 15, 2015 at 8:54

Milind Anantwar · Accepted Answer · 2015-09-15 08:50:05Z

1

The reason it crashed because :number is not valid selector. You need to use attribute equals selector in .is() condition:

input.is("[type=number]")

Snippet:

else if (input.is("[type=number]")) {
    $(this).html(input.val());
}

answered Sep 15, 2015 at 8:50

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

6 Comments

Aras Serdaroğlu Over a year ago

BTW, Do I need to change :text to [type:text] ?

Milind Anantwar Over a year ago

@ArasSerdaroğlu: nop.. jai already mentioned, its perfectly valid as jquery have selector :text for type text

Aras Serdaroğlu Over a year ago

one more question, I want to show a preview for input file (image) on confirmation page, how to do that?

Milind Anantwar Over a year ago

You can show them in modal along with confirm button

Aras Serdaroğlu Over a year ago

I'm listing all my inputs in a single page.

|

George · Accepted Answer · 2015-09-15 09:22:18Z

1

For completeness, you can register a jQuery pseudo selector if you wanted to stick with :number:

$.expr[':'].number = function(el){
  var $el = $(el);
  return $el.prop('tagName').toLowerCase() == 'input' && $el.prop('type') == 'number';
}

.is(':number') would then work perfectly fine for you.

JSFiddle

edited Sep 15, 2015 at 9:22

answered Sep 15, 2015 at 9:02

George

36.9k9 gold badges70 silver badges109 bronze badges

Comments

guradio · Accepted Answer · 2015-09-15 08:52:55Z

0

$('#qwe').keyup(function () {
    alert($(this).val());

});

FIDDLE

To get value of input element use .val()

answered Sep 15, 2015 at 8:52

guradio

15.6k4 gold badges39 silver badges65 bronze badges

4 Comments

Jai Over a year ago

well @pekka i guess OP is doing that. input.val()

guradio Over a year ago

@jai correct me if I'm wrong the OP wants to print a number so get the val()

Jai Over a year ago

If I use input.is(":number") and $(this).html(input.val()); it crashes.

guradio Over a year ago

because the selector is wrong :number isnt a selector right?so my answer is still valid because it is a correct selector and it prints the value of input @Jai what do you think?should i just delete the answer?

Collectives™ on Stack Overflow

How to get and print input type number with jQuery?

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related