this is my code for dropdown list,plz guide me.
<div class = "form-inline">
<label class = "">Situation</label>
<select selected="" name="sit" id="situ" class='form-control'style="margin-left: 30px; width: 145px;">
<option value="" >select</option>
<?
if ($situation != '') {
$revise = $situation;
}
foreach ($revise as $row):
?>
<option value="<?= $row['id']; ?>"><?= $row['situation']; ?></option>
<? endforeach; ?>
</select>
</div>
For the item you want selected for a dropdown list, add the attribute selected.
Eg.
<select>
<option value="0">0</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
In this case, 1 will be selected.
To get the value of this dropdown after form submit, it depends on the method of your form being POST or GET.
In this example, I'm assuming it's POST. <form method="POST">
<div class = "form-inline">
<label class = "">Situation</label>
<select selected="" name="sit" id="situ" class='form-control'style="margin-left: 30px; width: 145px;">
<option value="" >select</option>
<?
if (isset($_POST['sit']))
$selected = $_POST['sit'];
if ($situation != '') {
$revise = $situation;
}
foreach ($revise as $row):
$selectedHTML = '';
if (isset($selected) && $row['id'] == $selected)
$selectedHTML = ' selected="selected"';
?>
<option value="<?= $row['id']; ?>"<?= $selectedHTML; ?>><?= $row['situation']; ?></option>
<? endforeach; ?>
</select>
</div>
You can try something like this.
if (isset($_POST['sit']))
$selected = $_POST['sit'];
What this does is check if $_POST['sit'] value is found. If yes then we'll make that $selected, else we'll leave it.
$selectedHTML = '';
if (isset($selected) && $row['id'] == $selected)
$selectedHTML = ' selected="selected"';
And then in the foreach loop, we will first initialize $selectedHTML as empty string. It will not add anything to <option> unless it got its value changed.
We will check if $selected is defined or not and if it is, we will check if the current value of $row['id'] within the foreach loop is equal to the submitted value which is $selected. If so, we will set $selectedHTML which will add selected="selected" only to the current <option>.
Related
Using Laravel 8 + Livewire:
I was following this tutorial of creating a dynamic dropdown: https://www.itsolutionstuff.com/post/laravel-livewire-dependant-dropdown-exampleexample.html
I have this dropdown component:
public $suppliers;
public $beans;
public $selectedSupplier = NULL;
public function mount()
{
$this->suppliers = Supplier::whereHas('greenBeans')->get();
$this->beans = collect();
}
public function render()
{
return view('livewire.admin.supplier-beans-dropdown')->layout('layouts.admin.livewire');
}
public function updatedSelectedSupplier($supplier)
{
if (!is_null($supplier)) {
$this->selectedSupplier = Supplier::find($supplier);
$this->beans = $this->selectedSupplier->greenBeans;
}
}
The component's blade:
<div>
<div class="form-group">
<label for="supplier" class="col-md-4 form-label">Supplier</label>
<select wire:model.lazy="selectedSupplier" class="form-control">
<option value="" selected>Select Supplier</option>
#foreach($suppliers as $supplier)
<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
#endforeach
</select>
</div>
#if (!is_null($selectedSupplier))
<div class="form-group">
<label for="bean" class="form-label">Green Bean</label>
<select class="form-control" name="bean" wire:model.lazy="selectedBean">
<option value="" selected>Select Green Bean...</option>
#foreach($beans as $bean)
<option value="{{ $bean->id }}">{{ $bean->name }}</option>
#endforeach
</select>
</div>
#endif
I have an other component that needs to call this dropdown. So in this parent component I have this var: $selectedSupplier and in the view I call the dropdown component:
#livewire('admin.supplier-beans-dropdown')
When I select a supplier and submit the form, the selectedSupplier is null.
So how do I use this dropdown in different components?
How do I send the selected value to the parent component?
check this first I think you have some errors here. you have:
public function updatedSelectedSupplier($supplier)
{
if (!is_null($supplier)) {
$this->supplier = Supplier::find(supplier); --> typo error here???
$this->beans = $supplier->greenBeans; --> $supplier parameter is an ID???
}
}
and I think it should be:
if (!is_null($supplier)) {
$this->supplier = Supplier::find($supplier);
$this->beans = $this->supplier->greenBeans;
}
I am using bootstrap framework to create a simple form that will be used to edit a SQL db record. To be concise, I have only posted a small snippet of code, a Select List input only. How do I automatically set a specific value from the list? I expected that I could use
<select class="form-control" id="..... value="Option1">
but that did not work. My ultimate outcome is to set the value using a SQL query.
<!--- Location Drop Down--->
<form class="form-horizontal" role="form" method="post" action="post_record.php">
<div class="form-group">
<label for="inputLocation" class="col-sm-2 control-label">Location</label>
<div class="col-sm-4">
<select class="form-control" id="inputLocation" name="inputLocation" value="Option1">
<option value="0">Please Select</option>
<option value="1">Option1</option>
<?php
$servername = "localhost";
$username = "*********";
$password = "*********";
$dbname = "**********";
// Create Connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (!$conn) {
trigger_error("Connection failed: " . mysqli_connect_error());
}
if ($conn) {
echo "success";
}
$stmt = "SELECT DISTINCT `ACT_LOCATION` FROM `actual_data`";
$result = mysqli_query($conn,$stmt) or die(mysqli_error());
while(list($category) = mysqli_fetch_row($result)){
echo '<option value="'.$category.'">'.$category.'</option>';
}
?>
</select>
</div>
</div>
Add attribute selected="selected" for the <option> that you want to be default selected option :
<option value="1" selected="selected">Option1</option>
NO JQUERY! When the user selects Have a Baby or Military leave radio buttons pop up. I am having trouble getting the values of the selected buttons and changing the innerHTML with id="choice" to the value. Can someone please help??
http://jsfiddle.net/73Vq9/
<html>
<head>
<script>
//this function deals with changing the event
function changeMessage(oElement) {
//have a baby
if (oElement.value == "100") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "inline-block";
document.getElementById("rd1").innerHTML = "C-Section";
document.getElementById("rd2").innerHTML = "Regular Birth";
document.getElementById("rd1").value = "C-Section";
document.getElementById("rd2").value = "Regular Birth";
//military leave
} else if (oElement.value == "15") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "inline-block";
document.getElementById("rd1").innerHTML = "Training";
document.getElementById("rd2").innerHTML = "Active Duty";
document.getElementById("rd1").value = "Training";
document.getElementById("rd2").value = "Active Duty";
//no value, the first, blanck value
} else if (oElement.value == "0") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "none";
} else {
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
}
return;
}
</script>
</head>
<body>
<div style="margin-left:250px;">
<select id="leave" onchange="changeMessage(this);">
<option value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
<button id="btn" style="display:none" onclick="getInfo()"type="button">Process</button>
</div>
<div id="radio" style="display:none">
<div id="rd1"></div><input type="radio" name="sex" value="" />
<div id="rd2"></div><input type="radio" name="sex" value=""/>
</div>
<div id="choice">Radio Choice</div>
Your input values are never set so will always be null.
When you changed your code in your previous question https://stackoverflow.com/questions/12091968/javascript-function-not-changing-input-types you moved the id from the input to a <div> so your JavaScript is no longer setting the input's value.
You need to change the JavaScript to set the input correctly and then something like:
HTML
<input type="radio" name="sex" value="" onclick="showChoice(this)"/>
JavaScript
function showChoice(input) {
document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
}
should append the selected input's value in the <div id="choice">
Hi I have 3 Controls on my Razor Form. 1) combobox, 2) DropdownSelect 3) Text Input.
First I select value from Combobox and as a result i add options to DropdownSelect. After i select a value from DropdownSelect, i want to enable or disable the 3rd input box.
I am able to populate 2nd Dropdown select when i select a value in 1st Combobox. But I am not able to enable or disable the 3nd input box based on 2nd Dropdown value change.
Here is sample Code.
<input type="text" dojoType="dijit.form.ComboBox" style="margin-top: 5px;" class="left" store="regionStore" queryExpr="${0}" hasDownArrow="true"
searchAttr="text" labelAttr="name" title="Region" id="Plan_RegionName" jsId="Plan_RegionName" name="Plan.RegionName" required="true" placeholder="None" ignoreCase="true" />
<select name="Plan.PlanType" id="Plan_PlanType" title="Plan Type" dojoType="dojox.form.DropDownSelect" required="true" maxHeight="125" labelwidth="185px" style="width: 180px">
<option value="" selected="selected">-- Select One --</option>
<option value="Trial">Trial</option>
<option value="PerUser">Per User</option>
<option value="PerUnit">Per Unit</option>
<option value="Reseller">Reseller</option>
<option value="Other">Other</option>
</select>
<div dojoType="dijit.form.ValidationTextBox" style="width: 180px; margin-top: 5px;" id="Plan_Name" title="Plan Name" name="Plan.Name" required="true"
missingMessage="This value is required" promptMessage="Enter a value" value="">
<script text/type="javascript">
dojo.addOnLoad(function () {
dojo.connect(Plan_RegionName, "onChange", Plan_RegionName, function (evt) {
alert("Combo box Changed!");
});
dojo.connect(Plan_PlanType, "onChange", Plan_PlanType, function (evt) {
alert("Dropdown Changed!");
});
});
</script>
I get the alert message for Combox box change but not for Dropdown change.
Any ideas. Please advice.
thanks,
Vivek
Since "Plan_PlanType is a dojox.form you should be able to check if it is 'valid' as a way to enable the last textbox. So, something like:
if(dojo.byId("Plan_PlanType").validate()){
dojo.byId("Plan_Name").set("enabled", true);
}
However, you may need to wrap this in a dojo.connect function.
I used the onChange event of Selectbox.
Here is the example.
<select name="#name" id="#id" title="#ViewData.ModelMetadata.GetDisplayName()" onChange="enablePlanname(this.getValue())" dojoType="dijit.form.ComboBox" required="true" maxHeight="125" style="width: 180px; margin-top: 5px;">
#if (String.IsNullOrEmpty(Model))
{
<option value="" selected="selected">-- Select One --</option>
}
#foreach (CurrencyType bt in Enum.GetValues(typeof(CurrencyType)))
{
bool selected = false;
if (bt.ToString() == Model)
{
selected = true;
}
<option value="#bt.ToString()"#(selected ? " selected=\"selected\"" : "")>#bt.GetDisplayName()</option>
}
</select>
<script type="text/javascript">
function enablePlanname(value) {
var CurrentTextBox = dijit.byId('Region_Currency');
if (value == "other") {
CurrentTextBox.set("disabled", false);
}
else {
CurrentTextBox.set("disabled", true);
}
}
</script>
Thanks for all your help.
<?php
include ("Includes/DB_config.php");
//Define dropdown menu
echo "<select name=\'ProjectName\'>\n";
echo "<option value=\"NULL\">Select your project</option>\n";
//Select data from the database
$result = mysql_query("SELECT ProjectID,ProjectName FROM tb_project");
//Fetch data & Populate dropdown menu
while($row=mysql_fetch_array($result))
{
$pjt_id = $row['ProjectID'];
$pjt_name = $row['ProjectName'];
echo "<option value=\"$pjt_id\">$pjt_name</option>\n";
}
echo "</select>";
?>
Edit
You can use javascript to achieve this.
JAVASCRIPT
function upperCase(x)
{
var e = document.getElementById("editButton");
e.href = "/www/gdis_sys_test/Project_Setup_Display.php?id=" + x;
}
HTML
<select onchange="upperCase(this.value)">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<a id="editButton" href="/www/gdis_sys_test/Project_Setup_Display.php?id=1">Edit</a>
Example: http://jsfiddle.net/brenjt/WaA92/