How to create html buttons with checkboxes with Jquery? - javascript

I have a table with 4 checkboxes. Lets say with Title,Adress,Postal Code and Email.
<table class="mytable">
<tbody>
<tr>
<td> <input type="checkbox" value="title"> title </td>
<td> <input type="checkbox" value="adress"> Adress </td>
<td> <input type="checkbox" value="postalcode"> Postal Code </td>
<td> <input type="checkbox" value="email"> Email </td>
</tr>
</table>
I have another div with class "myfilters" which is hidden when none of the above checkboxes are checked.
<div class="myfilters">
<button type="button" class="btn btn-default btn-sm"> Title </button>
<button type="button" class="btn btn-default btn-sm"> Adress</button>
</div>
My question is How can I implement when a user checks lets say "title" and "adress" checkboxes in the table
then inside the div "myfilters" to be created dynamically the buttons "Title" and the Button "Address" ?

Don't add the buttons dynamically. Create them in the HTML, but hide them with CSS. Then show them when you click on the corresponding checkbox.
$(":checkbox").click(function() {
$("#"+this.value).toggle(this.checked);
});
.btn {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
<tbody>
<tr>
<td> <input type="checkbox" value="title"> title </td>
<td> <input type="checkbox" value="adress"> Adress </td>
<td> <input type="checkbox" value="postalcode"> Postal Code </td>
<td> <input type="checkbox" value="email"> Email </td>
</tr>
</table>
<div class="myfilters">
<button type="button" id="title" class="btn btn-default btn-sm"> Title </button>
<button type="button" id="adress" class="btn btn-default btn-sm"> Adress</button>
<button type="button" id="postalcode" class="btn btn-default btn-sm"> Postal Code</button>
<button type="button" id="email" class="btn btn-default btn-sm"> Email</button>
</div>

try this :
$(function(){
$('.mytable').on("change","input[type=checkbox]",function(){
if($(this).is(':checked'))
{
var button = '<button type="button" class="btn btn-default btn-sm" id="'+$(this).val()+'">'+$(this).parent().text()+'</button>';
$('.myfilters').append(button);
}
else
{
$('.myfilters').find('button[id="'+$(this).val()+'"]').remove();
}
});
});
Demo

This is what you need (notice that I've added the IDs for checkboxes):
<table class="mytable">
<tr>
<td><input id="c1" type="checkbox" value="title">Title</td>
<td><input id="c2" type="checkbox" value="adress">Address</td>
<td><input id="c3" type="checkbox" value="postalcode">Postal Code</td>
<td><input id="c4" type="checkbox" value="email">Email</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#c1").click(function(){
$(".myfilers").append("<button>Title</button>");
});
$("#c2").click(function(){
$(".myfilers").append("<button>Address</button>");
});
$("#c3").click(function(){
$(".myfilers").append("<button>Postal Code</button>");
});
$("#c4").click(function(){
$(".myfilers").append("<button>Email</button>");
});
});
</script>

Here is a fiddle Demo, FIDDLE DEMO CLICK HERE
var myNull=null; // ignore this line

Related

Am creating a dynamic input field survey App

