We Keep Coding

Radio button error in codeigniter

I am working on a project that includes an search function , currently the search works fine for that i am using an dropdown and select the value .
this is code that i am using with dropdown
<div class="form-group form-group-lg form-group-icon-left search"><i class="fa fa-plane input-icon"></i>
<label>Select an option</label>
<select class="typeahead form-control" name="search">
<?php foreach($search_des as $sd) { ?>
<option value="<?php echo $sd->des_category_id;?>">
<?php echo $sd->des_category_name;?></option>
<?php } ?>
</select>
<br>
</div>
Now as per our client requirement they need to display all the items with a radio button and also they want to submit the page by clicking on the radio
. I tried to use radio button it doesnot works properly.
This is the code that ia am using with radio button.
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
while using this all items are listing correctly but all the radio buttons are checked, also i dont know how to auto submit a form using a radio button.

You'll need to use Javascript to trigger submitting the form on click.
Add an event listener to the radio button being clicked, and then trigger the form to submit when that event happens.
Something like this should work, just change the IDs accordingly.
var form = document.getElementById("form-id");
document.getElementById("radio-id").addEventListener("click", function () {
form.submit();
});

You did not give the
name
attribute
to input
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input name="search" class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio"><?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>

Ok, so there are multiple things to be addressed in this question.
First, as mentioned above, you need to add the name tag to your radio button.
Secondly, you need to use JavaScript to submit the form on the click event of radio button. To get the click event set up, add the class at your radio button.
Posting the answer here with the link to my Codepen.
Code
<form name="theForm">
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control radioClass" value="<?php echo $sd->des_category_id;?>" type="radio" name="category">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
</form>
JS
var classname = document.getElementsByClassName("radioClass"); // The radio button class we've added
var myFunction = function() {
document.theForm.submit(); //theForm is the name of the form.
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false); //Adding listener to the click event.
}
You can play with the code (of course PHP script has been replaced with the dummy data) at this link: https://codepen.io/akshit_ij/pen/KydVXz
Let me know if it helps.

Complex filtering on checkbox click in jQuery

