Unable to repopulate form - javascript

I have created the below mentioned form in Codeigniter, where there is 4 level dependent drop down list. Everything work as expected while I am in the first form. When I press the add button so that there is a regenerated form just like the first one, whenever I select the country field and expect based on my selection to have the relevant options in the second drop down menu (championship) it doesn't work. No data is coming based on my country selection. It looks like there is no call to the JavaScript.
Could you please help me to understand where is my mistake after pressing the add button, so that no matter how many forms I create, I will have relevant calls to the functions in my controller where it brings the relevant data to the depentened drop down menus?
Thank you very much!
<div class="container box">
<br />
<br />
<h3 align="center">Available Championships</h3>
<br />
<?php echo form_open_multipart('dynamic_dependent'); ?>
<div id="dynamic_field">
<div class="form-group">
<select name="country[]" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row->id.'">'.$row->name.'</option>';
}
?>
</select>
</div>
<br />
<div class="form-group">
<select name="championship[]" id="championship" class="form-control input-lg">
<option value="">Select Championship</option>
</select>
</div>
<br />
<div class="form-group">
<select name="home_team[]" id="home_team" class="form-control input-lg">
<option value="">Select Home Team</option>
</select>
</div>
<div class="form-group">
<select name="away_team[]" id="away_team" class="form-control input-lg">
<option value="">Select Away Team</option>
</select>
</div>
<div class="form-group">
<input type="text" name="prediction[]" id="prediction">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</div>
</div>
<div class="form-group">
<button>Submit</button>
</div>
<?php echo form_close(); ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<div id="row'+i+'"><div class="form-group"><select name="country[]" id="country" class="form-control input-lg"><option value="">Select Country</option><?php foreach($country as $row) { echo '<option value="'.$row->id.'">'.$row->name.'</option>'; } ?></select></div><div class="form-group"><select name="championship[]" id="championship" class="form-control input-lg"><option value="">Select Championship</option></select></div><div class="form-group"><select name="home_team[]" id="home_team" class="form-control input-lg"><option value="">Select Home Team</option></select></div><div class="form-group"><select name="away_team[]" id="away_team" class="form-control input-lg"><option value="">Select Away Team</option></select></div><div class="form-group"><input type="text" name="prediction[]" id="prediction"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></div></div></div>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
var res = confirm('Are You Sure You Want To Delete This?');
if(res==true){
$('#row'+button_id+'').remove();
$('#'+button_id+'').remove();
}
});
});
$('#country').change(function(){
var country_id = $('#country').val();
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_state",
method:"POST",
data:{country_id:country_id},
success:function(data)
{
$('#championship').html(data);
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
}
else
{
$('#championship').html('<option value="">Select Championship</option>');
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
$('#championship').change(function(){
var championship_id = $('#championship').val();
if(championship_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_city",
method:"POST",
data:{championship_id:championship_id},
success:function(data)
{
$('#home_team').html(data);
$('#away_team').html(data);
}
});
}
else
{
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
</script>

Related

Looping Item, with autofill object using Javascript or Jquery

Trying to make the item to be auto fill when select the item. But the item is in looping with will result using the same id if jQuery, so what is the best method for me? like in the image where user pick the item, then the data will be autofill
$countItem = 0;
foreach($SopProcess AS $process)
{
$countItem++;
if($process["item_proc_det"]== 2){
echo '<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Activity:</label>
<input type="input" class="form-control" value="'.$process["name_process"].' '. $process["item_proc_num"].'" readonly/>
<input type="hidden" id="postcode" class="form-control" value="'.$process["item_proc_num"].'" readonly/>
</div>
</div>
<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Substance Use</label>
<fieldset>
<div class="input-group">
<select class="form-select" id="substance'.$countItem.'" name="item_media[]" required>
<option value="">Please Select</option>';
foreach($treat as $item_media){
$id = $item_media['media_treat_id'];
$name = $item_media['media_treat_brand'];
echo "<option value='$id'>$name</option>";
}
echo'
</select>
<input type="nu" id="valueitem'.$countItem.'" class="form-control" placeholder="Input amount use" aria-label="Amount" />
<select class="form-select" id="basicSelect" id="unititem'.$countItem.'" name="item_media[]" required>
<option value="">Select Unit</option>';
echo "
<option value='3'>ml</option>
<option value='2'>g</option>
<option value='7'>Unit</option>";
echo'
</select>
</div>
</fieldset>
</div>
</div>
';
}}
For Javascript
$$('#substance').on('change', function(){
var activityID = $('#substance').val();
if(itemId){
$.ajax({type:'POST',
url:'?syspath=ajax&controller=ajax&action=generateItemValue',
data: { 'activitiyNum': itemNumID, 'sraID': sraID, 'seasonID':seasonID,'DetAct': actID },
success:function(html){
$('#valueitem').html(html);
$('#unititem').html(html);
}
});
}else{
('#itemName').html('<option value="">Select Activity number first</option>');
}
})
I am expecting, the data on the valueitem and unititem will be filled based on the item that were select by the user, but I think am using the wrong way as ID must be unique. I need some help a proper way to use the js or query in which the data will be auto fill even the object are in looping

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>
...

I am facing an error with codeigniter pop modal with ajax

I have two fields which one is province and another is district which are:
<div class="form-group">
<label class="control-label col-sm-4">Province *</label>
<div class="col-sm-5">
<select id="province" name="province" class="form-control selectboxit" onchange="get_districts(this.value)" required="">
<option value="">Select Province</option>
<?php
$province = $this->db->get('provinces')->result_array();
foreach ($province as $row):
?>
<option value="<?php echo $row['provinceID']; ?>">
<?php echo $row['province_name']; ?>
</option>
<?php
endforeach;
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">District *</label>
<div class="col-sm-5">
<select id="district" name="district" class="form-control" >
<option value="" selected="selected">First Select Province</option>
</select>
</div>
</div>
And the script is here:
<script type="text/javascript">
function get_districts(val) {
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_district/' + val,
success: function (response)
{
jQuery('#district').html(response);
}
});
}
function valida(val) {
if (val == "Rent") {
document.getElementById("rent_amount").disabled = false;
}
if (val == "Personal") {
document.getElementById("rent_amount").disabled = true;
}
}
</script>
It works fine for me in views pages but when I am working these things in pop modal it's not working by clicking this link the pop up modal shows up with data but the ajax isn't working:
<a href="#" onclick="showAjaxModal('<?php echo base_url(); ?>index.php?modal/popup/modal_branche_edit/<?php echo $row['branch_id']; ?>');">
<i class="fa fa-edit"></i>
</a>
The pop up modal is working fine but the ajax is not working.
Please any suggestion?

Search key add on url with jQuery

I have a short problem. This is my html code:
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>
This is the jQuery:
$(".btn").click(function(){
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url;
});
Ok, so when I select an category from options and click on J'EN PROFITE all works fine redirect me to the website. But when I write something on "Mots Cles" I want to add on my search key link: http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey. So how can I add the text on my link?
Thank you so much for your help!
You need to check if the field is populated and based on that, you can append it to the URL. Check the below code:
$(".btn").click(function() {
var searchString = '';
if($("#searchString").val() != '')
var searchString = $("#searchString").val();
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url + '/' + searchString;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles" id="searchString">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>

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>

Categories