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/
Related
Im working on a small web application that follows a basic MVC pattern. currently i have data being pulled from a database into an array and im echoing out that value into one textbox (for now)
<input type="text" name="txtGasConRes" id="gasConRes" value="<?php echo $typical; ?>" disabled/>
The $typical value is being retrieved from my Model class into my Controller class and then echoed into the textbox for gas. I have a very similar textbox for Electricity.
My dropdown is as follows:
<select name="heatingType" id="heatingType" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I was wondering if theres a way to determine where to echo the $typical value. So for example, If the user selected Gas as their heating type, then once the form was submitted it, the value would appear in the Gas textbox. If the user selected Electricity from the dropdown then the value would be echoed out into the Electricity textbox.
Any information will be appreciated.
Thanks!
This is definitely a job for JavaScript or jQuery if you prefer. You need to setup a handler to detect a change event on the select input. Once the user selects a value, then you can update the text field with text based on what the user has selected.
Not tested but something like this should work.
var select = document.getElementById('heatingType');
function updateTextField(selectedValue) {
switch(selectedValue){
case 'Gas':
return 'some text that you want in the text field';
break;
// etc.
}
}
select.addEventListener('change', function(){
var selectedValue = this.value,
textField = document.getElementById('gasConRes');
textField.value = updateTextField(selectedValue);
});
Create javascript function and put function in select box onchange event.(following code is working)
<script>
function heatingType(obj){
alert(obj.options[obj.selectedIndex].value); //if you want to show in alart
//or put in a variable
$x=obj.options[obj.selectedIndex].value;
}
</script>
<select name="heatingType" id="heatingType" onChange="heatingType(this)" required>
<option value="" disabled selected>Select Your Option</option>
<option value = "Gas">Gas</option>
<option value = "Electricity">Electricity</option>
<option value = "Other">Other</option>
</select>
I used this code to hide a selected option from dropdownmenu 2. But when a user after that changes the first option, i want tot reset the second dropdown list to prevent that the same value is selected twice.
ex.
List 1 : select A
List 2 : select B
List 1 : select B **
** How can I reset list 2 at this moment when list 1 is changed? This to prevent that list 1 and list 2 get the same value (B)!
Thanks and kind regards
HMTL:
<select name="anfang">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="secondSelect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
JavaScript:
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"]
option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].setAttribute('disabled',true);
else if(secondList[i].getAttribute('disabled'))
secondList[i].removeAttribute('disabled');
}
}
You can do this a few ways. I personally like to set it to a blank value, but you can just unselect the value you are disabling like:
if(secondList[i].value==selected) {
secondList[i].setAttribute('disabled',true);
secondList[i].selected = false;
} else if(secondList[i].getAttribute('disabled')) {
secondList[i].removeAttribute('disabled');
}
See example.
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've built a dynamically populated multiselect form for my site. When the user selects one or more items in the first select, the second is filled via jQuery.
The form works correctly except for the order the multiselect is filled.
e.g. The "product" select contains:
<select name="product_id" id="products" multiple="multiple">
<option value="#" selected="selected">Please Select</option>
<option value="1">Product 1</option>
<option value="5">Product 2</option>
<option value="4">Product 3</option>
<option value="6">Product 4</option>
(Yes, the values are not the same as the product numbers)
When a user selects one of these the jQuery call populates the next dropdown.
<select name="version_id" id="versions" multiple="multiple">
<option value="100">3.0.7</option>
<option value="101">1.0.8</option>
<option value="102">12.0.1</option>
The code fills this select and orders by "value", is there a way to force it to order by the actual content e.g. change it to:
<option value="101">1.0.8</option>
<option value="100">3.0.7</option>
<option value="102">12.0.1</option>
The success code in my call is:
success: function(versions)
{
$.each(versions,function(id,version)
{
var opt = $('<option />');
opt.val(id);
opt.text(version);
$('#versions').append(opt);
});
}
Thanks!
Thanks to #deifwud for pointing me in the right direction. In the end I added the following directly after my success function. It re-orders the results sorting by the text instead of the value.
$("#versions").html($("#versions option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
you must be doing a ajax call to a file where a sql query is executed to dynamically generate the next dropdown box.... if this is the case then you need to place the keyword "ASC" at the last of select query which is yielding your "id" in value attribute of <option value"">
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.