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>
Related
Basically I have a form in which a certain amount of input fields and selections (ingredient, quantity, unit of measure) are generated by a loop. Now I would like to remove the attribute required from the quantity field only when the associated selected unit of measure is 'j.e.'
<form method="post">
<?php
for ($n = 0; $n < $num; $n++) {
$data = $DB->query("SELECT * FROM ingredient"); ?>
<select name="list_ingr[]" required> <?php
while ($ingrs = $data->fetch()) { ?>
<option value="<?php echo $ingrs['id_ingr'] ?>"><?php echo $ingrs['name'] ?></option> - <?php
} ?>
</select>
Qt. <input type="number" name="list_quant[]" step="1" min="1" required>
<select name="measure[]">
<option value="none"></option>
<option value="gr">gr</option>
<option value="ml">ml</option>
<option value="j.e.">j.e.</option>
</select><br>
<?php
}
?>
<br>
<input type="submit" name="confirm" value="Confirm">
</form>
I have little to no experience when it comes to client side programming so I have no idea how to implement this; I tried looking for a bunch of JS/jQuery codes but none seem to work :/
Any help is appreciated!
Add a change event listener to the form to handle changing the required attribute of the input element beside the select element whose value changed.
document.querySelector('form').addEventListener('change', e => {
if (e.target.matches('select')) {
e.target.previousElementSibling.required = e.target.value !== 'j.e.';
}
});
If I understand correctly,
This is my working solution:
I set id for your Qt inputs. And I removed one with jQuery.
<form method="post">
<?php
for ($n = 0; $n < $num; $n++) {
$data = $DB->query("SELECT * FROM ingredient"); ?>
<select name="list_ingr[]" required> <?php
while ($ingrs = $data->fetch()) { ?>
<option value="<?php echo $ingrs['id_ingr'] ?>"><?php echo $ingrs['name'] ?></option> - <?php
} ?>
</select>
Qt. <input id="qt_<?php echo $ingrs['id_ingr'] ?>" type="number" name="list_quant[]" step="1" min="1" required>
<select name="measure[]">
<option value="none"></option>
<option value="gr">gr</option>
<option value="ml">ml</option>
<option value="j.e.">j.e.</option>
</select><br>
<?php
}
?>
<br>
<input type="submit" name="confirm" value="Confirm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#qt_2').remove(); //For example, to remove qt_2
});
</script>
I have a drop down list where I'm populating data from the database.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<!-- <option value="" selected="selected">?</option> -->
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
</div>
My form,
How values are populated from the database,
My database table,
I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.
Or I would like to disable the option with the '?' mark.
How can I do achieve this?
I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<?php if(($this->session->userdata('Title') == 0)) { ?>
<option value="" selected disabled><?php echo $row->value; ?></option>
<?php } else{?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then
$('option#yourZeroOption').each(function() {
if ($(this).isChecked())
$("select").attr("required", true);
else
alert('this filled cannot be ?');
});
since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that
If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.
Example
$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');
Note: JS validation works, But keep mind it's not always.
You should mark your <select> field as required, then the first option as disabled (and selected):
<select required>
<option value="" selected disabled>?</option>
<option value="1">Mr.</option>
<option value="2">Miss</option>
<option value="3">Mrs.</option>
</select>
This will make the first entry work as a placeholder basically.
we cant make it require with 0 value it can be done only if value=""
here is my idea,
<form action="/action_page.php">
<select required>
<option value="0">?</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select option:selected").val("");
});
</script>
<style>
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 use multiselect JS with php to get more than one selection of my form select.
Impossible for me not to show the selection' results on the select tags.
At least, if It's possible to show just the number of sélection(s) , it would be nice.
Thanks.
Sorry by impossible for to enter my code for the moment ! (seem not working)
<label for="showroom">Type/products* :</label>
<select class="form-control" id="materials" name="materials" multiple="multiple">
<?php while($prod=mysqli_fetch_assoc($prodQ)): ?>
<option value="<?php echo $prod['choc_id']; ?>"><?php echo $prod['choc_nom']; ?></option>
<?php endwhile; ?>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#materials').multiselect();
});
</script>
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>