i am trying to do a dynamic dropdown menu, i manage to retrieve the first menu value but i can't manage to retrieve the second menu value.
HTML part
<div>
<label for="marca">Marca </label>
<select type="text" id="marca" name="marca" onChange="getModel()">
<option value="">Alege Marca</option>
<?php while($row = mysqli_fetch_assoc($resultMarca)){ ?>
<option value="<?php echo $row["id"] ?>"> <?php echo $row["nume_marca"] ?> </option>
<?php } ?>
</select>
</div>
<div id="model_masina">
<label for="model">Model </label>
<select id="model" nume="model">
<option value="">Alege Model</option>
</select>
</div>
Ajax Part
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type ="text/javascript">
function getModel(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","get_model.php?marca="+document.getElementById("marca").value, false);
xmlhttp.send(null);
document.getElementById("model_masina").innerHTML=xmlhttp.responseText;
}
function model_schimba(){
$modelSc = (document.getElementById("model").value);
}
</script>
PHP
?>
<label for="model">Model </label>
<select id="model" nume="model" onchange='model_schimba()'>
<option value="">Alege Model</option>
<?php
while($row = mysqli_fetch_array($res)){ ?>
<option value="<?php echo $row["id"] ?>"> <?php echo $row["name"] ?> </option>
<?php }
?> </select> <?php
}
i mange to take the variable here
$modelSc = (document.getElementById("model").value);
but when i push the submit button i can't reach the variable
$model = $_POST["model"];
"but when i push the submit button i can't reach the variable $model = $_POST["model"];"
nume="model"
PHP syntax is English-based, not in your language.
You need to change it to name="model".
The "name" attribute is the same in any language.
Having use PHP's error reporting, it would have thrown you an undefined index notice.
http://php.net/manual/en/function.error-reporting.php
First, code separation is important for readability.
Second, I think your AJAX return
document.getElementById("model_masina").innerHTML=xmlhttp.responseText;
is mistakenly pointing at a <div> container instead of the <select> list. Should be,
document.getElementById("model").innerHTML=xmlhttp.responseText;
because you are outputting select menu <option>
Related
I want to block the user to input I just want him to choose only from the list
I tried disable and readonly but this will disable my list and I don't want that.
This is my code
<div class="form-group row justify-content-center" id=" input-champs " style="margin-left:;" ><!-- grossistee -->
<label for="grossiste" class="col-2 col-form-label"></label>
<div class="col-3">
<input type="text" list="list-gro" placeholder="Grossiste1" id="g_name1" name="g_name1" class="form-control">
<datalist id="list-gro">
<?php while($row = mysqli_fetch_array($resultg)) { ?>
<option value="<?php echo $row['g_name']; ?>"><?php echo $row['g_name']; ?></option>
<?php } ?>
</datalist>
</div>
From the living standard spec of the datalist element:
Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.
Conversely, this means that a user can enter anything he wants. The datalist element only contains suggestions that the user can use, but does not have to.
For your puprose I 'd suggest a select element. A select element dictates strict values for the user to use.
<label for="my-select">My Select</label>
<select name="my-select" id="my-select" required>
<option value="" disabled selected>Select your option</option>
<?php foreach ($databaseresult as $row): ?>
<option value="<?= htmlspecialchars($row['value']) ?>">
<?= htmlspecialchars($row['label']) ?>
</option>
<?php endforeach ?>
</select>
Its better to use select in place of input as you dont want the user to type in anything from himself/herself.
You can do like this to implement select with database query
<select name="g_name1" id="g_name1" class="form-control">
<?php while($row = mysqli_fetch_array($resultg)) { ?>
<option value="<?php echo $row['g_name']; ?>"><?php echo $row['g_name']; ?></option>
<?php } ?>
</select>
User have some options, upon selecting one of them, I want to show more options which will depend on first selected option. Say, user has options to select the number of gates, like 1 or 2. Upon selecting a number I want to show options of all the gates lower than that number. That is,
if 1 is selected, show options of only gate 1.
if 2 is selected, show options of gate 2 and gate 1.
I have most of the variables within my phpmyadmin for storage purposes to avoid having to create alot of variables in the code. Just want some suggestions and if you see anything I can improve let me know.
<div class="form-div-element">
<label># of Gates</label>
<select class="gates-change" name="no_gate" required>
<option value="">Select Gate</option>
<option value="28">1 Gate</option>
<option value="29">2 Gates</option>
</select>
</div>
<?php
if($result)
{
foreach($result as $row)
{
if($row->id == 31 || $row->id == 32 || $row->id == 33)
{?>
<div class="form-div-element ecl-variation ecl-variation<?php echo $row->id;?>" style="display:block!important">
<?php }
else
{?>
<div class="form-div-element ecl-variation ecl-variation<?php echo $row->id;?>">
<?php }?>
<label><?php echo $row->variation_name;?></label>
<?php
if($row->variation_name == 'Stops')
{?>
<input type="hidden" name="stopvariationid" value="<?php echo $row->id;?>" id="stopvariationid"/>
<?php }
?>
<?php
$var_value = (explode("|",$row->variation_value));
$var_condition = $row->conditions;
$arr = array('height_convert_configuration');
//if($row->special_features != '')
//{
// check_special_function($var_value,$row->special_features,$var_condition);
//}
//else if($row->variation_type =='selectbox')
if($row->variation_type =='selectbox')
{
if($row->variation_function == 'calculation')
{?>
<select onchange = 'change_variation(this.value,<?php echo $row->id;?>)'>
<option value="">Select Option</option>
<?php for($i=0;$i<count($var_value);$i++)
{?>
<option value="<?php echo $var_value[$i];?>"><?php echo $var_value[$i];?></option>
<?php }?>
</select>
<?php }
else
{ ?>
<select class="gate_datatype" name="gate_type">
<option value="">Select Option</option>
<?php for($i=0;$i<count($var_value);$i++)
{?>
<option value="<?php echo $var_value[$i];?>|<?php echo $row->special_features;?>"><?php echo $var_value[$i];?></option>
<?php }?>
</select>
<?php }
}
else if($row->variation_type =='textbox')
{?>
<?php for($i=0;$i<count($var_value);$i++)
{?>
<?php echo $var_value[$i];?>
<?php }?>
<?php }
else if($row->variation_type =='radiobox')
{?>
<?php for($i=0;$i<count($var_value);$i++)
{?>
<div class="radiobox-cont">
<input onchange = 'change_radio_variation(this,this.value,<?php echo $row->id;?>)' type="radio" name="<?php echo $row->class;?>" value='<?php echo $var_value[$i];?>' /><?php echo $var_value[$i];?>
</div>
<?php }?>
<?php }
else if($row->variation_type =='checkbox')
{?>
<?php for($i=0;$i<count($var_value);$i++)
{?>
<div class="checkbox-cont <?php echo preg_replace('/\s+/', '_', $var_value1[$i]);?>">
<?php if('Cabin Telephone' == $var_value[$i])
{?>
<input checked type="checkbox" onchange="change_check_varitaion(this,this.value,<?php echo $row->id;?>)" name="other_option[]" value='<?php echo $var_value[$i];?>' disabled="disabled" /><?php echo $var_value[$i];?>
<?php }
else
{?>
<input type="checkbox" onchange="change_check_varitaion(this,this.value,<?php echo $row->id;?>)" name="other_option[]" value='<?php echo $var_value[$i];?>' /><?php echo $var_value[$i];?>
<?php }?>
</div>
<?php }?>
<?php }?>
</div>
<?php }
You can do this in two ways first way is to do ajax and second way is using css.
First method suppose this is your select code where you can select gate
<div class="form-div-element">
<label># of Gates</label>
<select id="gates" onchange="change()" class="gates-change" name="no_gate" required>
<option value="">Select Gate</option>
<option value="28">1 Gate</option>
<option value="29">2 Gates</option>
</select>
</div>
// and this is your sub gates options which will be empty at first and its display will be none
<div id="subgates_div" class="form-div-element" style="display:none;">
<label># of Sub Gates</label>
<select id="subgates" class="gates-change" name="sub_no_gate" required>
<option value="">Select Sub Gate</option>
</select>
</div>
on selecting gate what you can do is use ajax to get the sub options of the selected gate like this. in this code your url and my url will be different.
function change() {
var selected = $('#gates').find(":selected").attr("value");
$.ajax({
type: "POST",
url: '<?php echo base_url('get_sub_options') ?>',
dataType: 'json',
data: {category: selected},
success: function (data) {
console.log(data);
//remove disabled from province and change the options
$('#subgates_div').show();
$('select[name="sub_no_gate"]').html(data.subgates);
}
});
}
and your php function should be like this here first i have made an array named subgates. and i have retrieved subgates from database using the value from post. this query might be different in your case. the i have applied foreach loop for sub gates and created a new option element with respective subgate id and subgate name and appended it to array. and at last the array is returned using json_encode
function get_sub_category() {
$data['subgates'] = array();
$subgates = $this->db->get_where('subcategories', array('id' => $_POST['category']))->result();
foreach ($subgates as $key => $val) {
$data['subgates'][] = <<<EOD
<option value='$val->id'>$val->sub_gate_name</option>
EOD;
}
echo json_encode($data);
}
and the other method is using css. to do this you should list all this options of gate and subgates at first. like this
// gates options
<div class="form-div-element">
<label># of Gates</label>
<select id="gates" onchange="change()" class="gates-change" name="no_gate" required>
<option value="">Select Gate</option>
<option value="28">1 Gate</option>
<option value="29">2 Gates</option>
</select>
</div>
//sub gate options one
<div id="subgates-<?php echo $subgates->id; ?>" class="form-div-element" style="display:none;">
<label># of Sub Gates</label>
<select id="subgates" class="gates-change" name="sub_no_gate" required>
<option value="">Select Sub Gate</option>
</select>
</div>
//sub gate option 2
<div id="subgates-<?php echo $subgates->id; ?>" class="form-div-element" style="display:none;">
<label># of Sub Gates</label>
<select id="subgates" class="gates-change" name="sub_no_gate" required>
<option value="">Select Sub Gate</option>
</select>
</div>
// and so on
In this case what you should remember is that your sub gates option div id should be dynamic and display will be none at first
now when you select a gate use onchange and change the display css of respective sub gates like this
function change() {
$(".form-div-element").hide();
var selected = $('#gates').find(":selected").attr("value");
$('#subgates-'+selected).show();
}
hope this will give you some idea and if you have any confusion feel free to ask
All in all it seems to me that your question actually contains 2 questions:
How to dynamically show/hide DOM elements based on user selection
Upon selecting a number I want to show options of all the gates lower than that number.
How to optimize your PHP code
Just want some suggestions and if you see anything I can improve let me know.
Number two is way to broad! Maybe just one quick suggestion: If it works then its fine. Overlooked it fast and seems to be ok.
See my working snippet for number one, which actually only needs a little customization of your existing source code (if any at all). Don't forget its just a mockup; if you need some further help or want some deeper explanations about whats going on then let me know...
jQuery('.form-div-element').not('.ecl-variation').find('select').on('change', function() {
var i = -1,
$conditional = jQuery('.ecl-variation').hide(), // hide in advance
iGates = +(jQuery(this).find('option:selected').attr('data-gates-sum')); // get required gate(s) based on selected options "data-gates-sum"-attribute
// version based on text: `iGates = +($(this).find('option:selected').text().split(' ')[0])` | pro: no additional markup, con: error prone, maintenance
// count up to required gate(s) and make them visible
while ( ++i < iGates ) {
$conditional[i].style.display = 'block';
}
});
.ecl-variation{
display: none; /* hide conditional selects in advance */
}
<!-- minimized mockup -->
<div class="form-div-element">
<label># of Gates</label>
<select>
<option value="">Select Gate</option>
<!-- decided to add a data attribute instead of relying on text which could change more likely (maintenance) -->
<option value="28" data-gates-sum="1">1 Gate</option>
<option value="29" data-gates-sum="2">2 Gates</option>
</select>
</div>
<div class="form-div-element ecl-variation">
<label># of Gates | conditial 1</label>
<select>
<option value="">Select Gate Sub</option>
<option value="3">abc</option>
<option value="4">xyz</option>
</select>
</div>
<div class="form-div-element ecl-variation">
<label># of Gates | conditial 2</label>
<select>
<option value="">Select Gate Sub</option>
<option value="5">123</option>
<option value="6">789</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How to implement?
.ecl-variation{
display: none; /* hide conditional selects in advance */
}
<body>
<!-- minimized mockup -->
<div class="form-div-element">
<label># of Gates</label>
<select>
<option value="">Select Gate</option>
<option value="28" data-gates-sum="1">1 Gate</option>
<option value="29" data-gates-sum="2">2 Gates</option>
</select>
</div>
<div class="form-div-element ecl-variation">
<label># of Gates | conditial 1</label>
<select>
<option value="">Select Gate Sub</option>
<option value="3">abc</option>
<option value="4">xyz</option>
</select>
</div>
<div class="form-div-element ecl-variation">
<label># of Gates | conditial 2</label>
<select>
<option value="">Select Gate Sub</option>
<option value="5">123</option>
<option value="6">789</option>
</select>
</div>
<!-- YOUR CODE ENDS HERE -->
<!-- load jquery from cdn -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- provide a local copy as fallback in case that cdn is not available -->
<script>window.jQuery||document.write('<script src="path/to/your/local/copy/jquery-1.12.4.min.js"><\/script>')</script>
<!-- implement your custom site specific script(s) inline -->
<script>
(function( $ ) {
$('.form-div-element').not('.ecl-variation').find('select').on('change', function() {
var i = -1,
$conditional = $('.ecl-variation').hide(),
iGates = +($(this).find('option:selected').attr('data-gates-sum'));
while ( ++i < iGates ) {
$conditional[i].style.display = 'block';
}
});
})( jQuery )
</script>
<!-- instead of deploying your scripts inline you can load them also like this:
<script src="path/to/your/app.js"></script>
-->
</body><!-- make sure that your scripts are located just before the closing body tag -->
in a web form there are two drop-down lists. The second list items should change dynamically depending on the value selected on the first drop-down list.
This is how am I trying to do it:
index.php:
...
<script>
function getClient(val) {
$.ajax({
type: "POST",
url: "get_contacts.php",
data:'client_id='+val,
success: function(data){
$("#contacts-list").html(data);
}
});
}
</script>
...
<div class="form-group">
<label for="mto_client" class="col-sm-2 control-label">MTO Client</label>
<div class="col-sm-10">
<select name="mto_client" id="clients_list" onChange="getClient(this.value)">
<option value="">Select a Client</option>
<?php
do {
?>
<option value="<?php echo $row_RSClients['id_client']?>" ><?php echo $row_RSClients['client_name']?></option>
<?php
} while ($row_RSClients = mysql_fetch_assoc($RSClients));
?>
</select>
</div>
</div>
<div class="form-group">
<label for="mto_client_contact" class="col-sm-2 control-label">MTO Client Contact</label>
<div class="col-sm-10">
<select name="state" id="contacts-list">
<option value="">Select Client Contact</option>
</select>
</div>
</div>
get_contacts.php
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["client_id"])) {
$query ="SELECT * FROM tb_client_contacts WHERE contact_client_id = '" . $_POST["client_id"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select Client Contact</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["id_client_contact"]; ?>"><?php echo $state["contact_name"]; ?></option>
<?php
}
}
?>
There are objects on the table tb_clients_contact that meet the condition, but the second drop-down list doesn't show any objects.
Any help is welcome.
Instead of
$("#contacts-list").html(data);
It should be
$('#contacts-list').empty().append(data);
empty() will clear first the options inside the contacts-list select field, then append() will insert the options from the result of your AJAX.
You can also look at the console log for errors. If you are using Google Chrome, hit F12 to display the console log.
The following is my HTML code
<div class="col-md-6">
<label for="martial_status">Martial Status</label>
<select name="martial_status" id="martial_status" class="form-control" value="<?php echo set_value('martial_status'); ?>">
<option value="">Select Martial Status</option>
<?php foreach ($martial_status as $status) { ?>
<option value="<?php echo $status['id'] ?>"><?php echo $status['status_name'] ?></option>
<?php } ?>
</select>
Even though i have used the form_validation in controller side, the value is not getting set in drop down once the form fails submitting. How to set the previous value selected in drop down on form failure. Where am I going wrong.
You cannot set the value straightly to select tag. You need to set the selected attribute to option tag which you want it to be get selected. Just like it below....
<div class="col-md-6">
<label for="martial_status">Martial Status</label>
<select name="martial_status" id="martial_status" class="form-control" value="<?php echo set_value('martial_status'); ?>">
<option value="">Select Martial Status</option>
<?php foreach ($martial_status as $status) { ?>
<option value="<?php echo $status['id'] ?>" <?php if ($status['id'] == set_value('martial_status')) echo "selected = 'selected'"?>><?php echo $status['status_name'] ?></option>
<?php } ?>
</select>
On generating the options tag check which option got selected and echo selected = 'selected' in the attribute of that option tag.
I have 2 select's inside a form. The second select has about 2000 lines in total coming out of my mysql table. One of the column into that mysql has 1 of the values used into the first select. I want to be able to filter on that value when it is selected into the first select, so that it only shows these articles.
code now:
<div class="rmaform">
<select name="discipline" class="discipline">
<option value=" " selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article">
<?php
$articleselect = $dbh->prepare('SELECT * FROM articles');
$articleselect->execute();
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
</select>
I think i have to use Javascript for it but how do you combine PHP and Javascript? And what would be the best way to make the filter work?
jQuery for the change event and AJAX
$(document).ready(function(e) {
$('select.discipline').change(function(e) { // When the select is changed
var sel_value=$(this).val(); // Get the chosen value
$.ajax(
{
type: "POST",
url: "ajax.php", // The new PHP page which will get the option value, process it and return the possible options for second select
data: {selected_option: sel_value}, // Send the slected option to the PHP page
dataType:"HTML",
success: function(data)
{
$('select.input-article').append(data); // Append the possible values to the second select
}
});
});
});
In your AJAX.php
<?php
if(isset($_POST['selected_option']))
$selected_option=filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
else exit(); // No value is sent
$query="SELECT * FROM articles WHERE discipline='$selected_option'"; // Just an example. Build the query as per your logic
// Process your query
$options="";
while($query->fetch()) // For simplicity. Proceed with your PDO
{
$options.="<option value='option_value'>Text for the Option</option>"; // Where option_value will be the value for you option and Text for the Option is the text displayed for the particular option
}
echo $options;
?>
Note: You can also use JSON instead of HTML for much simplicity. Read here, how to.
First give both of the selects an unique ids...
<div class="rmaform">
<select name="discipline" class="discipline" id="discipline">
<option value="" selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article" id="article">
<option value="" selected></option>
</select>
Now you can use jQuery Ajax call to another file and get the HTML Response from that file and Populate in the select field with id="article" like this...
<script type="text/javascript">
$(document).ready(function(){
$("#discipline").change(function(){
var discipline = $(this).val();
$.post(
"ajax_load_articles.php",
{discipline : discipline},
function(data){
$("#article").html(data);
}
)
});
});
</script>
Now create a new file like ajax_load_articles.php... in the same directory where the html file exists... You can place it anywhere but then you have to change the $.post("url", the url to the ajax submission.
Contents of ajax_load_articles.php :
<?php
$discipline = $_POST["discipline"];
$articleselect = $dbh->prepare("SELECT * FROM articles WHERE colname = '{$discipline}'");
$articleselect->execute();
echo '<option value="" selected></option>';
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
Now when ever you will change the select of the first select field an Ajax call will take place and the data of the second select field will automatically adjust to related data selected in the first select field.
This is an example where you can select the college specific to the state ..
Form.php
// your code for form ...
// select box for state starts
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">State</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="statename" id="stateid">
<option value="">---- Select ----</option>
<?php
$state=sql::readResultArray("Your Query To select State`");
foreach($state as $s){
?>
<option value="<?php echo $s?>"> <?php echo $s ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">Colleges</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="mycollegename">
<option value="">--- Select --- </option>
</select>
</div>
</div>
// further code for from in form.php..
Script to find the state and then pass the value to find the respective colleges in that state
<script>
$(document).ready(function(e) {
$('#stateid').change(function()
{ ids=$('#stateid').val();
$.get('mycollege.php', {type:ids} ,function(msg){
$('select[name="mycollegename"]').html(msg);
});
});
});
</script>
Call this file through ajax .. Code on this file
mycollege.php
<?php
require('db.php'); // call all function required, db files or any crud files
$type=$_GET['type'];
if(!empty($type)){
$r=sql::read("Your Query To call all teh college list");
?>
<select name="mycollegename">
<option value="">Select One</option>
<?php
foreach($r as $r){
echo "<option value=\"$r->collegename\">$r->collegename </option>";
}
?>
</select>
<?php }else{ ?>
<select name="mycollegename">
<option value="">Select State</option>
</select>
<?php } ?>