![enter image description here][1]
Here I have attached the screen shot and my question is, if I select a check box free form , I couldn't take free form inet commission and bo commission value alone.If I checked the check box, value is one means I should take value 1's inet and bo commissions. Please any one help me to solve the problem. Each check box have separate value like 1,2,etc.
Here is my code : I am working under codeigniter frame work. Here is the html code and I am fetching data from table.
Is there any possible solution to split values in jquery,
<?php
if(isset($service_list) && !empty($service_list))
{ ?>
<div class="form-group">
<label class="col-sm-3 control-label">Product Name</label>
<div class="col-sm-3" id="list_staff">
<input type="checkbox" name="check_all" class="chkSelectAll">(Click to Check all)
</div>
<div class="col-sm-2">
<label>I-net Commission</label>
</div>
<div class="col-sm-2">
<label>Bo Commission</label>
</div>
</div>
<?php
foreach($service_list as $val)
{
$ds=0;
if(isset($view_list) && !empty($view_list))
{
foreach($view_list as $val1)
{
if($val['id']==$val1['mas_pro_id'])
{
$ds=1;
}
}
}
?>
<div class="form-group">
<label class="col-sm-3 control-label"><?=$val['pro_name']?></label>
<div class="col-sm-3">
<input type="checkbox" class="check_all serve"
name="permission[<?=$val['id']?>]" value="<?=$val['id']?>" <?=($ds>0)?'checked':''?>>
</div>
<div class="col-sm-2">
<input type="text" class="int_com<?=$val['id']?>" id="inet" style="width:30px;"/>%
</div>
<div class="col-sm-2">
<input type="text" class="bo_com<?=$val['id']?>" id="bo" style="width:30px;" />%
</div>
</div>
<?php }
}
else
{
echo "<div align='center' style='margin-right:100px; color:red;'>Sorry No Data Found..!</div>";
}
?>
my script:
$('#submit').live('click',function()
{
for_loading('Loading Data Please Wait...');
var cat_id=$('.cat_id').val();
var s_cid=$('.u_sub_cat_id').val();
var chkId = '';
$('.serve:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
$.ajax({
url:BASE_URL+"product/edit_ser",
type:'get',
data:{ cat_id:cat_id,s_cid:s_cid,chkId:chkId},
success:function(result){
$("#list_view").html(result);
//THIS IS FOR ALERT
<?php /*?>jQuery.gritter.add({
title: 'Success!',
text: 'Category Added Successfully.',
class_name: 'growl-success',
image: '<?=$theme_path?>/images/screen.png',
sticky: false,
time: ''
});<?php */?>
for_response('Data Updated Successfully...');
}
});
});
My Screen shot could be like this,
Product name A Commission B Commission
free form ck box 10 % 05%
bulk booking ck box 00 % 00%
I didn't clearly understood your question, But i suppose this you are trying to get the values of the text field when its corresponding checkbox is clicked, this too on submitting. So i have created a Fiddle.
Check here!
you have to give different id's to your html elements.
<input type="checkbox" class="check_all serve" name="permission" value="1" id="check_<?php echo $val['id']?>" />
and also
<input type="text" class="int_com_<?php echo $val['id']?> style inline" id="inet_<?php echo $val['id']?>" />
<input type="text" class="bo_com_<?php echo $val['id']?> style inline" id="bo_<?php echo $val['id']?>"/>
Related
How to disable date already picked before in PHP 5 and database using MYSQL, and I tried several time but nothing to work, and I tried to make a booking system
<div class="row">
<div class="col-xs-3">
<label class="form-control" style="border:none;">Publish Date</label>
</div>
<div class="col-xs-3">
<input type="text" name="txtPublishDate" id="txtPublishDate" class="form-control" value="<?php echo $PublishDate; ?>" placeholder="Publish Date" />
</div>
</div>
<script>
$(function() {
$('input[name="txtPublishDate"]').daterangepicker({
opens: 'right'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
<input .... <?php echo is_string($PublishDate) ? ' disabled="disabled" readonly' : ''; ?> />
Or, don't even put the input based on if you've already picked it. Show the chosen value in a tag like a span instead. Then the JS won't bind to the disabled input.
eg:
<?php if !is_string($PublishDate) { ?>
<input .... />
<?php } else { ?>
<span><?php echo $PublishDate ?></span>
<?php } ?>
I want to ask, has someone ever created autocomplete using combo box / select box with code igniter?
I've tried but only managed to use autocomplete for 2 input text but I have another idea to create autocomplete with text combined with combo box. I've do created that but I have trouble my autocomplete in the text is successful but in the combo box does not work only show empty option. can someone help me? this is my source code
My Table : i probably using 2 table for autocomplete : 1. tb_produk and 2. tb_kategori_produk
https://imgur.com/a/xpysI | 2. https://imgur.com/a/DVgUl
My Controller : user.php
public function request_produk(){ //used for calling view
$data["kateprod"] = $this->db->where("f_status_kategori_produk","1")
->get("tb_kategori_produk")->result_array();
$this->theme->panel('user/v_request',$data);
}
public function mesin() //user for jquery called data
{
$keyword = $this->uri->segment(3);
$data = $this->db->from('tb_produk')->join('tb_kategori_produk','tb_kategori_produk.f_id_kategori_produk=tb_produk.f_kategori_produk')->like('f_nama_produk',$keyword)->get();
foreach($data->result() as $row)
{
$arr['query'] = $keyword;
$arr['suggestions'][] = array(
'value' =>$row->f_nama_produk,
'idpro' =>$row->f_id_produk,
'idkate' =>$row->f_id_kategori_produk,
'kategori'=>$row->f_nama_kategori_produk
);
}
echo json_encode($arr);
}
My Controller : v_request.php
<div id="content">
<script type="text/javascript">
var site = "<?php echo site_url();?>";
$(function() {
$(".autocomplete").autocomplete({
serviceUrl: site+"/user/mesin",
onSelect: function (suggestion) {
$("#v_idproduk").val(""+suggestion.idpro);
$("#v_kategori").val(""+suggestion.kategori);
$("#v_idkategori").val(""+suggestion.idkate);
}
});
});
</script>
<?php $id = $this->session->userdata('f_id_user');
<input type="hidden" name="dt[f_id_user]" value="<?php echo $this->session->userdata('f_id_user'); ?>">
<input type="hidden" id="v_idproduk" name="dt[f_id_produk]">
<input type="hidden" id="v_idkategori" name="dt[f_kategori_produk]">
<div class="form-group br-form"> <!-- This form group i used to autocomplete text -->
<div class="col-md-2">
<label class="control-label">Nama Mesin</label>
</div>
<div class="col-md-10">
<input type="search" class="autocomplete form-control" id="autocomplete1" name="nama_mesin" required/>
</div>
</div><br><br>
<div class="form-group br-form"> <!-- This form group i used to autocomplete combo box-->
<div class="col-md-2">
<label class="control-label">Kategori Mesin</label>
</div>
<div class="col-md-10">
<select id="v_kategori" name="dt[f_kategori_produk]" class="form-control" required>
<option value="">---Harap Pilih---</option>
<?php foreach ($kateprod as $key) { ?>
<option value="<?=$key['f_id_kategori_produk']?>" id="v_kategori"><?php echo $key["f_nama_kategori_produk"];?></option>
<?php } ?>
</select>
</div>
</div><br>
This is my demo
https://streamable.com/wvn25
I have searched and found answers for questions similar to mine, but I am not experienced with JS, so I am not sure how to apply the answers to my situation. I have a form where users enter a URL to submit to me. The URL can be from any site but when users enter a Youtube short (share) URL, I need the field to be changed to a regular Youtube URL before the form is submitted. Here are the two answers I have found to similar questions:
Change form values after submit button pressed
Automatically change a value in a form field
Basically, when a user enters URLS in this format:
https://youtu.be/VIDEO_ID_HERE
I need the text in the field changed to this format before the form is submitted:
https://www.youtube.com/watch?v=VIDEO_ID_HERE
Thank you for any help.
The code I have for this popup form is:
<!-- POPUP 8 // START -->
<div id="popup-8" class="container container-size-11 container-radius-1 container-padding-5 container-shadow-1 bg-color-1 position-relative responsive-popup">
<h3 class="title-2 title-border-bottom-1 color-1"><?php echo $this->_('Add an image from a website') ?></h3>
<form action="<?php echo $this->url(array('controller' => 'find-images'),'urlpin_c');?>" method="post" class="event-find-images">
<div class="form-1 form-margin-20 margin-top-20">
<div class="form-row">
<div class="notification notification-color-3"><?php echo $this->_('Check out our bookmarklet to make pinning from a website even easier!') ?></div>
</div>
<div class="form-row form-row-group-top form-row-group-top-padding-3 margin-top-20">
<span class="field-button field-button-position-1 fill">
<input name="url" type="text" placeholder="http://" class="field field-color-1 field-size-1 event-url-text">
<button type="submit" class="button button-type-1 button-color-2 button-size-3 event-loader"><?php echo $this->_('Find') ?></button>
</span>
</div>
<div class="form-row event-back-ios-8">
<div class="table-grid">
<div class="table-grid-cell event-upload-pin">
Back
</div>
</div>
</div>
<div class="hide notification notification-color-1 margin-top-20 event-url-status"></div>
<div class="form-row form-row-group-top form-row-group-top-padding-3 margin-top-20">
<ul class="list-30 clearfix hide event-found-images"></ul>
</div>
</div>
</form>
</div>
<!-- POPUP 8 // END -->
<script type="text/javascript">
$('.event-find-images').on('submit',function(){
App.addLoader('.event-loader');
$('.event-url-status').addClass('hide');
App._ajax({
url: '<?php echo $this->url(array('controller' => 'find-images'),'urlpin_c');?>',
onSuccess: function(json) {
App.removeLoader('.event-loader');
if(json.location) {
window.location = json.location;
} else if(json.errors) {
var errors = [];
for(i in json.errors)
errors.push(json.errors[i]);
$('.find-images').remove();
$('.event-url-status').html(errors.join("<br />")).removeClass("hide");
} else {
//console.log(json);
}
},
type: 'POST',
data: $(this).serialize()
});
return false;
});
</script>
You can check and change the input value when the user submit:
// When the user submits,
$('.event-find-images').on('submit',function(){
// Change value of the url.
$(".event-url-text").val(function(index, value) {
// Find for pattern and then replace.
return value.replace(
/https:\/\/youtu\.be\/(.+)/,
"https://www.youtube.com/watch?v=$1"
);
});
// the rest of your code...
Hope this helps!
Give you text box some id like
<input id="yturl" name="url" type="text" placeholder="http://" class="field field-color-1 field-size-1 event-url-text">
Add this in submit callback before you do App._ajax.Also see an example besides
var shorturl = $("#yturl").val(); // https://youtu.be/c8aFcHFu8QM
var urlarray = shorturl .split("/"); //["https:", "", "youtu.be", "c8aFcHFu8QM"]
var videoID = urlarray[3]; // c8aFcHFu8QM
$var = "https://www.youtube.com/watch?v="+videoID;
$("#yturl").val(fullurl ); // assign full url to text box
Now in ajax data: $(this).serialize() jquery would see and use this updated value
Working on a web app , I just added the below update code and it's not working .
The summary of all the below code is :
Click a Button called update
It brings out the FORM which should contain the values of the clicked/current product.
Now when I hit save in this form it should update the database but it is not.
I am using $_GET in PHP file (update.php) to get the current Product ID.And then getting all data of that product via that ID.
PS: There is no error in console.
UPDATE CODE:
<?php
include "includes/connection.php";
switch($_GET['action']) {
case 'update_entry' :
$data = json_decode(file_get_contents("php://input"));
$index = $data->id;
$productname = $data->pname;
$company = $data->company;
$price = $data->price;
$quantity = $data->quantity;
if(isset($productname) && !empty($productname) && isset($company) && !empty($company) && isset($price) && !empty($price) && isset($quantity) && !empty($quantity)){
$query = "UPDATE `product` SET `id`='$index',`name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $index";
if(mysqli_query($con, $query)) {
return true;
} else {
echo "Error: " . $sql . "<br />" . mysqli_error($con);
}
break;
}
}
?>
Controller :
myApp.controller("updateCtrl",['$scope','$http','$routeParams','$location',function($scope,$http,$routeParams,$location){
$scope.update = function(){
var currentId = $routeParams.id;
$http.post("update.php?action=update_entry",{'id':currentId})
.then(function(data){
$location.path('/viewproduct');
});
}
}]);
HTML:
<form style="padding:10px" ng-controller="updateCtrl">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
</div>
<button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
Cancel
<h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>
Update Button:
<td ng-controller="updateCtrl"><a class="btn btn-primary" href="#/updateproduct/action={{product.id}}" >Update</a></td>
Do like below
your view part
<form style="padding:10px" ng-controller="updateCtrl">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
</div>
<button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
Cancel
<h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>
<td><a class="btn btn-primary" ng-click="addProductData();" >Update</a></td>
Inside your controller do like below
$scope.addProductData=function(){
var updatedata=$.param({'action':'update','productname':$scope.productname,'company':$scope.company,'price':$scope.price,'quantity':$scope.quantity,'id':currentId});
$http({
method:'POST',
url:'update.php',
data:updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data['msg']);
},function errorCallback(response) {
alert(response.data['msg']);
});
}
your update.php file should like below.
<?php
include "includes/connection.php";
$result=array();
if(isset($_REQUEST["action"]) && $_REQUEST["action"] !=""){
if($_REQUEST["action"]=="update"){
$productname = $_POST['productname'];
$company = $_POST['company'];
$price = $_POST['price'];
$quantity = $_POST['quantity'];
$id=$_POST['id'];
$query = "UPDATE `product` SET `name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $id";
if(mysqli_query($con, $query)) {
$result['msg']="updated successfully";
}else{
header("HTTP/1.0 401 Unauthorized");
$result['msg']="unable to updated";
}
echo json_encode($result);
}
}
?>
i think you may basic idea.now you can implement in your way.
Try to use ng-model="{{product.name}}}" and not the placeholder in HTML.
And in your controller pass that model:
$http.post("update.php?action=update_entry",$scope.product)
Then you should get some data in your PHP.
Have you checked your php alone to make sure that you can fetch and update data using the php without angular? I would use post as it is more friendly for retrieving and updating data.
I would also b separate your call to the php endpoint into a service (factory). I would also just pass the entire object back through to ensure that you aren't missing something unless you have a concern about bandwidth.
I would unit test php first. Then separate logic in angular. Then b step through in debug to see what's being passed from the view.
I think you should check this: https://github.com/eliarms/CustomerManagerApp
This is a simple customer management app using Angularjs and PHP. The goal of the application is to highlight a lot of the different features offered by AngularJS and demonstrate how they can be used together.
I am using this plugin: Plugin Link
I am trying to validate, if at least one checkbox out of a checkbox group has been selected. The plugin doesn't support such a functionality. Therefore i googled, and found this, by the plugin author himself: Discussion Link and a working implementation here: Example
I tried implementing it and failed. This is what i have so far:
<div class="col-lg-9">
<?php
// Input form for choosing complaints
foreach (Complaints::getComplaints() as $complaint) {
?>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="complaints[]" data-chkgrp="complaints[]"
data-error="Try selecting at least one...">
<?= Helper::sanitize($complaint->getName()) ?>
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<?php
}
?>
</div>
Plus this is the copied JS Function, that should do the magic...:
<script>
$('[data-toggle="validator"]').validator({
custom: {
chkgrp: function ($el) {
console.log("Some debug output, if it is triggered at all" + $el);
var name = $el.data("chkgrp");
var $checkboxes = $el.closest("form").find('input[name="' + name + '"]');
return $checkboxes.is(":checked");
}
},
errors: {
chkgrp: "Choose atleast one!"
}
}).on("change.bs.validator", "[data-chkgrp]", function (e) {
var $el = $(e.target);
console.log("Does is even work? " + $el);
var name = $el.data("chkgrp");
var $checkboxes = $el.closest("form").find('input[name="' + name + '"]');
$checkboxes.not(":checked").trigger("input");
});
So yeeh. Nothing happens, if i try to run this. None of my debug output is printed in the console. Nothing. The form itself also consists out of some password fields and text fields, the checkbox group - generated in the foreach loop - is just one part of it. The validator works for the text and password fields, but does exactly nothing for the checkbox group. Any ideas?
Thanks! :)
I just tried to make it neat.
please checkout the solution:
Reference: http://1000hz.github.io/bootstrap-validator/
$('#form').validator().on('submit', function (e) {
var validate = false;
$("input[type='checkbox']").each(function(index,e){
if($(e).is(':checked'))
validate = true;
});
if(validate){
//valid
$('.with-errors').html(' ');
} else {
$('.with-errors').html('not valid');
}
//if (e.isDefaultPrevented()) {
// handle the invalid form...
//} else {
// everything looks good!
//}
})
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form role="form" data-toggle="validator" id="form" action="" method="POST">
<div class="col-lg-9">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
Teste1
</label>
<div class="help-block "></div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
Teste2
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="complaints[]" data-chkgrp="complaints[]" data-error="Try selecting at least one...">
Teste3
</label>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<button type="submit" >Validade</button>
</form>