I'm creating a new application where in I'm designing a form where the elements differ based on the selection of radiobuttonlist.
For example -
I have a radiobutton list -
Gender and options are Male and Female.
For Male:
Next element of the form will be textfield Extra Curricular activities: and students can type anything like Judo,Karate,etc.
For Female:
Next element of the form will be Dropdown Menu Extra Curricular activities: has options Dance, Ballet, etc
Based on the selection of the above radiobuttons the next elements should be displayed and the data entered will be converted into JSON format and stored in Database.
Now, to achieve this I have put the same field as dropdownlist in one div and the textfield in another div. I use jQuery to hide and show div respectively.
Note - Extra Curricular activities is used as textfield for Male children and dropdown for Female children.
Am I doing the right way.
This feels a bit hacky, but here's an example:
http://jsfiddle.net/3s8wM/
here's my "accompanied code" to make SO happy about jsfiddle links :P
What I did here was basically what you're already doing, with the difference that I'm moving the elements you don't want posted out of the form into a hidden div.
My recommendation would be to do it a bit differently, though. Why limit the female options to a dropdown while the male options are completely open? I think you're asking for trouble here - you don't want your users to feel you're being biased toward any gender.
I would opt for a dropdown for both male and female with an additional "Other..." selection. If they select that option, then show a textarea for them to add activities to. This way, you will have the same form elements to process for either male or female, and will make your development easier and more maintainable.
EDIT
To answer your question "Is this the right way to do this?", I would think not. Since you have both the textarea and the select element with the same name, you may get odd results in your $_POST variable, which is why I opted to move the elements outside of the form if you don't plan on using them when you process the $_POST variable.
Related
I've got a maybe unusual problem. I've got some 'screw shapes', and for each shape, some 'screw type'.
So, I've got several form SELECTS, related to 'screw type'. They are all hidden. They appear upon user selection on a 'screw shape' select. In other words, after the user selects a screw shape, then the related screw type select menu will appear. Thus only 1 type select will be visible at a time.
SELECT[shape]
shape-1
shape-2
etc
SELECT[types for shape 1] // visible only if shape-1 is selected
type-1
type-2
etc
SELECT[types for shape 2] // visible only if shape-2 is selected
type-1
type-2
etc
...and so on...
The data I need to retrieve is just the shape and the related type of the screw.
Issue: $_POST will contain all the types of all shapes: not good. Otherwise, I could name each type select as an array (screw[type]) and I'll end up with just one value, but that value will always be the selected (or default) option of the last type select: even worse.
What I want to get is just $_POST['screw-shape'] and $_POST['screw-type'], each with the value that user really selected.
Is there a way?
Try not only hide the inputs, disabled it as well, disabled inputs should not travel in requests
You can have multiple form elements with the same name; it's still valid HTML. Since one select will always be hidden out of the two selects for screw_type, your post variable will only have one entry for screw type. Consider
<form action="...">
<select name="screw_shape">
...
</select>
<select name="screw_type" class="hidden shape1">
...
</select>
<select name="screw_type" class="hidden shape2">
...
</select>
</form>
Toggling hidden classes as appropriate with JavaScript will take care of the form submit with the request params as you need them.
I need to create 4 dropdown list where the options are the names of the candidates (ex. 5 candidates) in a certain position (ex.Representatives). When i select a candidate from the list in the first dropdown, there will be 4 options in the second dropdown, and in the third dropdown there will be 3 options and so on. To sum it up, what is the php code for removing the list in the next dropdown upon selection without submitting it yet.
Use jQuery......jQuery help you to do validations easily. So it may take less time for client side validation
For e.g.;
$("#id_of_dropdown").change(function () {
// Some Code Here like you want to change another dropdown put if else here
});
labelEx($model,’categoryid’); ?> dropDownList($model,’categoryid’,CHtml::listData($dataReader, ‘categoryid’, ‘categorydescription’),array(‘prompt’=>’SELECT’));?> error($model,’categoryid’); ?>
I want to create a sub form depends on the categoryid value.
I have itemcatproperty table, it contain categoryid, label, controltype. If the control value is 0 means its a text box and 1 for dropdown list,2 for checkbox. If I select one categoryid from the dropdown list I want to include these controls and label names into the form.
There are two approaches:
Include the different form fields in the view file, and use javascript for hiding/showing the proper fields (or field groups) on the dropdown's onChange.
Use AJAX to load the subform on the dropdown's onChange.
Maybe make your problem a bit more concrete so we can suggest the most appropiate solution?
I'm building a web-app that allows people to select their US state from a drop-down box, displaying a telephone number for that area, however I'm having some difficulty doing so.
I've built the rest of the site in PHP and realise that this is a client side action, so I'd need to use JavaScript or Jquery.
Each state has a different number, so for example when Columbia is select I want to show the number for Columbia in a div next to the text box.
The values can be stored in a MySQL database if needed.
Any help would be greatly appreciated.
When you pull the data out to put into the drop down box store the telephone number as the 'value' of each option.
Then you can just set the div text to be $('getCheckBox').val().
$('dropdown').change(function(){
id = $(this).val();
myFucntionDoToWhateverIwantItToDo(id);
});
function myFucntionDoToWhateverIwantItToDo(id){
// Do stuff in the div, baby. The ID is stored in id.
$("div").empty().append(id);
}
Obviously replace dropdown and div with their real ids or classes
I am developing a golf website where users can track their rounds and handicaps and have a few different ideas on how the user inputs their round information. I have a table for courses and a corresponding row in another table (scorecards) that has all the courses scorecard information. The 'round recorder' is a three part form (basic, scorecard, preferences) and in the basic part of the form the course input is a autocomplete field. I was wondering if there was a way that I could use a chained select from a autocomplete field.
e.x. Course1(has 18 holes) -> List Front Nine/Back Nine (user selects one or both and than loads that scorecard from database)
Any advice or suggestions would be greatly appreciated. Thanks in advance.
This isn't the most specific answer, but basically you want to capture the "change" event of the select box. For the front or back nine, you would check whether "front", "back", or both was checked and update that accordingly within load_scorecard().
<select onchange="load_scorecard(this.value);">
and then the JS:
function load_scorecard(scorecard_id) {
// Obtain data from a database or preloaded array
// Then, update the page with the scorecard.
}