Sorry if this is was discussed before but based on my observation and trials. All of them doesn't work. I have 5 dropdowns,They are brand,model,color,engine no. and chasis no.. What javascript function should I use, to make the dropdown of the model that was depend of the selected brand,the dropdown of color is depend to the selected model and the dropdown engine no. and chasis no is depend to the selected color.
Here's my code
<label for="bName" class="control-label col-xs-4"><p class="left">Brand</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$bsql="SELECT bName, brandID FROM brand order by bName";
$bstmt=$con->prepare($bsql);
$bstmt->execute();
$bstmt->bind_result($bName, $bid);
$bstmt->store_result();
echo "<select name='brandID' class='form-control'>
<option value=''></option>";
while ($bstmt->fetch()){
echo '<option value="'.$bid.'">'.$bName.'</option>';
}
echo '</select>';
?>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="form-group">
<label for="model" class="control-label col-xs-4"><p class="left">Model</p></label>
<div class="col-xs-7">
<div class="req">
<?php
include_once "config.php";
$msql="SELECT model, modID FROM model where brandID=? order by model";
$mstmt=$con->prepare($msql);
$mstmt->bind_param('i', $bid)
$mstmt->execute();
$mstmt->bind_result($model, $mid);
$mstmt->store_result();
echo "<select name='mID' class='form-control'>
<option value=''></option>";
while ($mstmt->fetch()){ echo '<option value="'.$mid.'">'.$model.'</option>';
}
echo '</select>';
?>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="form-group">
<label for="color" class="control-label col-xs-4"><p class="left">Color</p></label>
<div class="col-xs-7">
<select ="color" class="req">
<option value='blue'>Blue</option>
<option value='red'>Red</option>
</select>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="engine" class="control-label col-xs-4"><p class="left">Engine No.</p></label>
<div class="col-xs-7">
<select name="engine" class="req" required/>
<option></option>
</select>
</div>
<div class="col-xs-1">
</div>
</div>
<div class="form-group">
<label for="chasis" class="control-label col-xs-4"><p class="left">Chasis No.</p></label>
<div class="col-xs-7">
<select name="chasis" class="req" required/>
<option></option>
</select>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
</div>
Related
I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.
I would like to fill more than one textbox with data taken from mysql table after dropdown selection. I saw this jsfiddle demo and works fine but I need something different. I have the following situation:
<div class="form-group">
<label class="control-label col-sm-2" for="pn_dn">Pn_DN:</label>
<div class="col-sm-4">
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<?php
$sql = "SELECT codice, cod_forn, descrizione, package, u_m FROM maglab";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$pn_dn = $row['codice'];
$descrizione = $row['descrizione'];
$pn_manufacturer = $row['cod_forn'];
$package = $row['package'];
$u_m = $row['u_m'];
?>
<option><?php echo $pn_dn; ?></option>
<?php } ?>
</select>
</div>
<?php } ?>
<label class="control-label col-sm-2" for="description">Descrizione:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
</div>
<label class="control-label col-sm-2" for="manufacturer">Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="manufacturer" name="manufacturer" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="package">Package:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="package" name="package"> </div>
<label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
<div class="col-sm-4">
<input type="u_m" class="form-control" id="u_m" name="u_m" required>
</div>
</div>
<script type="text/javascript">
var pn_dn = document.getElementById('pn_dn');
//var pn_manufacturer = document.getElementById('<?php echo json_encode($pn_manufacturer); ?>');
pn_dn.onchange = function(){
//document.getElementById("pn_manufacturer").innerHTML = '<?php echo json_encode($pn_manufacturer); ?>';
pn_manufacturer.value = this.value;
description.value = this.value;
package.value = this.value;
u_m.value = this.value;
}
</script>
With the above JS all the inputboxes are filled with pn_dn value but as I take $pn_dn, $descrizione, $pn_manufacturer, $package and $u_m from the table maglab, I would like to fill the inputboxes with $descrizione, $pn_manufacturer, $package and $u_m based on $pn_dn selection. How can the JS be mmodified?
You can use custom attribute and in this you can assign your required values for various fields .i.e:
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<?php
//your othercodes
?>
<!--use data--attr-->
<option descrizione='<?php echo $descrizione; ?>' pn_manufacturer='<?php echo $pn_manufacturer; ?>' package='<?php echo $package; ?>' u_m='<?php echo $package; ?>'>
<?php echo $pn_dn; ?>
</option>
<?php } ?>
</select>
Demo Code :
var pn_dn = document.getElementById('pn_dn');
pn_dn.onchange = function() {
//get select-index
var slected_index = this.options[this.selectedIndex]
//use getAttribute to get custom attribute
document.getElementById("pn_manufacturer").value = slected_index.getAttribute("pn_manufacturer");
document.getElementById("package").value = slected_index.getAttribute("package");
document.getElementById("u_m").value = slected_index.getAttribute("u_m");
document.getElementById("description").value = slected_index.getAttribute("descrizione");
}
<select id="pn_dn" name="pn_dn" required>
<option value="">Seleziona</option>
<!--use attr-->
<option descrizione='A' pn_manufacturer='Ab' package='2' u_m='1'>
Something ..
</option>
<option descrizione='B' pn_manufacturer='Bb' package='5' u_m='5'>
Something2 ..
</option>
</select>
<label class="control-label col-sm-2" for="description">Descrizione:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="package">Package:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="package" name="package"> </div>
<label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
<div class="col-sm-4">
<input type="u_m" class="form-control" id="u_m" name="u_m" required>
</div>
</div>
when i select the color field the value selected in the sub category field disappears
here is my view page...
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Parent Category</label>
<div class="form-group col-md-6">
<select name="parentname" id="parentname" class="form-control">
<option value="">select one</option>
<?php foreach ($parent as $row) { ?>
<option value="<?php echo $row->id; ?>"><?php echo $row->category_name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Sub Category</label>
<div class="form-group col-md-6">
<select name="subname" id="subname" class="form-control">
<option value="">select one</option>
<?php foreach ($sub_cat as $row){?>
<option value="<?php echo $row->id;?>"><?php echo $row->category_name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Color</label>
<div class="form-group col-md-6">
<input readonly id="mycolor" class="colorPicker evo-cp0 form-control" data-toggle="tooltip" data-placement="top" title="Pick Product color" />
</div>
</div>
<div class="form-group col-md-12">
<label for="exampleInputPassword1">Selected Colors</label>
<div class="clearfix"></div>
<div id="selected-color">
<?php if($this->session->userdata('colors')){
foreach ($this->session->userdata('colors') as $color)
{?>
<div class="col-md-2 selected-color">
<div class="color-box" style="background-color:<?php echo $color; ?>"></div>
<div class="selected-color-btn" color='<?php echo $color; ?>' data-toggle="modal" data-target="#confirm-color" >
<span class="fa fa-close" data-toggle="tooltip" data-placement="top" title="Remove color" ></span></div>
</div>
<?php }}?>
</div>
</div>
here is my js...
<script type="text/javascript">
$(document).ready(function() {
$('#mycolor').css('background-color', $('#mycolor').val());
$("#mycolor").colorpicker({});
$("#mycolor").on("change.color", function(event, color){
var url='<?php echo base_url() ?>admin_control/ajax_addProduct_color';
var product_id=$("#product_id").val();
$.post(url, {color:color,product:product_id}, function(result)
{
$('#selected-color').html(result);
location.reload();
});
});
<script>
i had sisyphus function for the values to become selected after selecting the color field but when i choose the color field the value of the subcategory field disappears
I am trying to pass data through a text box which is selected through the 'other' in select option. However, when I run the program, the data is not passed. Any ideas how to resolve this? here is the code that I am using. I have added most of the code below. I have to pass information through the select option in the form of a text box. However the information is not passed. Is there any other method that can do this, passing through text to another page?
<?php include_once("header.php"); ?>
<?php
$q_sel = "select * from tbl_drug";
$r_sel = mysql_query($q_sel);
?>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#my_textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('#my_textarea').show(); else $('#my_textarea').hide();
});
});
</script>
</head>
<body style="background-color: #25383c;background-image: url(img/background.png);">
<?php include_once("nav.php"); ?>
<h1> Medication Appropriateness Index</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form class="form-horizontal" role="form" action="save_drug.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Drug:</label>
<div class="col-xs-3">
<select name="drug" id="Drug" class="form-control" required="">
<option value="" selected="" disabled="">Please select A drug...</option>
<?php
while($r1 = mysql_fetch_array($r_sel))
{ ?>
<option value="<?php echo $r1['d_id']; ?>"><?php echo $r1['drug_name']; ?></option>
<?php
}
?>
</select>
</div>
</div>
<script>
$(function() {
$("#dose").tooltip();
});
</script>
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
<textarea name="my_textarea" id="my_textarea"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="patient_id" value="<?php echo $_GET['patient_id']; ?>">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
always use 'name' attribute for inputs , because only name can send data on submit.
<textarea name="my_textarea" id="my_textarea"></textarea>
I have a question would like to ask you why Bootstrap date picker is not work with other after I've clone its. I am using jQuery-Cloneya Plugin to clone the form, you can visit this website to know about it : https://github.com/yapapaya/jquery-cloneya
Below is the code of cloneya jQuery plugin which I have try :
<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery-cloneya.js"></script>
<script>
$('#contain-education').cloneya({
limit : 5,
valueClone : true,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false
});
$('#contain-exp').cloneya();
$('#contain-lang').cloneya();
$('#contain-language').cloneya();
</script>
Below is a code to clone :
<script type="text/javascript">
$('.contain-education').each(function() {
var $wrapper = $('.wrap-education', this);
$("body").on("click",".add-education", $(this),function(e) {
$('.append-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.append-field .remove-edu-field', $wrapper).click(function() {
if ($('.append-field', $wrapper).length > 1)
$con = confirm("Are you sure you want to delete this?");
if($con==true){
$(this).parent('.append-field').remove();
}
});
});
</script>
Here is a HTML code :
<div class="row" id="contain-education">
<div class="toclone">
<div class="form-group">
<label class="col-xs-3 control-label" for="school_name[]">School name <span class="error">*</span></label>
<div class="col-xs-8">
<input id="textinput" name="school_name[]" placeholder="" value="<?php echo set_value("school_name"); ?>" class="form-control input-md" type="text">
<span class="error"><?php echo form_error("school_name"); ?></span>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="program_name[]">Major <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control input-md" value="<?php echo set_value("program_name"); ?>" placeholder="" name="program_name[]" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="education_level[]">Education level <span class="error">*</span></label>
<div class="col-xs-8">
<select class="form-control input-md" name="education_level[]">
<option value="">-- Education level --</option>
<?php foreach($education_level->result() as $row): ?>
<option value="<?php echo $row->education_level_id; ?>"><?php echo $row->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="start_edu_date[]">Start date <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control date_pick" id="start_edu_date" value="<?php echo set_value("start_edu_date"); ?>" name="start_edu_date[]" required="required">
<span class="error"><?php echo form_error("start_edu_date"); ?></span>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="end_edu_date[]">End date <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control date_pick" id="end_edu_date" value="<?php echo set_value("end_edu_date"); ?>" name="end_edu_date[]" required="required">
<span class="error"><?php echo form_error("end_edu_date"); ?></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<span class="pull-right">
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-plus"></i>
</span>
</div>
</div>
</div>
</div>
thanks you for your help.
You haven't mentioned what plugin you have used. Lets say your plugin is invoked like this:
$('input.date_pick').datepicker();
Then, it will only be applied to the existing inputs, not inputs that will be created in the future.
When the new inputs are created by cloning, you can invoke your datepicker:
$('#contain-education').cloneya({
// ... options
}).on('clone_after_append', function(event, toclone, newclone) {
$(newclone).find('input.date_pick').datepicker();
});