I am creating a survey app that dynamically adds a dropdown box , and two text boxes.Once an option is selected from the dropdown it populates the selected option . Unforunately the first option works but for the others it simply populates the data I selected in the first.The overall goal is to input it inside a database using php.This is my php script
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$number = count($_POST["name"]);
$crops = count($_POST["selectedCrop"]);
// echo $number;
// echo $crop;
if ($number > 0) {
for ($i=0; $i<$number; $i++) {
if (trim($_POST["name"][$i] != '')) {
$sql = "INSERT INTO tbl_name(name,crop) VALUES('".mysqli_real_escape_string($connect, $_POST["selectedCrop"][$i])."' ,'".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
mysqli_query($connect, $sql);
}
}
echo "Data Inserted";
} else {
echo "Please Enter Name";
}
The result are as follows The Image with the duplicated resukts
Here is my HTML Code and the Javascript I am using to achieve
<body>
<div class="container">
<div class="page-header">
<h1 class="text-center">SURVEY</h1>
</div>
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>E. FARMING AND AGRIBUSINESS </br>Farming</strong>
</div>
<div class="panel-body">
Which of the value chains did your household produce in September 2016 through rain fed production mechanisms? Or you produce now through rain fed production mechanisms?<i>Select all options applicable – 1, 2 up to last</i>
<br />
<form name="add_name" id="add_name">
<!-- This is the Table That I am adding the widgets dynamically -->
<table class="table table-striped table-bordered" id="dynamic_field">
<thead>
<tr>
<th>Name of Crop Options</th>
<th>Crop Selected</th>
<th>Produced/produce this value chain in 2015/2016?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown" name= "crops[]">
<button id="crop" onchange="copyValue()" class="btn dropdown-toggle" type="button" data-toggle="dropdown" >
Name of Crop<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Maize</li>
<li>Beans</li>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
</div>
</td>
<td>
<input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
<!-- <td><button type="button" name="remove" id="'0'" class="btn btn-danger btn_remove">X</button></td></tr> -->
</tr>
</tbody>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div class="dropdown" name= "crops[]"><button class="btn dropdown-toggle" type="button" data-toggle="dropdown" >Name of Crop<span class="caret"></span></button><ul class="dropdown-menu"><li>Maize</li> <li>Beans</li><li>Tomatoes</li><li>Potatoes</li></ul></div></td><td><input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"farming_and_agribusiness_1_copy.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
$(function(){
$(".dropdown-menu li a").click(function(){
$("#crop:first-child").text($(this).text());
$("#crop:first-child").val($(this).text());
$("#selectedCrop:first-child").text($(this).text());
$("#selectedCrop:first-child").val($(this).text());
});
});
</script>
<!-- Survey - END -->
</div>
</body>

jQuery find first element with data attribute

