3 dynamic combobox use php and jquery - javascript

Need help...
How if I want to make 3 select options use jquery,
Parent
Child
Grandchild
Can anyone help?
I will appreciate your help...
This is my code:
<?php
$parentQuery = $db->query("SELECT * FROM kategori WHERE parent = 0 ORDER BY nama_kategori");
$kategori = ((isset($_POST['parent']) && !empty($_POST['parent']))?sanitize($_POST['parent']):'');
?>
<div class="form-group col-md-3">
<label for="parent">Kategori 1:</label>
<select class="form-control" id="parent" name="parent">
<option value="" <?php echo (($kategori =='')?'selected':''); ?>> Select</option>
<?php while($p = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?php echo $p['id_kategori'];?>" <?php echo (($kategori == $p['id_kategori'])?'selected=':''); ?>>
<?php echo $p['nama_kategori'];?>
</option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 2:</label>
<select class="form-control" name="child" id="child"></select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 3:</label>
<select class="form-control" name="grandchild" id="grandchild"></select>
</div>

Related

Stepformwizard is not getting hidden. Overflowing on right of the screen

Am not very expert in jquery and stepformwizard. Am working on code written by someone else. The issue is the multistepformwizard fieldset is used and the next step should be loaded only when Next button is clicked. But currently both of the steps are visible on the screen with extra horizontal scrollbar. I dont want the step 2 form to be visible. Here is the html and jquery code.
<div class="ztab-sec ztab-desbrd bksrvsec bksecrv2">
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url()?>service/service_request" method="POST" id="wizard_example_6" autocomplete="off">
<input type="hidden" value="<?php echo $ownerArr[0]['email_id']; ?>" name="email_id">
<input type="hidden" value="<?php echo $ownerArr[0]['phone']; ?>" name="mobile">
<fieldset>
<legend>Basic information about your car</legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Vehicle Brand</label>
<select id="u_car_id" class="form-control" name="car_id" required>
<option selected disabled value="">Select a Car</option>
<?php foreach ($cars as $car_details) : ?>
<option value="<?php echo $car_details['user_car_id']; ?>"><?php echo $car_details['makesTitle']; ?> (<?php echo $car_details['modelsTitle']; ?>) <?php echo $car_details['car_reg_no']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Variants</label>
<input type="text" class="form-control" name="variant" placeholder="Variants" required data-parsley-group="block0" id="variant" readonly pattern="^[a-zA-Z\s]*$">
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Transmission</label>
<input type="text" class="form-control" placeholder="Transmission" name="transmission" readonly required data-parsley-group="block0" id="transmission" pattern="^[a-zA-Z\s]*$">
</div>
</div>
</div>
<legend class="clearfix">Select service for your car? <a href="#" class="car-link pull-right" data-toggle="modal" data-target="#myModal3" >Add New Car</a></legend>
<div class="row bkmargin">
<div class="col-md-4 col-sm-4">
<div class="form-group besrvx">
<input id="option-one" name="service_type" value="1" class="styled-radio " type="radio" data-parsley-group="block0" required data-required-message="Please check one service">
<label class="srvlabel" id="1" for="option-one"><strong>Basic Service: </strong>
<span class="srvspa">3 months or 5000 kms (whichever is earlier)</span>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vehicle picked up address </legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Select Address</label>
<select class="form-control" id="user_add_id" name="pick_id">
<option selected disabled>Select Address</option>
<?php $i=1; foreach ($address as $user_details) : ?>
<option value="<?php echo $user_details['add_id'] ?>"> Address <?php echo $i; ?></option>
<?php $i++; endforeach; ?>
<option id="neww" class="neww" value="neww">Select new Address</option>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Address Type</label>
<select class="form-control" id="add_type" name="add_type" disabled>
<option value="" selected disabled>Select Address Type</option>
<option value="Home">Home Address</option>
<option value="Office">Office Address</option>
<option value="Other">Other Address</option>
</select>
</div>
<div class="row bkmargin">
<noscript>
<input class="nocsript-finish-btn sf-right nocsript-sf-btn" type="submit" value="submit"/>
</noscript>
</div>
</fieldset>
</form>
I have skipped some part as its a long form. I want the second fieldset should only be visible when user clicks on next button
here is the jquery
w6 = $("#wizard_example_6").stepFormWizard({
onNext: function(b, a) {
return $("#wizard_example_6").parsley().validate("block" + b)
},
onFinish: function(b) {
return $("#wizard_example_6").parsley().validate()
}
});
var d = window.location.hash.match(/^#step-(\d+)/),
c = 0;
null !== d && (c = d[1] - 1);
w7 = $("#wizard_example_7").stepFormWizard({
startStep: c,
onNext: function(b, a) {
window.location.hash = "#step-" + (b + 2)
},
onPrev: function(b, a) {
window.location.hash = "#step-" + b
},
onFinish: function(b) {
window.location.hash = "#form-sended"
}
})
};
$(document).ready(function() {
prepare_example();
$("pre code").each(function(c, b) {
hljs.highlightBlock(b)
});
var d = $(location).attr("search").match(/t=([a-z]+)/);
"undefined" != typeof d && null != d ? ($(".sf-wizard").parent().removeClass("sf-sea").addClass("sf-" + d[1]), $(".bt-" + d[1]).removeClass("btn-default").addClass("btn-info")) : $(".bt-sea").removeClass("btn-default").addClass("btn-info")
});
Please help me with this. I have tried using but no luck also changed css display:none inplace of block but couldnt resolve the issue.

how to show comma separated values in form

I am using coordinator php framework with javascript and ajax. comma separated values is not show but single values working fine . i have table field like (edit_coach = 9,10,11), (edit_depot = 5,Spur,SPJ) and edit_task_type = 5 please share valuable idea...
database
edit_coach = 9,10,11 //not show data
edit_depot = 5,Spur,SPJ //not show data
edit_task_type = 5 //working fine
JavaScript Code here
function edit_assign_train(val)
{
$.ajax({
url: "<?php echo base_url(); ?>edit_assign_train",
type: "post",
data: "atrain_id="+val,
success: function (response)
{
var res = JSON.parse(response);
console.log(res);
$('#edit_train_no').val(res[0]['train_no']);
$('#edit_depot').val(res[0]['depot_id']+'-'+res[0]['depot_code']+'-'+res[0]['depot_name']).trigger('change');// not working
$('#edit_coach').val(res[0]['coach']).trigger('change');// not working
$('#edit_task_type').val(res[0]['task_type']).trigger('change');//working fine
$('#edit_tot_coach').val(res[0]['tot_coach']);
$('#edit_janitor').val(res[0]['janitor']);
$('#edit_time').val(res[0]['time_val']);
$('#edit_id').val(res[0]['id']);
}
});
HTML Code here
<div class="row">
<label class="col-sm-4 col-form-label text-right">Depot : </label>
<div class="col-sm-8">
<div class="form-group">
<select id="edit_depot" class="form-control">
<?php foreach ($depot_val as $list3) { ?>
<option value="<?php echo $list3['id'] ?>-<?php echo $list3['depot_code'] ?>-<?php echo $list3['depot_name'] ?>"><?php echo $list3['depot_name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Coaches : </label>
<div class="col-sm-8 pt-2">
<select class="form-control tasktype-select" id="edit_coach" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($coach_val as $list2) { ?>
<option value="<?php echo $list2['id'] ?>"><?php echo $list2['coach_name'] ?></option>
<?php } ?>
</select>
</div>
</div><br>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Task Type : </label>
<div class="col-sm-8">
<select class="form-control tasktype-select" id="edit_task_type" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($res_val as $list1) { ?>
<option value="<?php echo $list1['id'] ?>"><?php echo $list1['task_type'] ?></option>
<?php } ?>
</select>
</div>
</div>
Try this:
$('#edit_depot').val(res[0]['depot_id']).trigger('change');

auto submit or auto refresh the dropdown

I want to auto submit or auto refresh I'm not sure yet because I little bit confused.
I have three dropdown. Which the first two dropdown we select from a database to choose team A and team B from the database and the third dropdown is to display team A and team B - this is where I lost it. How can I view it when I do not submit the form yet?
here the my html code.
<form action="addmatch.php" method="post" >
<div class="match-form" >
<div class="match-row">
<label>
<a>Date</a>
<input type="date" name="matchdate" style="margin-left:-8px;" required>
</label>
</div>
<div class="match-row">
<label>
<a>Time</a>
<input type="time" name="matchtime" style="margin-left:-8px;" required>
</label>
</div>
<div class="match-row">
<label>
<a>Category</a>
<select name="category" size="1" style="margin-left:-30px;" required>
<option>select</option>
<?php
if($stmt=$conn->query("select * from categorymatch"))
{ while($r=$stmt->fetch_array(MYSQLI_ASSOC))
{ ?>
<option value=<?php echo $r['categoryId'] ?>><?php echo $r['categoryName'] ?></option>
<?php } } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Team A </a>
<select name="teamA" size="1" style="margin-left:-24px;" onchange="submit" required>
<option>select</option>
<?php
if($stm=$conn->query("select TEAMLISTID, TEAMLISTNAME from teamlist"))
{ while($s=$stm->fetch_array(MYSQLI_ASSOC))
{ ?>
<option value=<?php echo $s['TEAMLISTID'] ?>><?php echo $s['TEAMLISTNAME'] ?></option>
<?php } } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Team B </a>
<select name="teamB" size="1" style="margin-left:-24px;" onchange="submit" required>
<option>select</option>
<?php
if($stm=$conn->query("select TEAMLISTID, TEAMLISTNAME from teamlist"))
{ while($s=$stm->fetch_array(MYSQLI_ASSOC))
{ ?>
<option value=<?php echo $s['TEAMLISTID'] ?>><?php echo $s['TEAMLISTNAME'] ?></option>
<?php } } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Handicap </a>
<select name="handicap" size="1" style="margin-left:-33px;" required>
<option>select</option>
<option>1:0</option>
<option>3/4:0</option>
<option>1/2:0</option>
<option>1/4:0</option>
<option>0:0</option>
<option>0:1/4</option>
<option>0:1/2</option>
<option>0:3/4</option>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Status Match </a>
<select name="statusmatch" size="1" style="margin-left:-57px;" required>
<option>select</option>
<?php
if($st=$conn->query("select * from statusmatch"))
{ while($a=$st->fetch_array(MYSQLI_ASSOC))
{ ?>
<option value=<?php echo $a['statusmatchId'] ?>><?php echo $a['statusmatchName'] ?></option>
<?php } } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Tip Type </a>
<select name="tiptype" size="1" style="margin-left:-30px;" required>
<option>select</option>
<?php
if($stt=$conn->query("select * from tiptype"))
{ while($b=$stt->fetch_array(MYSQLI_ASSOC))
{ ?>
<option value=<?php echo $b['tiptypeId'] ?>><?php echo $b['tiptypeName'] ?></option>
<?php } } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Tip </a>
<select name="tip" size="1" required>
<option>select</option>
<?php
if($stm=$conn->query("select teamA, teamb from matchlist"))
{ ?>
<option value=<?php ?>><?php echo $s['teamA'] ?></option>
<option value=<?php ?>><?php echo $s['teamb'] ?></option>
<?php } ?>
</select>
</label>
</div>
<div class="match-row">
<label>
<a>Score </a>
<input type="text" name="scoreteam" style="margin-left:-15px;">
</label>
</div>
<div class="match-row">
<label>
<a>Result </a>
<select name="result" size="1" style="margin-left:-19px;">
<option>select</option>
<option>Win</option>
<option>Loss</option>
<option>Draw</option>
</select>
</label>
</div>
<input type="submit" id="someText" value="Submit" style="margin-left:200px; margin-top:30px; margin-bottom:20px; padding:10px;">
</div>
</form>
can you help me solve problem?
Thanks!

i always get the last selected value in hidden field

I am trying to pass the selected value into a hidden field but I always get the last value of option.
<div class="form-group">
<label class="col-sm-3 control-label"><?php echo get_phrase('section');?></label>
<div class="col-sm-5">
<select name="section_id" class="form-control selectboxit" style="width:100%;">
<?php
foreach($sections as $row):
?>
<option value="<?php echo $row['section_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
<input type="text" name="section_id" value="<?php echo $row['section_id']?>">
<div class="form-group">
<label class="col-sm-3 control-label"><?php echo get_phrase('subject');?></label>
<div class="col-sm-5">
<select name="subject_id" class="form-control selectboxit" style="width:100%;">
<?php
$subjects = $this->db->get_where('enroll' , array('section_id' => $section_id))->result_array();
foreach($subjects as $row):
?>
<option value="<?php echo $row['student_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
i want to pass the hidden field value to query inside the second dropdown how to do this
You can not directly pass section_id value to a text field, because it will always give last section_id. You should use below jquery to assign selected option value to text field:
$(document).ready(function () {
$('.selectboxit').on('change', function() {
$('#section_id').val(this.value);
})
});

Setting a default value when populating dropdown with Ajax

I've some code I've been working on, which uses AJAX to generate a second dropdown based on information in the database.
For example
If you select BMW
it will populate the second list with all available BMW models, this is working correctly, but I would like one of the fields in the second drop down to remain SELECT, or ANY, so that they can search solely on car Make.
I've had a look online and the solutions seem very complicated for what I would hoped was a simple fix, I'm now stuck on how to fix the issue, should I just add a separate form for just make? Although this wouldn't be as user friendly.
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form id="fitment_search" action="gallery.php" method="GET">
<div class="col-sm-5">
<div class="col-sm-4">
<h5>Vehicle Make:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="make" onchange="get_model(this.value)">
<option value="make">SELECT</option>
<?php while ($row = mysqli_fetch_assoc($makeResult)) : ?>
<option
value="<?php echo $row['make']; ?>"><?php echo $row['make']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="col-sm-4">
<h5>Model:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="model" id="fitment_model">
<option value="">SELECT</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-default btn-sm btn-primary"><i
class="fa fa-pencil"></i> Search Now
</button>
</div>
</form>
</div>
Heres the code form the seperate php file.
$make=$_GET["make"];
$sql2 = "SELECT `model` FROM `fitment` WHERE `make` = '$make' ORDER BY `model` ASC";
$result = mysqli_query($db, $sql2);
?>
<select name="models"> <?php
while($row = mysqli_fetch_array($result)) { ?>
<option value="<?php echo $row['model']?>"><?php echo $row['model'] ?></option><?php
} ?>
</select>
just change:
<select name="models"> <?php
TO
<select name="models">
<option value="" >Select</option>
<?php

Categories

Resources