question about forms

I may be asking in the wrong place, and if I am I’m sorry. but I would like to know if anyone knows of a tutorial or sample of how to make a form that can change depending on inputs from the user. for example:

an option is selected in a drop down menu, then there is a text field that will be limited to a different number depending on the option selected, which in turn has another text field with a different limit depending on what was input in the previous text field.

what you need to be studying is jquery! you can change attributes of inputs and such depending on what is selected in the dropdown!
here is an example I have a form I am using right now in one of my jobs here is how it starts:
[php]

Search Jobs By: ALL Name Date Due date Order# Company Open Jobs Closed Jobs <? $na=$db("select * from plintu_users where is_contractor=1"); while($nam=mysql_fetch_assoc($na)){ echo"{$nam['fname']} {$nam['lname']}"; } ?> [/php]

but in the header I am including jquery, I also included jqueries datepicker in the form. Notice everywhere where style is display:none and name=bob, on those elements for .attr() to work there has to already be a name to change and a style to change so I gave the hidden values a generic name that will be changed to the proper name when the user selects to use those from the drop down menu, Now I wanted different things popping up and name attributes changing, depending on what the user selected in the drop down so I used the following jquery. I am certain that there is probably a more efficient way to write this jquery , I am not always the most efficient but I always get the job done :wink: here is the jquery:
[php]

[/php]

in the beginning you see $(’#choice’).change(function(){, this is where I am saying when something changes on form element with the id=choice, do this function{ next I am saying
var selected_item = $(this).val()
that means I am assigning the value of what changes to the variable selected_item
next comes the if statements

[php]if(selected_item != “”){
if(selected_item == “date”){
$(’.datepicker’).val("").attr(‘style’, ‘display:inline’).attr(‘name’, selected_item);
$(’#other’).val("").attr(‘style’, ‘display:none’).attr(‘name’, ‘bob’);
$(’#name’).val("").attr(‘style’, ‘display:none’).attr(‘name’, ‘bob’);
}[/php]
very much like php but a bit different, you just have to learn how the variables are formatted and remember elseif in javascript is else if.
so on this part here
if(selected_item == “date”){
$(’.datepicker’).val("").attr(‘style’, ‘display:inline’).attr(‘name’, selected_item);
I am saying if the user selected date in the drop down menu on the input with the class=datepicker, set the value to “” empty($(’.datepicker’).val("")),
set the style display:inline instead of display:none(.attr(‘style’, ‘display:inline’))
and to change the name of the input field to the selected item which is date(attr(‘name’, selected_item):wink:
so once the user selects date:

will turn into:

I hope this helps, definitely jquery is what you need, you could use just plain javascript but jquery is the easiest format of javascript code to learn and once you get good with it you can start adding some cool animations to your site like sliding in registration forms or bouncing in login forms etc.

Sponsor our Newsletter | Privacy Policy | Terms of Service