I am trying to find the first element with a data attribute of data-uuid inside a table row. I can see examples of finding an element that has a data attribute of a value, but I do not know the value, I just want to find the element with the attribute.
My HTML:
<tr id="row_12">
<td style="width:320px;">
<input class="form-control has-feedback table_input name changed_event" type="text" value="" data-rowid="row_new" data-msgid="name" data-orig="" placeholder="Name">
<input class="form-control has-feedback table_input email changed_event" type="email" value="" data-msgid="email" data-orig="" placeholder="Email">
</td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td class="table_form_cell">
<table class="table-sm form_cell">
<tbody><tr>
<td style="width:25%;" class="text-center form_cell_switch">
<input class="switch switch-primary activated_at changed_event" type="checkbox" data-rowid="row_new" data-orig="">
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_reload_row" data-rowid="row_new">
<i class="far fa-sync"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-danger btn-sm btn_delete_row" data-uuid="NEW_USER" data-rowid="row_new">
<i class="far fa-trash-alt"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_save_row" data-uuid="NEW_USER" data-rowid="row_new" disabled="">
<i class="far fa-save"></i>
</button>
</td>
</tr>
<tr>
<td colspan="4">
<select class="form-control has-feedback table_input changed_event date_format_id" data-orig="1">
<option value="1" selected="">21/Jan/2018</option>
<option value="2">21-Jan-2018</option>
<option value="3">21 January 2018</option>
<option value="4">21-January-2018</option>
<option value="5">Jan 21, 2018</option>
<option value="6">January 21, 2018</option>
<option value="7">21/01/2018</option>
<option value="8">21-01-2018</option>
<option value="9">01/21/2018</option>
<option value="10">2018-01-21</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want a generic way to find first element (rather than using this example's input element, as this is a function re-used for other forms of similar structure.
I have tried this:
var uuidElem = $(row).find('[data-uuid]');
var uuid = uuidElem.data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $(row).find('[data-uuid]').data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $('tr#' + rowId).find('[data-uuid]').data('uuid');
but uuid is undefined. How do I find this element.
Maybe Your html hasn't tag <table>, I add table and next code:
var uuidElem = $('#row_12 [data-uuid]');
uuidElem.each(function(index){
console.log($( this ).data('uuid') );
})
All ok.
https://codepen.io/piotrazsko/pen/RxvBNP
Also , you can try code without jquery:
let buttons = Array.from(document.querySelectorAll('#row_12 [data-uuid]'));
buttons.forEach((elem)=>{console.log(elem.getAttribute('data-uuid'))})
Finding row without tag <table> not working.

Trouble Accessing scope variable in ng-template under script

I am trying to design inline editing template using angular.I have followed this tutorial
http://blog.shubhamsaxena.com/creating-simple-inline-editing-with-angularjs/
My Code is
<table class="table">
<tbody>
<tr class="table-row" ng-repeat="admin in admins" ng-include="getTemplate(admin)">
<script type="text/ng-template" id="display">
<td class="table-img">
<img src="images/in.jpg" alt="" />
</td>
<td class="table-text">
<h6>{{admin.firstname}} {{admin.lastname}}</h6>
<p>{{admin.email}}</p>
<p>{{admin.phone}}</p>
</td>
<td>
<span class="fam">{{admin.dept_name}}</span>
</td>
<td class="march">
<button class="btn-transparent btn" ng-click="editAdmin(admin)"><i class="fa fa-edit fa-2x"></i></button>
</td>
<td>
<button class="btn-transparent btn"><i class="fa fa-remove fa-2x"></i></button>
</td>
</script>
<script type="text/ng-template" id="edit">
</script>
</tr>
</tbody>
</table>
angular js code
$scope.getTemplate = function (admin) {
if (admin.id === $scope.selected.id){
$scope.template = 'edit';
}
else{
$scope.template = 'display';
}
return $scope.template;
};
$scope.editAdmin = function (admin) {
$scope.selected = angular.copy(admin);
};
But when I run this it gives me 404 error in console
www.ip-address/dashboard/principal/display
"display" is my script id you can verify in the 1st snippet.
My question is why it is searching "display" id in the url.
scope variable admins has data but it do not accessed when I write under script.
Please help.
404 means not found
$scope.getTemplate = function (employee) {
if (employee.empID === $scope.selected.empID){
return 'edit';
}
else return 'display';
};
getTemplate if the the Id already exist then it will open in Edit script or else will show in display script
HTMl
<tbody>
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.empName}}</td>
<td>{{employee.empEmail}}</td>
<td>{{employee.empSalary | currency:"₹"}}</td>
<td>{{employee.active | active}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empSalary class="form-control input-sm"/></td>
<td>
<select class="form-control input-sm" ng-model=employee.active>
<option value='1'>Yes</option>
<option value='0'>No</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
</td>
</script>
</tr>
</tbody>

after using clone function in a row how can create different id for each row

after using clone function in a row, how can create different id for each row
i using add more button add new rows i like to create different id for each row
function cloneRow() {
var row = document.getElementById("clone");
var table = document.getElementById("data");
var selectIndex = 1;
var clone = row.cloneNode(true);
table.appendChild(clone);
clone.setAttribute("style", "");
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id", "select-" + selectIndex++);
alert(newSelectBox.getAttribute("id"));
}
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7"></div>
<div class="col-sm-2">
<button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
</div>
</div>
</div><br>
<div class="row" id ="close">
<div class="col-sm-4"></div>
<div class='col-sm-4'>
<Form id="NAME_VALUE" method="POST" >
<table class="table-striped" >
<tbody id="data">
<tr id ="clone" style="display:none;">
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
<tr>
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
</tbody>
</table><br>
<button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
return false;"> save.</button>
</Form>
</div>
</div>
its coming only select-0 to every one i like to select-0,select-1, select-2 depends on the add more button clicked
You can set a variable like this outside your function :
var i = 0;
and update it inside your function :
i = i + selectIndex
https://jsfiddle.net/gg1eyqgu/

Form is presenting same data in php while loop

I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}
Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.
The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Categories