I have two dropdown boxes for car makes and models, when a make is selected i need all its models to show in the next box. As of now using the following code the models show up when the dropdown is clicked.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However i need the javascript to trigger when an option from the dropdown is selected rather than when the drop down is opened.
here also is the html - with some php
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){ //put all makes in dropdown
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//nothing to start
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>
use the onchange event of selectbox.
here is a demo
Try this:
<select name="Pizza" size="5"
onchange="myFunctionHere()">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Roma</option>
</select>
Related
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>
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.
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?
Hi can some one help me to my problem.
I have a html and php function here all i want to to is to echoed a select value not the option value
here is my code
Ouput: Patrick or any for the name when I select and send the button
<?php if(isset($_REQUEST['send'])){echo $_POST['test'];}?>
<form method="post">
<select name="test"><option value="1">Patrick</option><option value="2">Maria</option><option value="3">Fe</option></select><input type="submit" name="send" value="submit">
</form>
specify the value in option like this "1_Patrick"
<?php if(isset($_REQUEST['send'])){
$value = explode('_',$_POST['test']);
echo $value[1];
}
?>
<form method="post">
<select name="test"><option value="1_Patrick">Patrick</option><option value="2_Maria">Maria</option><option value="3_Fe">Fe</option></select><input type="submit" name="send" value="submit">
</form>
<?php if(isset($_REQUEST['send'])){echo $_POST['test'];}?>
change the value of your option to you want to display
<form method="post">
<select name="test">
<option value="Patrick">Patrick</option>
<option value="Maria">Maria</option>
<option value="Fe">Fe</option>
</select>
<input type="submit" name="send" value="submit">
</form>
//change the $row['id'] to $row['name']
<?php $q = mysql_query("select * from name");?>
while($row = mysql_fetch_assoc($q)){
echo '<option value='.$row['name'].'>'.$row['name'].'</option>' ;
}
// ok you want to used the id in option value.in your submit code get the name for table check bellow code
<?php if(isset($_REQUEST['send'])){$id=$_POST['test'];
$q = mysql_query("select * from name where id=$id");
$row = mysql_fetch_assoc($q);
echo $row['name'];
}
?>
<?php $q = mysql_query("select * from name");
while($row = mysql_fetch_assoc($q)){
echo '<option value='.$row['id'].'>'.$row['name'].'</option>' ;
}?>
The value of the select will be whatever option is selected. If I select Maria, you will see 2 displayed.
<table cellpadding="3" cellspacing="3" align="center" width="50%">
<tr>
<td>
<select name="user" id="user_id" onChange="selectuser()">
<option value="0">Select User</option>
<option value="1">Patrick</option>
<option value="2">Maria</option>
<option value="3">Fe</option>
</select>
</td>
</tr>
</table>
<script language="javascript">
function selectuser()
{
var name = $("#user_id option:selected").text();
alert(name);
}
when you post any form then data contained in the value attribute of the field will get posted.
So you can change the value data to the desired value, like value="Patrik"
As you said that there is purpose behind adding numeric data to value then my suggestion would be add this numeric data to some other custom attribute like data-customid="1" etc and change value="Patrick"
You can add custom attribute in option value.
Refer this link for details.
pure js:
DEMO
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('select').addEventListener('change', function() {
alert(this.options[this.selectedIndex].innerText);
}, false);
}, false);