I basically have two tables which I need to filter like this:
Table 1 : Users
Table 2 : BrandUsers
Now I've made the following HTML:
<div class="pop-us">
<div class="pop-j">
<div class="pop-journey">
<?php foreach($users as $user) {?>
<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
<?php } ?>
</div>
</div>
<div class="pop-city">
<div class="pop-txt"><?=$this->translate('Please choose a user.')?></div>
<!-- city -->
<?php for ($i = 0; $i < count($states); $i++) { ?>
<div class="pop-city-co">
<?php for ($j = 0; $j < count($states[$i]['citys']); $j++) { ?>
<label><input class="check-city" type="checkbox" name="" value="<?=$states[$i]['citys'][$j]['cityId']?>" data-id="<?=$i ?>"><?=$states[$i]['citys'][$j]['cityName']?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<div class="modal-footer pop-footer">
<button type="button" class="btn btn-default pop-close-us">Close</button>
<button type="button" class="btn btn-primary pop-save-us">Save</button>
</div>
</div>
The left part of the modal popup lists all of the users... Now my wish is to when each some check-box is clicked in the left side, I'd like to pass the value of the UserId to the function and pass it to my query to search out the BrandUsers table... Now there are two types of things that I'd like to show on my modal popup..
When the user clicks on 1 user... All of the brands are listed out on the right side. The brands for which usedId exists in BrandUser table, I'd like to make them checked in the list, and the ones that are non-existent, I'd simply like to leave them un checked...
How can I make an event when an check-box is checked on the left side so that I pass the parameter UserId to DB and then display something on the right side of the modal popup ??
Can someone help me out with this?

Make your checkboxes like this. Note that I have added a data-id attribute that has the user id.
<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" data-id="<?=$user['id'] ?>" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
And then add this to attach click handlers to all checkboxes
$('.check-city').on('click',function() {
var user_id = $(this).data('id);
$.ajax({
url: 'http://myserver.com/action' + 'user_id=' + user_id;
success: function(data) {
// Update modal popup with data
}
});
});
Hope this helps.

Toggling php generated div elements

I am fetching data from using mysql to generate div tags in a sort of hierarchy structure. There are div tags inside div tags which are inside div tags. This is created using nested while loops. The output is like this where the ids are uniquely made through php:
<div class="holder">
<label class="toggle" id=$courseCategory>Category 1</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 1</label>
<div class="content" id=$courseTopic>
</div>
</div>
<label class="toggle" id=$courseCategpry>Category 2</label>
</div>
And that is the basic structure of the generated content.
The PHP that is creating the structure is this:
<?php
include "connect.php";
global $con;
$qryCat=mysqli_query($con, "SELECT DISTINCT CourseCategory FROM tblCourse");
while($row=mysqli_fetch_array($qryCat, MYSQL_ASSOC)){
$courseCat = $row['CourseCategory'];
//print $courseCat
echo "<label class ='toggle' id='".$courseCat."'>".$courseCat."</label>";
echo "<div class ='content' style = 'display:none;' id='div".$courseCat."'>";
$qryTop=mysqli_query($con, "SELECT DISTINCT CourseTopic FROM tblCourse WHERE CourseCategory = '$courseCat'");
while($row=mysqli_fetch_array($qryTop, MYSQL_ASSOC)){
$courseTop = $row['CourseTopic'];
//print $courseTop;
echo "<label class ='toggle' id='".$courseTop."'>".$courseTop."</label><br/>";
echo "<div class ='content' style = 'display:none;' id='div".$courseTop."'>";
$qryLevel=mysqli_query($con, "SELECT DISTINCT CourseLevel FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop'");
while($row=mysqli_fetch_array($qryLevel, MYSQL_ASSOC)){
$courseLevel = $row['CourseLevel'];
//print $courseLevel;
echo "<label class ='toggle' id='".$courseTop.$courseLevel."'>".$courseLevel."</label><br/>";
echo "<div class ='content' style = 'display:none;' id='div'".$courseTop.$courseLevel."'>";
$qryCourse=mysqli_query($con, "SELECT DISTINCT CourseCode, CourseName FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop' AND CourseLevel = '$courseLevel'");
while($row=mysqli_fetch_array($qryCourse, MYSQL_ASSOC)){
$courseCode =$row['CourseCode'];
$courseName = $row['CourseName'];
//print $courseName;
echo "<label id='".$courseCode."'>".$courseName."</label><br/>";
echo "<div id='div".$courseCode."'></div>";
}
echo "</div>";
}
echo "</div>";
}
echo "</div><br/>";
}
?>
I want to use jQuery to toggle each section like a menu. So when I press Category 1, All the topics under Category 1 are show, which I can then click on the topics to show the next level of the menu.
I have tried a couple of different things in trying to get this to work. The below code works for the first level. I can toggle the categories, however nothing happens when clicking on the topics that are shown.
$(document).ready(function(){
$(".toggle").click(function() {
$(this).next(".content").toggle("slow");
});
});
I have also tried this code which allows the entire "tree" to expand, however it toggles all siblings.
$(document).ready(function(){
$(".toggle").click(function() {
$(this).siblings(".content").toggle("slow");
});
});
Both have aspects that I want for the final result but I can't figure out how to navigate the tree in order to do what I want.
Any help would be greatly appreciated.
EDIT: After looking through the PHP to see if that was the issue I still can't get it working. I have added the PHP to see if someone with sharper eyes can see if that is the problem.

Can you try it? Is this you are looking or
you are looking like "ACCORDION MENU"?
Your Code is working fine. The Problem may be there is no content in Category 2.
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle").click(function() {
$(this).next(".content").toggle("slow");
});
});
</script>
CSS
<style>
label + .content{
display:none;
}
label + .open{
display:block;
}
</style>
HTML
<div class="holder">
<label class="toggle" id=$courseCategory>Category 1</label>
<div class="content open" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 1</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<label class="toggle" id=$courseCategpry>Category 2</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 2</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<label class="toggle" id=$courseCategpry>Category 3</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 3</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
</div>
Attempt #2 In php
<div class="holder">
<?php
$count=0;
for($i=0;$i<5;$i++){
$count=$count+1;
?>
<label class="toggle" id=$courseCategory>Category <?php echo $count; ?></label>
<div class="content open" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic <?php echo $count; ?></label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<?php } ?>
</div>

