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..
views:
208answers:
2
+2
A:
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" />');
}
}
gmcalab
2010-03-24 13:24:02
Thanks.....................
Hulk
2010-03-24 13:27:17
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
PatrikAkerstrand
2010-03-24 13:27:40
That is going to put 4 textboxes in the div, not 3. You need to change that to i<parseInt.
ryanulit
2010-03-24 13:28:32
i<=parseInt(val) should be i<parseInt(val) ;)
Bastiaan Linders
2010-03-24 13:28:58
@ryanulit - fixed thanks man, sorry its early :P
gmcalab
2010-03-24 13:30:57
I hear that :).
ryanulit
2010-03-24 13:31:51
Gah! What's with the obtrusive event handling?
J-P
2010-03-24 13:40:49
@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.
gmcalab
2010-03-24 13:45:02
The onKeyDown handler will lead to the following behavior: User enters "3" -> 3 boxes are generated. User corrects himself, deletes 3 -> nothing happens. User types "4" -> four additional boxes are added (so you have 7). So you should either check for the number of existing boxes in #myDiv and add/remove boxes as needed. Or you use $('#myDiv').empty().append('<input type="textbox" />'); But with this the user will lose all text that was entered before in the boxes.
chiborg
2010-03-24 13:45:51
@gmcalab, if you know of the right way then why did you show him the wrong way? It's important to demonstrate good practices, even when they're not directly related to the core question. There are other issues with your code, which I won't dare go into now. My vote was not unwarranted -- I don't see this as a good answer.
J-P
2010-03-24 13:47:44
A small suggestion, rather than looking up the #myDiv each time it would be better to store it as var container = $('#myDiv'); once and reference the container for each append operation.
Brian Scott
2010-03-24 13:53:44
@J-P - Good point. And yes, I like your solution better. I give you +1 :)
gmcalab
2010-03-24 14:20:39
+7
A:
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
J-P
2010-03-24 13:44:36
Might be helpful for most readers if you explain the double bitwise NOT flooring. :)
miketaylr
2010-03-24 14:00:38