if a user types in an input say 3 into a text box three small text boxes should be shown below or in a popup through javascript or jquery .How can this be done...
<input type="text" name="order">3</input>
Thanks..
Add a comment
|
2 Answers
Give the <input/> an id of "order", then it's as simple as:
var order = $('#order'),
container = $('<div/>').insertAfter(order);
order.keyup(function(){
container.html(
Array(Math.abs(~~this.value) + 1).join('<input/>')
);
});
FYI, ~~ (double-bitwise-not) has the effect of getting the number representation of any type (using the internal toInt32 operation) and then flooring it. E.g:
~~'2'; // => 2
~~'2.333'; // => 2
~~null; // => 0
And Math.abs is to protect against negative values, that will throw an error if passed to Array().
DEMO: http://jsbin.com/azexa4
1 Comment
miketaylr
Might be helpful for most readers if you explain the double bitwise NOT flooring. :)
Keep in mind you should probably mask the textbox to allow only numerical entries...Or maybe use a drop down list with a list of numbers to prevent error. But here is a great jquery mask plugin to prevent non-numerical entries.
<input type="text" name="Order" onKeyDown="checkVal(this)">3</input>
<div id="myDiv">
</div>
function checkVal(ctrl){
var val = ctrl.value;
$('myDiv').html(''); // remove existing elements
for (i=0;i<parseInt(val,10);i++){
$('#myDiv').append('<input type="text" />');
}
}
9 Comments
PatrikAkerstrand
Always specify the radix as the second parameter to parseInt. This ensures that input like 0xAF and similar input isn't parsed in an undesired radix
ryanulit
That is going to put 4 textboxes in the div, not 3. You need to change that to i<parseInt.
Bastiaan Linders
i<=parseInt(val) should be i<parseInt(val) ;)
James
Gah! What's with the obtrusive event handling?
Gabe
@J-P its a simple example. I showed the logic of how to add the textboxes simply. The question didn't ask about anything regarding event handling. I'm betting he will use a submit button or something. Thanks for the down vote, unwarranted.
|