How can i design an area for numerical input in survey?

I only know how to put a textarea in a survey. Is there a better way if the question only asks for a number?
For example, I want to ask how long a person has stayed in America. The code is as follows:

<p>01. How long have you been living in America</p>
<input type=“text” name=“01a” maxlength=“200”/> years and <input type=“text” name=“02b” maxlength=“200”/> months

Is there a better way to do it? I want the input area for numerical input only, with a length of less than 2 digits. Also, is there a way I can make sure at least one of the two blanks is not empty when they submit the survey (like 1 years and ___ months, or ____ years and 6 months)?

I guess you could use javascript to allow only numeric characters in those two fields, and you will definitely have to use Javascript to check the field values before the form is submitted to the server. But from a PHP point of view, you’ll have to validate the field values after the form has been sent. You have to do the validation in PHP anyway, because client side validation (javascript) can easily be bypassed (disabling javascript for example).

And in order to validate the value als numeric in php, you need to use a regular expression to check if the submitted value matches the expression.

Avoid giving them freeform text boxes to type into in the first place …


$years = range(0,5);

echo "<select name=year id=year>" ;  // id is DOM identifier for JS validation

foreach($years as $year)
echo "<option>$year</option>" . PHP_EOL;

echo "</select>";

$months = range(0,12);

//etc


Use JQuery to make sure that if year is 0 and month is 0 that it throws an alert onto the page.

@Cups: With regards to usability, I find a dropdown list less user friendly than an input field in this case. If you want to cover all ages from eg 1-99 years, it is gonna be a very long list of options … :slight_smile:

You can probably do it with less code if you use plain javascript instead of jquery.

Also, if 0 is invalid why make it an option in the first place?

The first option in each <select> is probably better off being “Choose a blah blah” and then make sure the first option is not the one sent to or received by the server side script in your client (optional) and server side (mandatory) validation.

@jonas-e possibly quite right in that case then, similarly I ended up removing them for some admin tasks where I know the user was a “power user” and twigged how to tab between fields too …

Using JS you can easily catch the onkeyup event and check the field contains numbers.

On the backend simply typecast the field to an integer with

$years = (int) $_POST[‘years’] ;

and then check the value > 0.

Ah smart, much easier than regular expressions …!

“easier” is a relative term.

The regex could be just /^\d$/

Using (int) is:

-easier to remember
-easier to type
-easier to read
-faster

… than using a regular expression.

like I said, “easier” is a relative term.

I prefer to use a regex - but that’s just me :wink:

If you prefer to do it some other way, that’s fine :slight_smile:

@OP:

On a side note, you have maxlength=“200” in your input fields.
This means someone could type in 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999

Which is a whole lot of years :slight_smile:

If you’re going to use a maxlength, probably it’s best to use maxlength=“2”. That way people can enter anything up to 99 years.

Excellent, if you only want to allow ages 0 through 9, and are happy to have a newline character possibly at the end of the value! :x

That’s why I said “could be” :slight_smile:

I would have thought it was obvious it would have to be modified or added to in order to suit particular circumstances.

If you go back to posts 9 and 11 where I made the comment you will see the point I was making is that “easier” is a relative term and personally I prefer to use a regex.

I’m with the people saying DON’T use a select… that REALLY torques me off when people do that on websites.

Minor nitpick, that should be a label, not a paragraph…