Your are binding click event that are being generated dynamically. So may be the click function is not binded with elements at that moment.
Check below link
http://jsfiddle.net/23yxj3ny/1/
$(".holder").on('click','.toggle',function() {
$(this).siblings(".content").toggle("slow");
});

For future reference, the problem was with the PHP. I guess when the was being echo'd after the it was changing the structure of the . After removing the it works perfect!

PHP + Jquery Change Value of Textbox according to two Dropdown

I try to update text box value according to 2 dropdown. 1 drop down contain price1 and other drop down contain price 2, now I want that when user select price from both drop down then textbox display like that "price1 + price2 = total" How can I marge both value in single textbox value ? my price comes from database. Here is FIDDLE
PHP CODE
<div class="three columns">
<div class="picker">
<select name="city" required>
<option value="" disabled>Select</option>
<?php
$result = mysqli_query($con,"SELECT * FROM area");
while($row = mysqli_fetch_array($result))
{
?>
<option value="New"><?php echo $row['city']."( $ ".$row['area'].")";; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="four columns">
<div class="picker">
<select name="position" required>
<?php
$result = mysqli_query($con,"SELECT * FROM pricing");
while($row = mysqli_fetch_array($result))
{
?>
<option value="<?php echo $row['position']; ?>"><?php echo $row['position']."( $ ".$row['price'].")"; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="row">
<div class="two columns">
Total
</div>
<div class="ten columns">
<div class="field">
<input class="input" type="total" id="total" placeholder="" name="total" disabled/>
</div>
</div>
</div>

add a class on both combo and write one event this way:
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
FIDDLE DEMO
or you can do this way:
$('.combo').change(function() {
$('#firstvalue').val($('#combo').val() +"+"+$('#combo1').val()+"=");
$('#firstvalue1').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
SECOND DEMO

use this..
$(document).ready(function() {
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
$('#combo1').change(function() {
$('#firstvalue1').val($('#combo1').val());
});
});

you can do it by using variables:
if you wanted to sum of two dropdown options then you have to give integer value of the seond dropdown not the string(like a3,a4 should be 3,4). see demo html.
$(document).ready(function() {
price1=0;
price2 =0;
$('#combo').change(function() {
price1= this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
$('#combo1').change(function() {
price2 = this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
});
demo

jQuery on change dropdown call web service to load options

I have a form with a dropdown list and a variable amount of options (in the form of checkboxes and text inputs).
What I want to achieve is onchange value of the dropdown list, call a web service and load the various options below it. I know roughly I have to use jQuery's onchange event and have Ajax load the markup into the div.
But how exactly do I achieve that?
I am using Bootstrap 3, and some of my form code is below. I am not sure how to write my Javascript or Ajax part, though.
Dropdown list
<div class="form-group">
<label for="inputBranch" class="col-lg-2 control-label">Branch</label>
<div class="col-lg-10">
<select class="form-control" id="resBranch">
<?php
// print all branch name
// if is same as merchantID, mark as selected
foreach($branchesArray as $branch) {
if($branch['merchantID'] == $merchantID) {
echo "<option selected>" . $branch['name'] . "</option>";
} else {
echo "<option>" . $branch['name'] . "</option>";
}
}
?>
</select>
</div>
</div>
Options
<div class="form-group">
<label for="" class="col-lg-2 control-label">Options</label>
<div class="col-lg-10">
<?php
foreach ($featuresArray as $feature) {
?>
<div class="checkbox">
<label>
<input type="checkbox" value="<?php echo $feature['customValue']; ?>">
<?php echo $feature['customValue']; ?>
</label>
</div>
<?php
} // end foreach
?>
</div>
</div>

You could send an ajax request with the currently selected form option to a php web service which returns the html to add to the form.
The js could look something like this:
$( document ).ready(function () {
$('select').change(function () {
$.get('ajax.php?option=' + $('select').val(), function(data) {
if(data == "error")
{
//handle error
}
else {
$('div.ajax-form').append(data); //create an element where you want to add
//this data
}
});
});
});
The php might look like this:
if(isset($_GET['option'])) {
if($_GET['option'] == 1)
{
//echo form data for option one here
}
elseif($_GET['option'] == 2)
{
//echo form options for option two here
}
elseif($_GET['option'] == 3)
{
//echo form options for option two here
}
//other options here
else
{
echo "error"; //select value not correct
}
}