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
});
Related
Programming in Bootstrap and PHP I am trying to create a dynamic form which has the following.
User uses a dropdown to select number from 1 to 10.
The page then displays x number of dropdowns.
Each dropdown is the same and displays a list of userID from a MySQL table tblUsers
Once the user makes a selection from each dropdown, it then shows a second dropdown immediately underneath showing a list of videos from a second MySQL table tblVideos. Meaning that the second dropdown is based on the results from the first.
Once all dropdowns have been selected. Submit is pressed and the results are sent as an array to the table tblVideoStored
Any ideas how the PHP and MySQL would be in a simple form..
Based on what you plan to achieve, you may want to look into combining php with ajax (Javascipt). Below are some examples that should set you on the right path
https://www.sitepoint.com/community/t/using-ajax-to-populate-dropdown-menu/4350/2
http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/
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.
I have 2 select items.
In the first one I'm loading the options from a MySQL database table using PHP.
The second one I want to load the fields from another table where for example category field equals the value of the item selected on the first tag.
I have no idea about how I can make the second select tag load the options dynamically. I know I need to use Ajax I guess.
I've found this, but it doesn't help too much since the options of the first select tag depend on what it can find in the database.
// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
foo: ['lorem', 'ipsum'],
bar: [1,2,3],
baz: []
}
Then I need to add a 'change' event to the first dropdown, and given the value of that dropdown, load the contents of the second dropdown with the values contained in the secondData object, but I can't apply this.
If you want to get the values for the second dropdown from a database, then you do need ajax.
See this post:
Populate dropdown 2 based on selection in dropdown 1
A couple of other good posts re the basics of AJAX:
A simple example
More complicated example
I have 6 select boxes (sbs), 3 to a row so two rows. The top three sbs contain a list of options that gets populated via php, data is pulled back from mysql. When an option from each box is selected I'm using jquery (via ajax) to pull back option items for the sb immediately below it and populate said sb with corresponding data. I click 'create' and the data is sent via ajax to a php script which then stores the data in a table and returns the submited dropdown data (albeit formatted) in a table below the form. So you might have something that looks like this after creating a 'combination'. Eveyrthying to the left of the colon was an option on the top row of select boxes and then you have selected options from the corresponding box below displayed to the right.
Color: Red | Capacity : 4GB | Model : ABC | EDIT
Color: Blue | Speed: 2GHZ | Capacity : 2GB | EDIT
etc.
If I want to edit the record I click edit and jquery finds the id of the edit button clicked, passes it via ajax to another php script which then returns a json object with the relevant data and this is then used to repopulate the dropdown boxes with the selected options. Everything so far works fine.
My problem is this, only the top row of sbs get one of the options selected when edit is clicked. The child options don't get selected and I can't figure out why. I can get the right options to display but can't set the selected state for whatever matching value is returned in my json object. I've been 8 hours trying to figure it out and tried various things on SOverflow and other sites, none of worked - i'm not that experienced with javascript/ajax to be honest.
Upon a successful ajax process i.e success: I am doing the following:
var jObj = $.parseJSON(html);
//parentVariations# is the select boxes in the top row where
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for
//populating the corresponding child select box with relevant data.
$('#parentVariations1').val(jObj.groupAttr1).trigger('change');
$('#parentVariations2').val(jObj.groupAttr2).trigger('change');
$('#parentVariations3').val(jObj.groupAttr3).trigger('change');
//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
$("#childVariations1 option").attr('selected','selected');
}
});
Any help would be very welcome as it's driven me over the edge.
$("#childVariations1 option") is an array of all the options. You need to specify which one:
$("#childVariations1 option").eq(1).attr('selected','selected');
If your case, use a for loop and use the index for get the current position, instead of using .each. (or set up a counter)
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