I have one dropdown box and one textbox. I want when I select the dropdown value then, it will fill the matching database textbox value automatically based on the database drop-down selection.
Here is my code:-
Dropdown and Textbox:-
<select name="product" required>
<option value=""></option>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
<input placeholder="Phone Number" name="phoneNumber" id="pnum" type="text">
Script :-
<script>
$(document).ready(function(){
$('select[name="product"]').change(function()
{
$('#pnum').val($('select[name="product"] option:selected').data('Mobile'));
}
);
});
</script>
Now textbox fills the empty value in every time when dropdown value change.
pls help a lot.
You need to change the html to
<select name="product[]" size=20 multiple required>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
Then remove the script because it is no longer required. All the selection of items is done in the <select> element.
On the server-side you will pickup the values in the product array.
Related
I have a table "tb_seri" in MySQL, with columns "id_seri", "nm_seri" and "value_seri"
So, I want to select "nm_seri" in the select option, and then "value_seri" will appear in the textbox afterwards based on "nm_seri" selected
Here is the code to select "nm_seri" from the database
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<?php
$qu="Select DISTINCT nm_seri from tb_seri";
$res=$koneksi->query($qu);
while($r=mysqli_fetch_row($res))
{
echo "<option data-value='$r[1]' value='$r[0]'> $r[0] </option>";
}
?>
</select>
And I've tried various codes from here, but I'm still confused.
And this textbox code to display "value_seri"
<input type="text" name="value_seri" id="value_seri" value="" disabled><br></td>
<script>
function myFunction()
{
var value_seri = $('#value').find(':selected').data('nm_seri');
$('#value').val(value_seri);
}
</script>
In your current js code there is no value it should be nm_seri .Then , you are getting data attribute using data('nm_seri') it should be data('value') and show this value inside input box using $('#value_seri').val(value_seri); .Also ,your function name should match with onchange="myfunction()" so change that as well.
Demo Code :
function myfunction() {
var value_seri = $('#nm_seri').find(':selected').data('value');
$('#value_seri').val(value_seri);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<option data-value='1' value='soemthing'> soemthing</option>
<option data-value='2' value='soemthing2'> soemthing2</option>
<option data-value='3' value='soemthin3g'> soemthing3</option>
</select>
<input type="text" name="value_seri" id="value_seri" value="" disabled><br>
I am working on a project where admin have rights to add new users.
In ADD NEW USER form i have a select BOX of Designation which is populated from database . i want to know if user not select any designation from select options it will give error please select designation or some thing like this.
Here is my code:
<select class="form-control" name="designation" id="designation" style="color: black;" required>
<option value="<?php echo $row['designation_id']; ?>">Please Select designation</option>
<?php
$sel_cus = "select designation_name ,designation_id from designation ";
$res_cus = mysqli_query($connection, $sel_cus);
while ($row = mysqli_fetch_array($res_cus)) { ?>
<option value="<?php echo $row['designation_id ']; ?>"><?php echo $row['designation_name']; ?></option>
<?php
}
?>
</select>
If selected index of select box is 0 which is [Please Select designation] it will give error please select designation from list.
Need kind guidance.
You are accessing $row variable before it even exist in the following statement,
<option value="<?php echo $row['designation_id']; ?>">Please Select designation</option>
please replace this statement with following,
<option value="">Please Select designation</option>
value should be blank for the first option of select to work with required attribute.
Refer to this specification
And if you dont want the error to appear just remove the required attribute from the select element.
You can use this approach.
<form action="" method="post" onsubmit="return validateForm()">
<select class="form-control" name="designation" id="designation" style="color: black;" required>
<option value="0">Please Select designation</option>
<option value="1">designation 1</option>
<option value="2">designation 2</option>
</select>
<input type="submit" value="Submit">
</form>
<script>
function validateForm(){
var e = document.getElementById('designation');
var selectedDesig = e.options[e.selectedIndex].value;
if(selectedDesig == 0){
alert('Please Select designation');
return false;
}
return true;
}
</script>
how, after I choose the option and then it will appear #formid where the form is filled in by the $stock as selected in the option section
<div class="form-group">
<label for="exampleFormControlSelect1">Nama Item</label>
<select class="form-control" id="exampleFormControlSelect1" name="itemId">
<option selected>Choose</option>
<?php $no=1; while($row = $result->fetch_object() ) {
$stock = $row->stock;
$i_name = $row->i_name;
$id = $row->id;
?>
<option value="<?php echo $id; ?>"><?php echo $i_name; ?></option>
<?php } ?>
</select>
</div>
the form that will appear after selecting the option
<div class="form-group">
<label>Stock</label>
<input class="" type="number" name="" value="<?php echo $stock;?>">
</div>
I am new in php and javascript, can you write with a neat code & easy to understand, thank you :)
If I understand you correctly, you want to show the second div onSelect of the first one.
Because of the fact, that you use bootstrap I assume
that you have already included jQuery if not you have to do that for this example.
You have to add this JavaScript on your page.
<script>
$( document ).ready(function() {
$( "#exampleFormControlSelect1" ).change(function() {
$("#secondDiv").show();
});
});
</script>
And you need an id on your div.
<div id="secondDiv" class="form-group">
<label>Stock</label>
<input class="" type="number" name="" value="<?php echo $stock;?>">
</div>
You will need javascript for this if you want the data to appear without the page reloading.
First we make Javascript Function that takes your option id and passes it to your input value.
funcction chooseOption(clicked.id){
document.getElementById('myInput').value = clicked_id;
}
HTML and PHP we need to add a different id for each option. The best way it to pass the option name you want for each. We also added our onclick function to the options.
<div class="form-group">
<label for="exampleFormControlSelect1">Nama Item</label>
<select class="form-control" id="exampleFormControlSelect1" name="itemId">
<option selected>Choose</option>
<?php $no=1; while($row = $result->fetch_object() ) {
$stock = $row->stock;
$i_name = $row->i_name;
$id = $row->id;
echo "<option onclick=\"chooseOption(this.id);\" id=\"".$stock."\" value=\"".$id."\">".$i_name."</option>";
<?php } ?>
</select>
</div>
Added an id to your input so javascript can send the data to it.
<div class="form-group">
<label>Stock</label>
<input id="myInput" class="" type="number" name="" value="">
</div>
It is possible to change dropdown to list in form?
can't embed an image because of the reputation
here's my form with dropdown :
then I've change the value inside dropdown to list like this:
but the problem, my first image can execute the button and save the value, but when I change the form interface like my 2nd image, the button can't execute (nothing effect showing after clicking the button)
my code on dropdown looks like :
<div class="form-group">
<label for="ik">Kriteria</label>
<select class="form-control" id="ik" name="ik">
<?php
$stmt2 = $pgn2->readAll();
while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
extract($row2);
echo "<option value='{$id_kriteria}'>{$nama_kriteria}</option>";
}
?>
</select>
</div>
then I change the code of <select> to <form> like this to showing list :
<div class="form-group">
<form class="form-control" id="ik" name="ik">
<?php
$stmt2 = $pgn2->readAll();
while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
extract($row2);
?>
<option value="<?php echo $id_kriteria; ?>"><?php echo $nama_kriteria; ?></option>
<input type="text" class="form-control" id="nn" name="nn">
<?php
}
?>
</form>
</div>
Problem:
the 2nd code is <form> inside <form>, because if I change the <form> tag to <label> or etc, the interface looks bad,
may someone help me how to do?
I have a dropdown looks like following:
<div class="col-md-2 padding-Zero" >
<select id="ddlCompare1" class="dropdown" onChange="javascript:CompareLoantype(true);" >
<option value="jumbo">Conv</option>
<option selected value="fha">FHA</option>
<option value="va">VA</option>
<option value="usda">USDA</option>
</select>
</div>
I want the selected default value to be asigned to the following input :
<input name="Compare_interest_rate" id="Compare_interest_rate" class="txt" type="text" size="6" maxlength="6" style="width:75%" />%</p>
I have the default values of the options on php, how can i point to them when i select items.
FHA value => <?php echo $interest_FHA_default; ?>
VA value => <?php echo $interest_VA_default;?>
USDA value => <?php echo $interest_USDA_default;?>
CONV value => <?php echo $interest_CONV_default;?>
How to show value in input depending on item selected in dropdown? if user select FHA item i need FHA default value in input?
I'm not sure that this what you want, when the user select from drop down the default value shown in the input (default value stored in data-default attribut).
NOTE : in my example i can't use php code that why i fix the values in data-default, you can replace the numbers by the php code for every item, e.g :
<option data-default='<?php echo $interest_FHA_default; ?>' value="fha">FHA</option>
Hope this helps.
$('#ddlCompare1').change(function(){
$('#Compare_interest_rate').val($(this).find(':selected').data('default'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 padding-Zero" >
<select id="ddlCompare1" class="dropdown">
<option data-default='1' value="jumbo">Conv</option>
<option data-default='2' value="fha" selected>FHA</option>
<option data-default='3' value="va">VA</option>
<option data-default='4' value="usda">USDA</option>
</select>
</div>
<input name="Compare_interest_rate" id="Compare_interest_rate" class="txt" type="text" size="6" maxlength="6" style="width:75%" />%</p>