I made a code that creates a list of multiple-checkbox from query, this code allows me to select group of choices either from the parent choice or individually
everything is fine with me till the moment of echo the selected check-boxes in the input textbox, i don't know how to do that!
I'd like to get only the selected check-boxes of the children choices into the input text box like this name1, name2, ...etc
<input type="text" class="form-control" name="checkbox" value=""/>
<?php
$query=mysqli_query($db,"SELECT * FROM tblmainjobs");
while ($row = mysqli_fetch_assoc($query)):
?>
<section>
<h3>
<label><input type="checkbox" /> <?php echo $row["mainjob"]; ?></label>
</h3>
<?php
$query2=mysqli_query($db,"SELECT userjob FROM users WHERE usertype = 'user' AND '".$row["mainjob"]."' = users.mainjob GROUP BY users.userjob, users.usertype");
while ($row2 = mysqli_fetch_assoc($query2)):
?>
<div class="children">
<label><input type="checkbox" name="checkbox"/> <?php echo $row2["userjob"]; ?></label>
<?php
endwhile;
?>
</section>
<?php endwhile; ?>
<script type="text/javascript">
$("h3 input:checkbox").cbFamily(function (){
return $(this).parents("h3").next().find("input:checkbox");
});
</script>
</section>
my list of multiple checkbox is
enter image description here
Related
i have a radio input whose values are coming dynamically and creating multiple radio fields. Long list of radio fields are displayed.
<?php
for ($i = 0; $i < $total_trades; $i++) {
$array_trade_data = $data_trade_data[$i];
$Trade_name = $array_trade_data['name'];
$Trade_id = $array_trade_data['id'];
?>
<input type="radio" class="trade" id="<?php echo $Trade_id; ?>" name="trade" value="<?php echo $Trade_id; ?>" ><?php echo $Trade_name; ?><br>
<?php } ?>
I want to Keep the selected radio button checked and clicked upon page refresh.
you cold use checked attribute
<input type="radio" name="trade">1<br>
<input type="radio" name="trade" checked>2<br>
<input type="radio" name="trade">3
to click something like
<script>document.getelementbyid("<?php echo $Trade_id; ?>").click();</script>
I have a dropdown list then submit form when you click select values from dropdown
using this code
onchange="this.form.submit()"
But I don't know how to put this on my dropdown check my code below,
<?php foreach($options as $key_option=>$val_option):?>
<div class="col-lg-3">
<label class="control-label">
<?php echo $required_notice.$val_option['option']?>
<?php if(!empty($options_lang[$key][$key_option]->hint)):?>
<i class="icon-question-sign hint" data-hint="
<?php echo $options_lang[$key][$key_option]->hint;?>">
</i>
<?php endif;?>
</label>
<?php
if(isset($options_lang[$key][$key_option])){
$drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option['values'], '')),explode(',',check_combine_set($val_option['values'], isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
} else {
$drop_options = array();
}
// If you don't want translation to website langauge uncomment this 1 line below:
// $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));
$drop_selected = set_value('option'.$val_option['id'].'_'.$key, isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'');
echo form_dropdown ('option'.$val_option['id'].'_'.$key, $drop_options, $drop_selected, 'class="form-control" id="inputOption_'.$key.'_'.$val_option['id'].'" placeholder="'.$val_option['option'].'" '.$required_text)
?>
</div>undefined</div>
<?php endforeach;?>
Output
Thankyou
NOTE: My dropdown is inside a foreach
You should put your onchange prop into your form_dropdown function so your select option will have the event you want, submit while option changed.
<div class="col-lg-3">
<label class="control-label">
<?php echo $required_notice.$val_option['option']?>
<?php if(!empty($options_lang[$key][$key_option]->hint)):?>
<i class="icon-question-sign hint" data-hint="
<?php echo $options_lang[$key][$key_option]->hint;?>">
</i>
<?php endif;?>
</label>
<?php
if(isset($options_lang[$key][$key_option]))
{
$drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option['values'], '')),explode(',',check_combine_set($val_option['values'], isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
}
else
{
$drop_options = array();
}
// If you don't want translation to website langauge uncomment this 1 line below:
// $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));
$drop_selected = set_value('option'.$val_option['id'].'_'.$key, isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'');
echo form_dropdown ('option'.$val_option['id'].'_'.$key, $drop_options, $drop_selected, 'onchange="this.form.submit()" class="form-control" id="inputOption_'.$key.'_'.$val_option['id'].'" placeholder="'.$val_option['option'].'" '.$required_text)
?>
</div>undefined</div>
I have the following option menu in a form that will insert the fields into a table:
<option value="">select staff</option>
<?php
do {
?>
<option value="<?php echo $row_Staff['Staff_Name']."||".$row_Staff['Email']?>">
<?php echo $row_Staff['Staff_Name']?></option>
<?php
} while ($row_Staff = mysql_fetch_assoc($Staff));
$rows = mysql_num_rows($Staff);
if($rows > 0) {
mysql_data_seek($Categories, 0);
$row_Staff = mysql_fetch_assoc($Staff);
}
?>
</select>
I have 2 fields from source table in value of option from technique explained in How to post two values in an option field?: Staff_Name and Email.
I am trying to insert both fields from the form into a table using:
<input type="hidden" name="Staff_Name" class="form-control" id="Staff_Name" value=<?php
$staff =$_POST['Staff_Data'];
$staff_name = explode("||", $staff);
echo $staff_Name[0];
?> />
and
<input type="hidden" name="Email" class="form-control" id="Email" value=<?php
$staff =$_POST['Staff_Data'];
$email = explode("||", $staff);
echo $email[1];
?> />
Unfortunately, I can see the 2 fields separated by "||" in the table if I insert the option menu value but cannot seem to insert Staff_Name or Email into individual fields. On insert both fields are blank. Any help would be appreciated.
Instead of combine staffname and staffemail in the dropdown value. Please staffname in dropdown value and staffemail in the property of dropdown and onchange of the dropdown set those values in the hidden inputs so you will easily get those values on the form submission.
Please go through below code and let me know if you have any query.
//Dropdown
<select id="ddStaff">
<option value="">select staff</option>
<?php
do { ?>
<option value="<?php echo $row_Staff['Staff_Name']; ?>" staff-email = "<?php echo $row_Staff['Email'];?>">
<?php echo $row_Staff['Staff_Name']?>
</option> <?php
} while ($row_Staff = mysql_fetch_assoc($Staff));
$rows = mysql_num_rows($Staff);
if($rows > 0) {
mysql_data_seek($Categories, 0);
$row_Staff = mysql_fetch_assoc($Staff);
}
?>
</select>
//Input hidden fields to store staff name and staff email
<input type="hidden" id="txtStaffName" name="txtStaffName">
<input type="hidden" id="txtStaffEmail" name="txtStaffEmail">
//Jquery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ddStaff").on('change',function(){
var staffName = $(this).val();
var staffEmail = $('option:selected', this).attr('staff-email');
$("#txtStaffName").val(staffName);
$("#txtStaffEmail").val(staffEmail);
});
});
</script>
Please check it on https://jsfiddle.net/z4a0fywp/
For testing purpose I have not made the inputs hidden in the fiddle.
Im trying to output posts and comments reddit style. This is the expected result (mockup HMTL) but currently I look like this.
This is the code I'm using right now to output posts and comment:
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php
$i=0; //initialize flag
foreach (getMessage() as $value){ ?>
<div class="comment" id="<?= $value->id; ?>">
//you don't need level class
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
<?php
$i++; //sum flag
}
for($x=0; $x<=$i; $x++) { //paint div closers
echo '</div>' ;
}
?>
<? endif; ?>
</div>
What if I change the foreach statement to
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php foreach (getMessage() as $value){ ?>
<div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
</div>
<?php } endif; ?>
</div>
And output everything "flat". And depending on class, move it to the "right" div with jQuery.
So if <div class="level_0 comment" id="1"> is the parent div (level_0), div with level 1 <div class="level_1 comment" id="3"> should be inside the parent div. And <div class="level_2 comment" id="14"> level 2 should be inside the child div, level 1. This fiddle hopefully gives a better understanding: And this tree of comments can contain numerous of the same level class, so how do we know it is moves inside right div? Due to SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC, every comment is fetch already sorted. So it won't be a problem, the child should be moved "one" div up.
Here is some sample data.
This is the function I am using to retrieve data:
function getMessage(){
$app = new Connection();
$sql = 'SELECT *
FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();
return $query->fetchAll();
}
How can I output data reddit style with jQuery.
Surely this is a CSS fix?
Output all comments in a list and pad each one according to the level class.
.level_0 { margin-left: 0px; }
.level_1 { margin-left: 10px; }
.level_2 { margin-left: 20px; }
etc..
I am working on a web site which displays some data that is retrieved from a database using php. Now, there are also other chekcboxes, which are included in a form. Based on the user input on these checkboxes, i wanted the div displaying the data to reload. For example, after a user checks one of the boxes and clicks apply, the div displaying should recompute the results. I realise that the form data must be passed onto an ajax function. Which would convert this form data into a json object and send it across to a php file. The php file can then access the form variables using $_POST['var']. I hope i have got the theory correct. Nevertheless, i have a number of problems during execution.
Firstly, the php code that deals with the form variables in on the same page as the form. I want to know how to direct the form data from the ajax function to this code.
Secondly, the ajax function is getting executed alright, the form is getting submitted, the page isn't reloading (as desired) but however, I am not able to access the submitted variables in the php code.
Here is my code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#filter_form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'index.php',
data: $('#filter_form').serialize(),
success: function () {
alert('form was submitted');
}
});
e.preventDefault();
});
});
</script>
<div style="float: left;margin-left: -175px;" class="box2">
<h2>Filter by :</h2>
<form id="filter_form" name="filter_form" href="#">
<!--<form id="filter_form" name="filter_form" action="<?php echo $_SERVER['PHP_SELF'];?>" method ="post" href="#">-->
<h3>Location</h3>
<?php
//Get all the distinct values for filter. For example, Get all the locations available, display them in a container. Similarly for the party type as well. Connect to to the database once, get all these values,
//store them in arrays and use the arrays to display on screen.
$query = "Select LOCATION, PARTY_TYPE, GENRE, HAPPY_HOURS, OUTDOOR_ROOFTOP from venue_list order by HAPPY_HOURS";
$result = mysqli_query($con,$query);
$filter_array = array(5);
for($i=0; $i<5; $i++){
$filter_array[$i] = array();
}
while($row = mysqli_fetch_array($result)){
array_push($filter_array[0],$row['LOCATION']);
array_push($filter_array[1],$row['PARTY_TYPE']);
array_push($filter_array[2],$row['GENRE']);
array_push($filter_array[3],$row['HAPPY_HOURS']);
array_push($filter_array[4],$row['OUTDOOR_ROOFTOP']);
}
for($i=0; $i<5; $i++){
$filter_array[$i] = array_unique($filter_array[$i]);
}
?>
<ul>
<?php
foreach($filter_array[0] as $location){
?>
<li>
<input type="checkbox" id="f1" name="location[]" value="<?php echo $location?>" <?php if (isset($_POST['location'])){echo (in_array($location,$_POST['location']) ? 'checked' : '');}?>/>
<label for="f1"><?php echo $location?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Party Type</h3>
<ul>
<?php
foreach($filter_array[1] as $party_type){
?>
<li>
<input type="checkbox" id="f2" name="party_type[]" value="<?php echo $party_type?>" <?php if (isset($_POST['party_type'])){echo (in_array($party_type,$_POST['party_type']) ? 'checked' : '');}?>/>
<label for="f2"><?php echo $party_type?></label>
</li>
<?php
}
?>
</ul>
<br><h3>Genre</h3>
<ul>
<?php
foreach($filter_array[2] as $genre){
?>
<li>
<input type="checkbox" id="f3" name="genre[]" value="<?php echo $genre?>" <?php if (isset($_POST['genre'])){echo (in_array($genre,$_POST['genre']) ? 'checked' : '');}?>/>
<label for="f3"><?php echo $genre?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Happy Hours</h3>
<ul>
<?php
foreach($filter_array[3] as $happy_hours){
?>
<li>
<input type="checkbox" id="f4" name="happy_hours[]" value="<?php if($happy_hours){ echo $happy_hours;} else {echo "Dont Bother";} ?>" <?php if (isset($_POST['happy_hours'])){echo (in_array($happy_hours,$_POST['happy_hours']) ? 'checked' : '');}?>/>
<label for="f4"><?php echo $happy_hours?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Outdoor/Rooftop</h3>
<ul>
<?php
foreach($filter_array[4] as $outdoor_rooftop){
?>
<li>
<input type="checkbox" id="f5" name="outdoor_rooftop[]" value="<?php echo $outdoor_rooftop?>" <?php if (isset($_POST['outdoor_rooftop'])){echo (in_array($location,$_POST['outdoor_rooftop']) ? 'checked' : '');}?>/>
<label for="f5"><?php echo $outdoor_rooftop?></label>
</li>
<?php
$i=$i+1;
}
?>
</ul>
<br><br><br>
<div id="ContactForm" action="#">
<input name="filter_button" type="submit" value="Apply" id="filter_button" class="button"/>
</div>
<!--
<h2>Sort by :</h2>
<input type="radio" id="s1" name="sort" value="Name" <?php if (isset($_POST['sort'])){echo ($_POST['sort'] == 'Name')?'checked':'';}?>/>
<label for="f1"><?php echo 'Name'?></label>
<input type="radio" id="s1" name="sort" value="Location" <?php if (isset($_POST['sort'])){echo ($_POST['sort'] == 'Location')?'checked':'';}?>/>
<label for="f1"><?php echo 'Location'?></label>
<br><br><br>
<input name="filter_button" type="submit" value="Apply" id="filter_button" class="button"/>
-->
</form>
</div>
<div class="wrapper">
<h2>Venues</h2>
<br>
<div class="clist" id="clublist" href="#">
<?php
?>
<table id = "venue_list">
<tbody>
<?php
//Functions
//This function builds the query as every filter attribute is passed onto it.
function query_builder($var_name){
$append = strtoupper($var_name)." in (";
$i=0;
foreach($_POST[$var_name] as $array){
$append = $append."'{$array}'";
$i=$i+1;
if($i < count($_POST[$var_name])){
$append = $append.",";
}
else{
$append=$append.")";
}
}
return $append;
}
//We first need to check if the filter was set in the previous page. If yes, then the query needs to be built with a 'where'. If not the query will just display all values.
//We also need to check if order by is required. If yes, we will apply the corresponding sort, else we will just sort on the basis of location.
//The below 2 variables do the same.
$filter_set = 0;
$filter_variables = array('location','party_type','genre','happy_hours','outdoor_rooftop');
$map_array = array();
if(isset($_POST['location'])){
$filter_set = 1;
}
if(isset($_POST['party_type'])){
$filter_set = 1;
}
if(isset($_POST['genre'])){
$filter_set = 1;
}
if(isset($_POST['happy_hours'])){
$filter_set = 1;
}
if(isset($_POST['outdoor_rooftop'])){
$filter_set = 1;
}
if($filter_set == 1){
$query = "Select * from venue_list where ";
$append_query=array(5);
$j=0;
foreach($filter_variables as $var){
if(isset($_POST[$var])){
$append_query[$j] = query_builder($var);
$j=$j+1;
}
}
$h=0;
//Once all the individual where clauses are built, they are appended to the main query. Until then, they are stored in an array from which they are
//sequentially accessed.
foreach($append_query as $append){
$query=$query.$append;
$h=$h+1;
if($h < $j){
$query=$query." AND ";
}
}
}
else{
$query = "Select * from venue_list";
}
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
$name = $row['NAME'];
$img = $row['IMAGE_SRC'];
$addr = $row['ADDRESS'];
$location = $row['LOCATION'];
echo "<script type='text/javascript'>map_function('{$addr}','{$name}','{$img}');</script>";
?>
<tr>
<td>
<img src="<?php echo $img.".jpg"?>" height="100" width="100">
</td>
<td>
<?php echo $name?>
</td>
<td style="display:none;">
<?php echo $location?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<br>
</div>
All the 3 components are part of index.php. Kindly notify me if the code is unreadable or inconvenient I will edit it. Awaiting a solution. Thank you.
in this case change your javascript code to
var submiting = false;
function submitmyforum()
{
if ( submiting == false )
{
submiting = true;
$.ajax({
type: 'post',
url: 'index.php',
data: $('#filter_form').serialize(),
success: function () {
alert('form was submitted');
submiting = false;
}
});
}else
{
alert("Still working ..");
}
}
and change the form submit button to
<input name="filter_button" type="button" onclick="submitmyforum();" value="Apply" id="filter_button" class="button"/>
don't forget to change submit button type="submit" to type="button"