Duplicate dynamic select boxes using clone() - javascript

I have a div in my code which I need to duplicate as the user clicks on the Add button. In the div there are 2 dropdowns one which is populated dynamically from database and the other one dynamically populated based on the first dropdown selection.
I have achieved duplicating the div using jQuery clone(). But the dynamically populating feature isn't working for the first dropdown divs so as the second one. Also, sometimes when I select an option in parent div, that's also showing weird selections.
var count = 1;
$('#add-new').click(function() {
//clone
var row = $('#scope-brand-div').clone(true);
row.appendTo('#clone-parent');
//add new ids
var scopeselect = $('select.scope-select');
var brandselect = $('select.brand-select');
$(row).find(scopeselect).attr('id', 'project-scope' + count);
$(row).find(brandselect).attr('id', 'brands_used' + count);
count++;
});
<form action="add_project" method="POST">
<h4>Project Scope <button class="clone" name="addnew" id="add-new">Add</button></h4>
<div class="row">
<div class="col-md-6">
<div class="row" id="clone-parent">
<div id="scope-brand-div">
<div class="col-md-6">
<div class="form-group">
<label for="scope"><?php echo $this->lang->line('xin_project_scope');?></label>
<select name="scope" class="form-control select-border-color border-warning scope-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_project_scope');?>" id="project-scope">
<option value=""></option>
<?php foreach($all_project_scope as $scope) { ?>
<option value="<?php echo $scope->scope_id; ?>">
<?php echo $scope->scope_name; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="brands-ajax">
<label for="brands_used"><?php echo $this->lang->line('xin_brands_used');?></label>
<select name="brands_used" id="brands_used" class="form-control select-border-color border-warning brand-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_brands_used');?>">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="submit name=" submit " id="submit-form " value="Submit ">
</form>

Related

How to use ajax to populate input with select option with data from database?

The question I've got in my test goes like so.
You have 1 select with 2 options(item number1 and item number2) and 2 input fields(price,weight). How would you make the input fields change without writing in them?
So after a long time of searching and trying stuff out (without much luck) I've learned that I need to use ajax for this to work. so I have tried a bunch and this is the code I've tried edit so it would work.
getAllproduct is just a select that fetches all the data inside my table with products. this is id, name, item_number, price, weight. anyhow here is my code
<?php
$sth = $db->prepare("SELECT `price`,`weight` FROM product");
$sth->execute();
$row = $sth->fetch(PDO::FETCH_ASSOC);
$row = array();
json_encode($row);
?>
product.php
<div class="form-group col-2">
<label for="product">Item number</label>
<?=#$error['product']?>
<select class="form-control" name="product" id="product" onChange="getproduct(this.value)">
<?php foreach ($csv->getAllproduct() as $csv) { ?>
<option value="<?= #$csv->id ?>" selected><?= #$csv->product?></option>
<?php } ?>
</select>
</div>
<div class="form-group col-2">
<label for="weight">weight</label>
<?=#$error['weight']?>
<input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
<label for="price">price</label>
<?=#$error['price']?>
<input type="text" name="price" id="price" class="form-control">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
<script>
function getproduct(val){
$.ajax({
type:"POST",
url:"pages\call.php",
data: 'product='+val,
success: function(response){
var result = JSON.parse(response);
if (result.response == true) {
var data = result.rows;
$("#weight").val(data[0].weight);
$("#price").val(data[0].price);
}else if (result.response == false) {
$('#product').append('<option>No products were found!</option>');
}
}
});
}
</script>
What I expect to be able to do is select an item number and it will automatically populate the inputfields price and weight with the data inside the database from the item number.
I haven't learned a lot of Ajax/js so Any help is appreciated.
Attempt: on other project using this code. havent gotten it to work yet.
<form class="row" method="POST" >
<div style="border-color:#dddddd;" class="dropdown-divider col-12"></div>
<script>$('#Varenummer').on('change', function() {
var selectedOption = $(this).find('option:selected');
$('#Tolminus').val(selectedOption[0].dataset.Tolminus);
$('#Tolplus').val(selectedOption[0].dataset.Tolplus);
});
</script>
<div class="form-group col-2">
<label for="Varenummer">Varenummer</label>
<?= #$error['Varenummer'] ?>
<select class="form-control" name="Varenummer" id="Varenummer">
<?php
foreach ($csv->getAllVarenummer() as $csv) {?>
<option value="<?= #$csv->id ?>" data-Tolminus="<?= #$csv->Tolminus ?>"
data-Tolplus="<?= #$csv->Tolplus ?>"><?= #$csv->Varenummer ?></option>
<?php }?>
</select>
</div>
<div class="form-group col-2">
<label for="Tolminus">Tol -</label>
<?= #$error['Tolminus'] ?>
<input type="text" name="Tolminus" id="Tolminus" class="form-control" value="">
</div>
<div class="form-group col-2">
<label for="Tolplus">Tol +</label>
<?= #$error['Tolplus'] ?>
<input type="text" name="Tolplus" id="Tolplus" class="form-control" value="">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
the jquery scrips and others are added in the footer.
As you asked above in comments: i need it to the input to change when i select an option. can i still only use php?...
Yes.
You might not need ajax at all. For your task I'd recommend to preload weight and price values into data- attributes of corresponding option elements. Then, on the select change, just get those values and paste them to inputs.
$('#product').on('change', function() {
var selectedOption = $(this).find('option:selected');
$('#weight').val(selectedOption[0].dataset.weight);
$('#price').val(selectedOption[0].dataset.price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-2">
<label for="product">Item number</label>
<select class="form-control" name="product" id="product">
<option disabled selected>Choose product...</option>
<option value="1" data-weight="100" data-price="1000">Product 1</option>
<option value="2" data-weight="50" data-price="200">Product 2</option>
<option value="3" data-weight="25" data-price="115">Product 3</option>
</select>
</div>
<div class="form-group col-2">
<label for="weight">weight</label>
<input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
<label for="price">price</label>
<input type="text" name="price" id="price" class="form-control">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
For the PHP generated select (assuming the getAllproduct method returns weight and price properties):
...
<div class="form-group col-2">
<label for="product">Item number</label>
<?=#$error['product']?>
<select class="form-control" name="product" id="product">
<?php foreach ($csv->getAllproduct() as $csv) { ?>
<option value="<?= #$csv->id ?>" data-weight="<?= #$csv->weight ?>" data-price="<?= #$csv->price ?>"><?= #$csv->product?></option>
<?php } ?>
</select>
</div>
...

How to just update the value in the table upon the click on the submit button

I've been reading on lots of others question already but I can't find the solution to it. My employer ask me to remove the selection part on my drop down when a patient is discharged.
So, he asked me to remove the drop down selection button of the discharge part, and asked that the table will be updated only by the use of submit button. What should I do then? Can you guys give me some guide?
Thank you in advance for your help.
Below is my code.
<form action="add_status_submit.php" method="POST" class='form-horizontal form-validate' id="bb">
<div class="control-group">
<label for="textfield" class="control-label">Patient : </label>
<div class="controls">
<select name="pid" id="select2" class='chosen-select form-control' data-rule-required="true">
<option value="">-- Please select --</option>
<?php
$query = "select * FROM ipd_p ORDER BY id DESC";
//echo $query;
$result = mysqli_query($con,$query);
if(mysqli_affected_rows($con)!=0){
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo "<option value='" . $row['pid']."'>" . $row['name'] . "</option>";
}
}
?>
</select>
</div>
</div>
<div class="control-group">
<label for="textfield" class="control-label">Discharged : </label>
<div class="controls">
<select name="dis" id="select" class='chosen-select form-control' data-rule-required="true">
<option value="">-- Please select --</option>
<option value="Available">Yes</option>
</select>
</div>
</div>
<div class='control-group 11'><label for='textfield' class='control-label'>Status :</label>
<div class='controls'><input type='text' name='details' class='input-large' data-rule-minlength=1 placeholder='Status' required></div>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>

passing data through text box from select option into another page

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>

unable to select option from select box after cloned

i am cloning an entire div every time a Add More Students link is clicked.
The cloning works but unable to select an option from the cloned select box of the cloned div.
Html
<div id="all">
<div id="student" class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Firstname</label>
<label style="color:red;" id="std_first_name_error"></label>
<div class="append-icon">
<input type="text" id="std_first_name" name="std_first_name1" id="password" class="form-control" placeholder="Enter first name" minlength="4" maxlength="16" required>
<i class="icon-lock"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Select School</label>
<label style="color:red;" id="std_scl_error"></label>
<div class="option-group">
<select name="std_scl_name1" class="language" required>
<option value="">Select school..</option>
<?php foreach ($schools as $school) :?>
<option value="<?php echo $school->sch_id; ?>"><?php echo $school->sch_name;?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
</div>
<div id="add_student"><a><u>Add More Students</u></a></div>
Script
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#add_student').click (function(e){
e.preventDefault();
var clonedEl = $('#student').first().clone();
clonedEl.find(':text').attr('name','std_first_name'+count);
//Add the newly div the the entire div
$('#all').append(clonedEl);
//$('[name="std_scl_name'+count+'"]').html($('[name="std_scl_name1"]').html());
});
});
</script>
Application
The same code of yours works well in this fiddle. What I have changed/added is the only <option> elements. Still I could be able to select an element from cloned div's <select>.
I think what you need to check is php snippet and it's output. It might not feeding the <option> elements.
The id attribute should be unique for each element. Since you use id="student" and id="add_student", these will be cloned and result in duplicate element ids. In this JSFiddle, those ids have been replaced with class="student" and class="add_student".
For any further queries, remember to use the class selecter $('.student') and $('.add_student').

