I have a PHP page that currently has 4 years of team positions in columns on the page. The client wants to select the players in positions and have first, second and thrid choices. Currently the page shows 4 columns with sets of combos for each position. Each combo has a full set of players in it and the user chooses the player he wants from the combos. On submit the player positions are stored in the database.
However, the client now wants to change the page so that when he selects a player in a year and position then the player is removed from the combo and can no longer be selected for that year. I've used a bit of AJAX but was wondering if anyone had any thoughts/suggestions. The page is currently quite slow so they want it speeded up as well.
The page layout is currently like this
POISTION YEAR1 YEAR2 YEAR3 YEAR4
1 COMBOC1 COMBOC1 COMBOC1 COMBOC1
COMBOC2 COMBOC2 COMBOC2 COMBOC2
COMBOC3 COMBOC3 COMBOC3 COMBOC3
2 same as above
COMBOC1, 2 and 3 all currently have the same players - when a player is selected it needs to be removed for all combos below it. I was thinking of starting by changing the page design and having text boxes for the players and a single player select under each year like this:
POISTION YEAR1 YEAR2 YEAR3 YEAR4
1 <PLAYER><POSITION><CHOICE> ...
[TEXT BOX CHOICE1]
[TEXT BOX CHOICE2]
[TEXT BOX CHOICE3]
2 ...
Then I only have 1 combo box for each year to worry about - I do however have the same problem of refreshing the combo box and removing the player that has been selected, and I'd prefer to do it withough a page submit.
Sorry for the long posting - cheers
If I am understanding your question correctly, what you want to do is remove options from subsequent select boxes depending on what is selected in the previous years' select boxes. You should not have to submit any forms to do this - you should be able to do it purely in javascript. This code should help get you started:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".year").change(function () {
var name = $(this).attr("name");
var checkYearNum = name.substr(4);
var value = $(this).val();
var removeFromLaterYears = function (index) {
var yearNum = $(this).attr("name").substr(4);
if (yearNum > checkYearNum) {
var selector = "[value='" + value[0] + "']";
$(this).children(selector).remove();
}
}
$(".year").each(removeFromLaterYears);
});
});
</script>
</head>
<body>
<form>
<fieldset>
<select class="year" name="year1">
<option value="">Select...</option>
<option value="player1">Player 1</option>
<option value="player2">Player 2</option>
<option value="player3">Player 3</option>
</select>
<select class="year" name="year2">
<option value="">Select...</option>
<option value="player1">Player 1</option>
<option value="player2">Player 2</option>
<option value="player3">Player 3</option>
</select>
<select class="year" name="year3">
<option value="">Select...</option>
<option value="player1">Player 1</option>
<option value="player2">Player 2</option>
<option value="player3">Player 3</option>
</select>
</fieldset>
</form>
</body>
</html>
Basically, all this is doing is using JQuery to set an event that, when one of the selection boxes changes, removes the selection with the same value from any following selection boxes that have a year number (defined in the "name" attribute of each select box) that is greater than the year number of the selection box that was changed.
In addition to this, you will need to keep track of which selections have been removed from which selection boxes so that they can be re-added if the player is unselected.
Since you were talking about combo boxes as well, I assume you have a text input field in addition to the select boxes, but you can use the same principle with those.
If you're not familiar with JQuery you might want to get to know it - it makes stuff like this a lot easier. This would be a good place to start: http://docs.jquery.com/How_jQuery_Works. Hope this helps.
Related
I have php search filter page in which i used different fields..One of them is Age of youngest driver field which have 2 values like 21-24 and 25+ ..Basically i only want to keep the selected values in the select box even after search so user know what he searched for ..What happen now when i select 25+ from the field and click on search it goes back to 21-24 . But As page is connected top database so it picks values from database which i enter like the database screenshot below Please check and let me know if it have any solution
<select class="half" id="form_frame" name="" onsubmit="getData(this);"/>
<option id="value1" value="21-24" selected="selected">21-24</option>
<option id="value2" value="25+">25+</option>
</select>
When i slect all values from the field and selct 25+ from driver age field then url is
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=25%2B&passengers=No.+of+Passengers&search=
http://localhost/Vehicle2/?car_type=0&pickup=0&return=0&residence_two=International&driver_age=21-24&passengers=No.+of+Passengers&search=
I want driverage=21-24 instead of driver_age
Apply onchange event in javascript like as follows if you are using jquery
jQuery(function () {
jQuery("#form_frame").change(function () {
var id = jQuery(this).val();;
location.href = "http://localhost/php-page/option"+id+"="+id
})
})
Simple use change event handler for selectbox
$(document).on('change','#form_frame',function(){
//window.location.href="http://localhost/php-//page/option"+$(this).//val()+"="$(this).val();
console.log("http://localhost/phppage/option"+$(this).val()+"="+$(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="half" id="form_frame" name="">
<option value="10" selected="selected">10</option>
<option value="11">11</option>
</select>
I am creating a form (using multiform) where I need to be able to generate checkboxes based on what is selected in the dropdown field containing teams. If one team is picked and that team plays in division 1 and division 2, I want to show division 1 and 2 checkboxes so the user can select which division they play in for that team.
Is this possible?
Yes it is possible, this is a great module that does this for dependant dropdown field, but I'm sure you can adjust for checkboxes, best of luck!
https://github.com/sheadawson/silverstripe-dependentdropdownfield
Here's the HTML Code:
<select id = "selectMe">
<option selected = "selected" value = "" >Select Here</option>
<option value = "sample1">Sample 1</option>
<option value = "sample2">Sample 2</option>
<option value = "sample3">Sample 3</option>
</select>
<div class="appendHere"></div>
Jquery:
$("#selectMe").change(function(){
$('.appendHere').append('<input type="radio" name="'+$(this).val()+'" value="'+$(this).val()+'"/>'+$(this).val()+'');
});
this will give you an idea.. =) cheerio!!
I'm working on a hotel booking project (php) and I want to create a booking-form where I will have :
Checking Date(datepicker)
Checkout Date(datepicker)
Room type (Here I want to have a dropdown menu, <select><option>Single</option></select>, and when a option is selected to show me the price of that room type, without pressing any button.)
Price (this is a text, not a textbox)(And here I want to show me the price of that room type.)
I have the query that gives me the price data from table, put I don't know how to show me without pressing any button, just when I select the "Single Room" option, the price field should be $30 (this is data from table, for example).
Can you give me an idea ? Is a specific function for <select> tag for this ?
<?php
if(isset($_POST['submit'])){
$tip = isset($_POST['roomtype']) ? mysql_real_escape_string($_POST['roomtype']) : '';
echo $tip;
}
?>
This is my php code, but its work only if I hit 'submit'. I want to work when I select the option.
Use the following example
<select class="text_select" id="field_6" name="field_6">
<option value="- Select -">- Select -</option>
<option value="Option One">Option One</option>
<option value="Option Two">Option Two</option>
<option value="Option Three">Option Three</option>
</select>
<label class="form_field">Your selected <span id="aggregator_name"></span>?</label>
and jquery
function notEmpty(){
var e = document.getElementById("field_6");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('aggregator_name').innerHTML = strUser;
}
notEmpty()
document.getElementById("field_6").onchange = notEmpty;
jsfiddle link http://jsfiddle.net/Mj4Vj/
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I'm wanting to have a dropdown on my form, the options will be titles to content in my database, I want the content to show in a ckeditor when delected.
I'm looking to do something like the below with jquery and need a little help.
if 'dropdown' value is not 'please select'
CKeditor value equals php variable from database.
end statement
I'm fairly happy getting the variables in php so just need some jquery to change the ckeditor value dependant on the dropdown not being defaulted.
Hope this makes sense and thanks in advance for any responses.
html:
<select name="select" id="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>
jQuery dont forget to include the jquery file
$(document).ready(function(){
$('#select').change(function() {
var option = $(this).val();
$.get('select.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});
your php file (select.php)
if(!empty($_GET['select'])) {
//call database and bring back the content for this selection and echo it
}
First you would need to populate the "option" elements of your select box using php, which I believe you said you are comfortable with.
Then, using jQuery:
$(document).ready(function(){
$('#myCKEditorTextArea').text($('#mySelectBox').val());
});
for pre-population on page load, or:
$('#mySelectBox').change(function(){
$('#myCKEditorTextArea').text($(this).val());
});
for population when the user changes the select box value.