When I choose an option in my dropdown, I want to take it's MySQL table ID and put it in a hidden input box. The MySQL table rows are correct, but the input box never changes.
I'm using this to try to retrieve the value:
$('.theNum').click(function() {
$('#menu2').html($(this).text() + '<span class="caret"></span>')
})
$(function() {
//Listen for a click on any of the dropdown items
$(".theNum").click(function() {
//Get the value
var value = $(this).attr("value");
//Put the retrieved value into the hidden input
$("input[name='theNum']").val(value);
});
});
And this HTML code, with the hidden input box:
<div class="form-group" >
<select name="companies" class="form-control " id="companies" >
<option value="" disabled selected id="menu2"> Selecione a empresa </option>
<?php
while ($row = $result->fetch_assoc()) : ?>
<option name = 'theNum' value="<?= $row['id']; ?>"> <?= $row['nome']; ?> </option>
<?php endwhile ?>
</select>
</div>
Thank you for your help!
You don't listen for clicks on options. You should listen for change of the <select>, and get its value.
$("#companies").change(function() {
$("input[name='theNum']").val($(this).val());
});
Related
I have a dropdown list populated from a database query. Options are 1, 2, 3, etc. When an item is selected, I want the value of the comp_id (for example "1") to go in the placeholder of an input field of a form. When the form is submitted, the value of the placeholder will then be inserted in another table in the database (together with other data) via an INSERT statement. This is my code:
<?php
echo "<label>Please select the Competition: <select name='opt'>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['comp_id'] ."'>" . $row['compname'] ."</option>";
}
echo "</select></label>";
print_r($row['comp_id']);
?>
And this is part of the form:
<input type="text" name="comp_id" placeholder=" (the value from the selected item ">
I can't seem to find a solution despite the countless searches I have made. Very grateful for your help. Thanks.
You can use jQuery
HTML
<select name="opt">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="text" name="comp_id" placeholder="(the value from the selected item)">
jQuery
$("select[name=opt]").on("change", function(){
var val = $(this).val();
$("input[name=comp_id]").attr( "placeholder", val );
});
Demo
Note: Only values of input fields will be posted on form submission. Placeholders will not be posted on form submission.
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 have html form which is saving some data to mysql database. Now I want to create an edit page for that form which will return data from mysql database to form fields for editing and then update.
In html form i have some input fields which are disabled by default until dropdown menu is set to for example 'Yes'. When the dropdown menu option is set to yes, input field gets enabled.
I created that in jquery and it looks like this:
$(document).ready(function() {
$('#lijecnickipregled').change(function(){
if($('#lijecnickipregled').val() === 'YES')
{
$("#lijecnicki").prop('disabled',false);
}
else
{
$( "#lijecnicki" ).attr( "disabled", "disabled" );
}
});
});
Now when I'm creating edit page I managed to return value from database to dropdown menu and it is set to YES, but input field with ID "lijecnicki" is still disabled for editing until I choose some other option in dropdown menu and then put it back on YES.
Here is the HTML code of dropdown menu:
<div class="fitem" >
<label>Liječnički pregled</label>
<select name="Lijecnicki" id="lijecnickipregled">
<option value="" selected="selected"></option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
</div>
HTML code of input field which is being enabled when dropdown option is set to YES:
<div class="fitem" id="datumzadnjeglijecnickogpregleda" >
<label>Datum zadnjeg lijecnickog pregleda</label>
<input name="DatumZadnjegLijecnickogPregleda" id="lijecnicki" type="text" class="lijecnicki" disabled/>
</div>
And here is PHP code on edit page:
<div class="fitem" >
<label>Liječnički pregled</label>
<select name="Lijecnicki" id="lijecnickipregled">
<option value="" selected="selected"></option>
<?php
$LijecnickiPregled = array(
'YES',
'NO',
);
$lp = $s['Lijecnicki'];
?>
<?php foreach ($LijecnickiPregled as $pregled): ?>
<option <?php echo $lp == $pregled ? 'selected="selected"' : '' ?> value="<?php echo $pregled ?>"><?php echo $pregled ?></option>
<?php endforeach ?>
</select>
</div>
You are only checking the value of lijecnickipregled when it changes; you should be checking it at load time.
I'm new in PHP.. I need your help..
I have 2 dropdownlist that related:
dropdown 1 : manually insert the value
dropdown 2 : attach value from database (value based on condition that selected in dropdown 1)
Then, both value which are selected will display in textbox at another form.
My problem is:
1) The value in 2nd dropdown can't be display.
2) The value in 1st dropdown can pass to other form but the 2nd can't.
Please kindly guide me.
I don't know how to share my code here.
form1.php
//1st dropdown
<select name="fruit_name" id="fruit_name" style="font-family: Calibri;font-size: 10pt;" onchange="loadXMLDoc(this.value); ">
<option value="0">-- please choose --</option>
<option value="Pineapple">Pineapple</option>
<option value="Apple">Apple</option>
//2nd dropdown
$fruit_name = $_POST['fruit_name'];
#Connect to MySQL
#Connect to database
$result = mysql_query("SELECT colour FROM fruit WHERE fruit_name = '$fruit_name'");
echo "<select name='colour' id='colour' style='font-family: Calibri;font-size: 10pt;'>";
while($row = mysql_fetch_assoc($result))
{
echo "<option value = ''>" . $row['colour'] . "</option>";
}
echo "</select>";
mysql_free_result($result);
//Closes specified connection
?>
form2.php
<?php
//connection
$fruit_name = $_POST['fruit_name'];
$colour = $_POST['colour'];
?>
<label>
<input type="text" name="fruit_name" id="fruit_name" value = "<?php echo $fruit_name;?>" readonly>
</label>
<p>
<label>
<input type="text" name="colour" id="colour" value="<?php echo $colour;?>" readonly>
</label>
</p>
I usually don't do this but since I've some spare time on hand right now, I'm going to give the general approach that you can follow:
Include the following between your <head> tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Below that, paste this code
<script type="text/javascript">
$(function(){
$('select#fruit_name').change(function(){
var selectedVal = $(this).val(); // get the selected value
$.ajax({ // send ajax request to the php file to process data
type:'post',
url:'php-page-name.php',
data:{'value':selectedVal},
success:function(ret) // display the result from php-page-name.php page
{
$('div#result').html(ret);
}
});
});
});
</script>
Lets move on to your HTML now
<select name="fruit_name" id="fruit_name" style="font-family: Calibri;font-size: 10pt;">
<option value="0">-- please choose --</option>
<option value="Pineapple">Pineapple</option>
<option value="Apple">Apple</option>
</select>
<div id="result">
<select>
<option>Select One</option>
</select>
</div>
php-page-name.php page (Do not forget to create this page and put it in the same folder as form1.php)
<?php
// put the code to connect to your database here
$fruit_name = $_POST['value']; // this will contain the value selected from first dropdown
$result = mysql_query("SELECT colour FROM fruit WHERE fruit_name = '$fruit_name'");
echo "<select name='colour' id='colour' style='font-family: Calibri;font-size: 10pt;'>";
while($row = mysql_fetch_assoc($result))
{
echo "<option value = '".$row['colour']."'>" . $row['colour'] . "</option>";
}
echo "</select>";
mysql_free_result($result);
?>
PS : I'm using the mysql_* functions in this example since I'm assuming you're too. But this is not recommended as they are going to be deprecated soon. You might want to switch to mysqli or PDO
I'm trying to change the value in an input when a different option gets selected from a select:
View image here.
The idea is that for each ad package you can have a different number of images (free gets 0 images, $20 for 4 images etc.). With this number I then want to display the correct amount of upload fields for images.
I'm already retrieving the values from the database for the number of images for each package as you can see in the code below:
<select name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
I've tried getting the value from the select directly by doing:
mainform.ad_pack_id.options[selectedIndex].class.innerHTML
but this isn't getting the number of images.
How can I get the number of images for the selected ad package without submitting the form first?
you could also try jquery:
$("#ad_pack_id option:selected").val()
this should get you the value. to show/hide upload fields you can use for example the CSS display attribute:
$("#uploadfield_1").css("display", "none")
$("#uploadfield_1").css("display", "block")
try this:
document.mainform.ad_pack_id.options[Selected].className;
This code will set the input's value to the selected option's value.
I just added "id" attribute to select menu
<select id="ad_pack_id" name="ad_pack_id" class="dropdownlist required">
<?php foreach ( $results as $result ) { ?>
<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>
</select>
<input type="hidden" value="" name="packimages" id="packimages" />
<script type="text/javascript">
var selectmenu = document.getElementById("ad_pack_id");
selectmenu.onchange = function()
{ //run some code when "onchange" event fires
var chosenoption = this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing")
{
document.getElementById("packimages").value = chosenoption.value ;
}
}
</script>