JQuery addClass to element based on selected option

How to add a class to element based on selected option
So I got this select option generated by php looping
code 1
<?php for ($i=1; $i <= $jml_penumpang; $i++) { ?>
<div class="form-group">
<label for="penumpang_<?php echo $i ?>" class="control-label">Nama Penumpang <?php echo $i ?></label>
<input type="text" class="form-control" id="penumpang_<?php echo $i ?>" placeholder="Nama Penumpang <?php echo $i ?>" name="penumpang_<?php echo $i ?>" value="<?php echo set_value('penumpang_'.$i); ?>">
</div>
<label for="kode_kursi_<?php echo $i ?>" class="control-label">Kursi <?php echo $i ?></label>
<select name="kode_kursi_<?php echo $i; ?>" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<?php
$kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
foreach ($kode_kursi as $k) {
?>
<option value="<?php echo $k; ?>"><?php echo $k; ?></option>
<?php
}
?>
</select>
<?php } ?>
now I want to add some css to below element that also generated by php looping
code 2
<div class="col-xs-5 col-xs-offset-1">
<p class="text-center page-header"><strong><i class="fa fa-users"></i> Denah Tempat Duduk</strong></p>
<div class="row">
<div class="col-xs-12"><div class="well text-center">Depan</div></div>
</div>
<div class="row">
<?php
$kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
foreach ($kode_kursi as $k) {
?>
<div class='col-xs-6'><div class='well text-center'><i class='fa fa-user'></i> <?php echo $k ?></div></div>
<?php
}
?>
</div>
<div class="row">
<div class="col-xs-12"><div class="well text-center">Belakang</div></div>
</div>
</div>
I want to add inline css style to this element (from code 2)
<div class='well text-center'>
Based on selected option value from code 1
So the logic is like:
I want to add inline css style (style="background:yellow") to the element in code 2 that has a text equals to selected option value on code 1
How to that using JQuery?
Thank you so much
and sorry for my grammar
UPDATED
this is the generated select option from code 1 ( NOTE: i don't include the )
<select name="kode_kursi_1" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<option value="T003-1">T003-1</option>
<option value="T003-2">T003-2</option>
<option value="T003-3">T003-3</option>
<option value="T003-4">T003-4</option>
<option value="T003-5">T003-5</option>
<option value="T003-6">T003-6</option>
</select>
<select name="kode_kursi_2" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<option value="T003-1">T003-1</option>
<option value="T003-2">T003-2</option>
<option value="T003-3">T003-3</option>
<option value="T003-4">T003-4</option>
<option value="T003-5">T003-5</option>
<option value="T003-6">T003-6</option>
</select>
and this is the generated element from code 2
<div class="row">
<div class="col-xs-6"><div class="well text-center" id="T003-1"><i class="fa fa-user"></i>T003-1</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-2"><i class="fa fa-user"></i>T003-2</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-3"><i class="fa fa-user"></i>T003-3</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-4"><i class="fa fa-user"></i>T003-4</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-5"><i class="fa fa-user"></i>T003-5</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-6"><i class="fa fa-user"></i>T003-6</div></div>
</div>
I Also get rid the to be more readable
Guessing there may be dynamic select elements and the number of yellow div should be equal to number of select, try:
$(document).ready(function(){
//call select_changed() function if any 'select'
//element with name starting from 'kode_kursi_' is changed
$("select[name*='kode_kursi_']").change(function(){
select_changed();
});
});
function select_changed(){
//remove yellow backgrounds from all div
$("div[id*='T003-']").each(function(){
$(this).removeClass('yellow');
});
//match the id with the selected option and
//add background css class
$("select[name*='kode_kursi_']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('yellow');
});
}
Fiddle Demo
I think this will give a hint, havent tested it yet
$(".kode_kursi").on("change",function(){
$this_val = $(this).val();
$(".div_kode2").each(function(){
$v_text = $(this).text();
if($this_val ==$text){
$(this).css("background","yellow");
}
});
});

Categories