Question

I have a simple case. I want two things.

1. Put label next to the input.
2. Some sort of validation, only digit number for the text box.

The corresponding link is here.

Now the input is below the label.
My code:

<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block; width: 400px;">
    How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
    <option value="sameAsID">Same as ID</option>
    <option value="appendID">AppendID</option>
</select>

Answer 1

First, remove the “inline-block” from your label and add the for attribute like so:

<label for="newInmateCount" style="width: 400px;">How many?</label>

As for the input, do this for numeric only:

$("#newInmateCount").keydown(function(e) {
    if (e.which == 8 || e.which == 46) return true; // for backspace and delete
    if (e.which < 48 || (e.which > 57 && e.which < 96) || e.which > 105) return false;
});

See your jsFiddle Updated