I am trying to dynamically change the options of the second selector by what the user choses in the previous one. But it only gives a syntax error.
</script>
<select name="budova" id="idBudova">
<option value="" selected="selected">Vyberte...</option>
#foreach($budovy as $budova)
<option>{{$budova->nazov}}</option>
#endforeach
</select><br>
<script>
$("#idBudova").change(function () {
if ($('#idBudova').val() >= 1) {
$('#miestnost').show();
<?php $miestnosti = Miestnosti::where("id_budovy", "=", $('#idBudova').val())->get(); ?>
} else { //here is the mistake
//how to make php see the variable
$('#miestnost').hide();
}
});
</script>
<div hidden id="miestnost">
<select name="miestnost" id="idMiestnost">
<option value="" selected="selected">Vyberte...</option>
#foreach($miestnosti as $miestnost)
<option>{{$miestnost->nazov}}</option>
#endforeach
</select></div>```
Related
Can't seem to figure this out. Value does change as it is supposed to, but "#donateForm" doesn't hide upon selection of original option.
<select id="donateSelect">
<option value="0">Select</option>
<option value="General Fund">General Fund</option>
<?php
// display all project names as options
$prj_sql = "SELECT `name` FROM `tbl_projects`";
$prj_result = mysqli_query($database_link, $prj_sql);
while ($prj = mysqli_fetch_array($prj_result)) {
echo '<option value="'.$prj['name'].' Project Fund">'.$prj['name'].' Project Fund</option>';
}
?>
</select>
<div id="donateForm">
......
</div>
<script>
$('#donateForm').hide();
$('#donateSelect').on('change', function() {
if ($('#donateSelect').val() == "0") {
$('#donateForm').hide();
} else {
var donateValue = $(this).find('option:selected').attr('value');
$('#donateForm').show();
$('#item_name').val(donateValue);
}
});
</script>
What I am trying to figure out is how to have an html input field appear when the value of other is selected from a dropdown menu. Right now the values for the dropdown list are coming from the results of a MySQL DB query, which works, but I can not seem to figure out how to get an input to appear when I select the other option.
$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query
echo '<select name="service_type">'; // Open your drop down box
echo '<option value="NULL"></option>';
// Loop through the query results, outputing the options one by one
while ($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
}
echo '<option value="Other">Other</option>';
echo '</select>';// Close your drop down box
Use javascript, like in the example below. We can add an input field and have it hidden by default, using the style attribute:
<input name='otherInput' id='otherInput' type="text" style="display: none" />
var otherInput;
function checkOptions(select) {
otherInput = document.getElementById('otherInput');
if (select.options[select.selectedIndex].value == "Other") {
otherInput.style.display = 'block';
}
else {
otherInput.style.display = 'none';
}
}
<select onchange="checkOptions(this)" name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<!-- other options from your database query results displayed here -->
<option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />
There are 3rd party libraries like jQuery, AngularJS, PrototypeJS, etc., which can be used to make the code simpler by adding shortcut methods for DOM manipulation (though you should read this post). For example, with jQuery, using .on() (for the event handler binding), .show() and .hide() for the input display toggling, etc:
var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
otherInput = $('#otherInput');
if (serviceTypeInput.val() == "Other") {
otherInput.show();
} else {
otherInput.hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
<option value="NULL"></option>
<option value="43">43</option>
<option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />
$(function() {
$('#sample').change(function() {
var val = this.value; // get the value of the select.
if (val == 'other') { // if the value is equal to "other" then append input below the select
$('html').append('<input type="text" id="inputOther"/>');
} else { // else then remove the input
$('#inputOther').remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sample">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="other">other</option>
</select>
I am using Jquery and PHP. So that on selection of first dropdown the value of first drop down should be passed to a Mysql query and then populate the second dropdown, but the second drop down displays blank.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#city").change(function() {
var value = $(this).val();
$.ajax({
type : "GET",
url : 'abc.php',
data : {
choice : value
},
success : function(data){
$('#123').html(data);
}
})
});
});
</script>
<form action="" method="post">
<select class="form-control" id="city" action="" name="city" value="">
<option value="">--</option>
<option value="1"</option>
<option value="2"</option>
<option value="3"</option>
</select>
<br/>
</div>
<div class="form-group">
<select class="form-control" action="" name="123" id="123"">
<option value="--">--</option>
<?php
$query = "SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market`='".$_GET['city']."' ORDER BY `Comm` ASC";
if ($result = mysqli_query($link, $query)) {
while ($Comm = mysqli_fetch_assoc($result)) {
print_r("<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>");
}
}
?>
</select><br/>
</div>
From our conversation in the comments you are calling the same page that you are originally loading. That is not necessarily a problem technically, it's just not implemented properly. To load the same page, you need to do:
<?php
// Make sure your database is initiated above here so this can use it.
// I am going to demonstrate a basic binding using a super basic PDO
// connection because procedural mysqli_* with bind is just annoying
$link = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
// Notice that you send "choice" as the GET key in your ajax, not "city"
if(!empty($_GET['choice'])) {
?>
<select class="form-control" action="" name="123" id="123"">
<option value="">--</option>
<?php
// prepare, bind, execute here
$query = $link->prepare("SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market` = :0 ORDER BY `Comm` ASC");
$query->execute(array(':0'=>$_GET['choice']));
// PDO has a lot of connection settings where you can set the default
// return type so you don't need to tell it to fetch assoc here.
// Also, you would tell the the connection not to just emulate bind
// etc.. I would consider using PDO or the OOP version of mysqli
while ($Comm = $query->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>";
}
?> </select>
<?php
// Stop the page from running further
die();
}
?><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#city").change(function() {
var value = $(this).val();
$.ajax({
type : "GET",
url : 'abc.php',
data : {
choice : value
},
success : function(data){
// Populate the empty container #new_drop
$('#new_drop').html(data);
}
})
});
});
</script>
<form action="" method="post">
<select class="form-control" id="city" action="" name="city" value="">
<!--
Your options are malformed. Missing close ">"
probably just copy error
-->
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/>
</div>
<!-- Add id="new_drop" to this div -->
<div class="form-group" id="new_drop">
</div>
Ideally you want to have the top part on a new page, and possibly return a set of data as opposed to straight html, but ajax is very flexible.
I have the following drop down menu on my website
<select name="Templates" onchange="document.sendform.message.value = 'some text here'; return false;">
<option value="#" selected>----Templates----</option>
<option value="#">Absense</option>
<option value="#">Lates</option>
</select>
This currently sends text to a text area named "message" however I would like the text to be different for each option selected. Is there an easy way to do this at all?
Thanks!
Here it is:
http://jsfiddle.net/sinisake/3NQH7/
<form name="sendform">
<select name="Templates" onchange="document.sendform.message.value = this.value; return false;">
<option value="#" selected>----Templates----</option>
<option value="absense">Absense</option>
<option value="lates">Lates</option>
<input type="text" value="" name="message" />
</select>
</form>
the onchange event handler is what sends the text; if you want to send text based on the value of the selected option you should use a more advanced event handler:
document.TemplateForm.Templates.onchange = function () {
var value = this.value;
if (value === 'absence') {
setMessage('Absence message');
} else if (value === 'laters') {
setMessage('Laters message');
} else {
setMessage('Default message');
}
return false;
};
function setMessage(message) {
document.sendform.message.value = message;
}
I wrapped your select element in a form to be able to adress it simply in the JavaScript above:
<form name="TemplateForm">
<select name="Templates">
<option value="#" selected>----Templates----</option>
<option value="absence">Absense</option>
<option value="laters">Lates</option>
</select>
</form>
In order to see what value is selected I also added unique values for the options elements.
Live example: http://jsfiddle.net/fRB3s/1/
I have a dropdown list(in a php file and without form tag)
print "<select id="animal" onchange="getSelectedItem(this.value)">
<option value = "Dog"> Dog </option>
<option value = "Cat"> Cat </option>
</select>";
and a variable $selAnimal
and a javascript function
function getSelectedItem(opt){
//$selAnimal = opt <- how do i do this?
}
As much as possible I wouldn't like the page to reload so I avoid putting this inside a form and submitting as I select. I can't get to make $.post method work. I know for a fact that this cannot be directly done since php is server side and javascript is client side.
I also thought of putting the selected value inside a hidden component(span or something) and get the value from it. But I have no idea how to get it from the component. I've also seen use of AJAX or jquery but I'm not really knowledgeable enough.
I need to save this value to the php variable since I'll be using it as basis for the options in my second dropdown. For example, if I choose Dog, the dropdown list would have dog breeds as options.
I've spent days looking for possible solutions everywhere. Help would be very much appreciated. Thank you!
here is the solution
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#animal').change(function(){
$.post('loadbreeds.php', { animal:$('#animal').val() },
function(data){
$('#breedList').html(data);
});
});
});
</script>
<form method="post" >
<div id="animalList">
<select id="animal" name="animal">
<option value="">--Select--</option>
<?php if (!empty($animals)) { foreach ($animals as $value) { ?>
<option value="<?php echo $value['animalKey']; ?>"><?php echo $value['animalName']; ?></option>
<?php }} ?>
</select>
</div>
<div id="breedList">
<select id="breed" name="breed">
<option value="">--Select--</option>
</select>
</div>
<input type="submit" value="Submit" />
</form>
code for loadbreeds.php
$animalKey = $_POST['animal'];
$breeds = selectByKey($animalKey); // code for selecting breeds
<select id="breed" name="breed">
<option value="">--Select--</option>
<?php if (!empty($breeds)) { foreach ($breeds as $value) { ?>
<option value="<?php echo $value['breedKey']; ?>"><?php echo $value['breedName']; ?></option>
<?php }} ?>
</select>
You cannot have the variable available to the same file since PHP declares all its variables before the JS even starts. You can however simply redirect the user to a new file where the variable is available.
Use something like this:
function getSelectedItem(opt){
location.href = location.href + "?selAnimal=" + opt;
}
In PHP, now you can use the selAnimal variable to display something different, like this:
$selectedAnimal = $_GET["selAnimal"];
if($selectedAnimal == "dog"){
// Whatever you want to do now
}
A better way would be to use POST with forms, but this should work fine for you as well.
Try the following, to rebuild the second dropdown:
http://jsfiddle.net/kAY7M/59/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
print "<script type=\"text/javascript\">var AnimalTypeList = [\"Dog1,Dog2,Dog3,Dog4\",\"Cat1,Cat2,Cat3,Cat4\"];</script>";
<script type="text/javascript">
$("#animal").change(function () {
var sel = $("#animal").prop("selectedIndex") - 1;
var list = AnimalTypeList[sel].split(",");
var Counter = list.length;
$("#type").children().remove();
for (var i = 0; i < Counter; i++) {
$("#type").append("<option value = '" + list[i] + "'> " + list[i] + "</option>");
}
})
</script>
I could do a pure Javascript only version too, but that is a bit more code.