I'm creating a toggle button to which I want to bind a select event. I've created the button, but I have no clue of how to bind the values to it and make it work like a select button. Can someone give me some clue or some examples related to it, so that I can try that out and learn some thing?
My requirement is I've to bind the select event to it and make it work like a select button.
This is how I've created the button:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Tax Value</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></button>
</div>
<input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-12" id="invoice_request_tax_value_label">Tax Value - Nil</label>
</div>
</div>
</div>
Try using knockout.js.
This is what I am using to do the kind of action you want (binding value dynamically)
foreach-binding is the solution to your problem.
Also options-binding can be used, which you can use with select tag only.
See If you can use knockout.
create your observables then bind them per slide/toggle then u can adjust this example such that when toggled the select value in your dropdown becomes yourdropdown.selectedText (javascript) , you will notice which may seem like commented code but are actually conditional statements in ko
<tbody data-bind="foreach: yourObservableArray">
<tr data-bind="attr: { 'id': description }">
<td style="border-bottom: 1px solid #e0e0e0;">
<label data-bind="text: description"></label>
</td>
<td class="td-actions" style="border-bottom: 1px solid #e0e0e0;">
<input type="text" class="input-mini" data-bind="value: amount">
<input type="hidden" class="input-mini" data-bind="attr: { 'id': 'DC_' + description }, value: Totalcost">
</td>
<td class="toggle-soft">
<!-- ko if: description == 'Data' -->
<div id="slider" class="toggle floatright" onclick="toggleCOS()"></div>
<input type="checkbox" disabled="disabled" class="checkbx" id="cos_data" style="display: none;">
</div>
<!-- /ko -->
<!-- ko if: description != 'Data' -->
Cost
<!-- /ko -->
</td>
</tr>
</tbody>
Related
Stackblitz
I am trying to find the id associated with the name I select using the radio button. Any help?
<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
<div class="row">
<div class="col-12" style="border: 1px solid red">
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name" [(ngModel)]='selected'>
</div>
</div>
<hr />
<button type="submit">SAVE</button>
</div>
</form>
try to declare a property and set the value on model change event
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name"
ngModel (ngModelChange)="selectedValue = x">
</div>
demo 🚀🚀
First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.
Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">
Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.
Add step="0.01"(for example 0.01) property to your price input.
If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules
I am new to AngularJS. I have a simple form that the submit button becomes enabled if the all required fields are ng-valid. If I type in box LOAN AMOUNT the class ng-valid is added to this input.
However, on the second field I am using buttons to update the value of a hidden field using ng-click. This works and the value updates on click, however the class remains as ng-invalid and the submit button is disabled. I am guessing it is somehow to do with Angular not knowing this has been updated, but am unable to find a solution. I would be grateful for any help.
<body ng-app="validationApp" ng-controller="mainController">
<form name="userForm" id="appform" ng-submit="submitForm(userForm.$valid)" action="results.php" method="post" novalidate validate-non-visible-controls> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="container" style="max-width:1000px;">
<div class="row">
<div class="col-md-4">
<!-- LOAN AMOUNT -->
<div class="form-group" ng-class="{ 'has-error' : userForm.amount.$invalid && !userForm.amount.$pristine }">
<label>How much do you need? <span class="red">*</span></label>
<input type="number" name="amount" id="amount" class="form-control searchfield" ng-model="user.amount" ng-maxlength="6" required>
<p ng-show="userForm.amount.$invalid && !userForm.amount.$pristine" class="help-block">Loan amount is required.</p>
<p ng-show="userForm.amount.$error.maxlength" class="help-block">Loan amount too high.</p>
</div>
</div>
<div class="col-md-8">
<!-- BUSINESS TYPE -->
<div class="form-group" ng-class="{ 'has-error' : userForm.type.$invalid && !userForm.type.$pristine }">
<label>What type of business do you own? <span class="red">*</span></label>
<input type="hidden" name="type" ng-model="data.type" value="{{selected}}" required/>
<button type="button" class="ltd opt" ng-click="selected = 1;userForm.type.$valid" ng-class="{active: selected == 1}">Limited Company</button>
<button type="button" class="st opt" ng-click="selected = 2" ng-class="{active: selected == 2}">Sole Trader</button>
<button type="button"class="ps opt" ng-click="selected = 3" ng-class="{active: selected == 3}">Partnership</button>
<button type="button"class="llp opt" ng-click="selected = 4" ng-class="{active: selected == 4}" >LLP</button>
<p ng-show="userForm.type.$invalid && !userForm.type.$pristine" class="help-block">Business type is required.</p>
</div>
</div>
</div><button type="submit" class="bluebtn biggerBtn" ng-disabled="userForm.$invalid">FINANCE MY BUSINESS <i class="fa fa-caret-right"></i></button>
</body>
You must change the ng-model to:
<input type="hidden" name="type" ng-model="selected" value="{{selected}}" required/>
I am trying to get my dynamic form additions/subtractions to work correctly. The situation is that I am able to get the form block to add or remove, however, when I click the remove button it removes the most recently added block rather than the one I click on.
For example, if I add two new form blocks for a total of 3 blocks (block1, block2, block3) and I click remove on block2, instead of removing block 2 it removes block3.
I have created a plunker that demonstrates this, but it ONLY works when you launch the preview side in a separate window (otherwise the add button is inactive for some reason).
Working Example (must open in popup preview in plunker to function): plunker
<form class="form-horizontal" name="cpdForm" novalidate="" ng-submit="processForm()" ng-show="!message">
<h2>Subcontractor Performance</h2>
<hr />
<div ng-repeat="subcontractor in subcontractors">
<div class="well well-sm">Subcontractor #{{subcontractor.id}} <span id="subCounter"></span>
<button type="button" ng-click="removeSub()" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="subName">Subcontractor Name</label>
<input type="text" class="form-control" id="subName" name="subName" placeholder="Subcontractor" ng-model="formData.subName['subName'+($index+1)]" />
</div>
<div class="col-md-3">
<label for="mwbeCert">Disadvantaged Certification</label>
<select class="form-control" name="mwbeCert" ng-model="formData.mwbeCert" required="">
<option value="">Select MWBE Certification...</option>
<option ng-repeat="item in dropdownpoll['mwbecert']" value="{{item.mwbeid}}">{{item.mwbe}}</option>
</select>
</div>
<div class="col-md-3">
<label for="subAmount">Contracted Amount</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-usd"></i>
<input type="text" class="form-control" id="subAmount" name="subAmount" placeholder="Contracted Amount" ng-model="formData.subAmount" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="subContactName">Contact Name</label>
<input type="text" class="form-control" id="subContactName" name="subContactName" placeholder="Contact Name" ng-model="formData.subContactName" />
</div>
<div class="col-md-4">
<label for="subContactPhone">Contact Phone</label>
<input type="text" class="form-control" id="subContactPhone" name="subContactPhone" placeholder="Contact Phone" ng-model="formData.subContactPhone" />
</div>
<div class="col-md-4">
<label for="subContactEmail">Contact Email</label>
<input type="text" class="form-control" id="subContactEmail" name="subContactEmail" placeholder="Contact Email" ng-model="formData.subContactEmail" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="subRating">Subcontractor Rating</label>
<select class="form-control" name="subRating" ng-model="formData.subRating" required="">
<option value="">Select Subcontractor Rating...</option>
<option ng-repeat="item in dropdownpoll['subrating']" value="{{item.subratingid}}">{{item.rating}}</option>
</select>
</div>
<div class="col-md-9">
<label for="subComment">Comments</label>
<input type="text" class="form-control" id="subComment" name="subComment" placeholder="Comments" ng-model="formData.subComment" />
</div>
</div>
<hr />
<button type="button" class="btn btn-info btn-sm pull-right" ng-show="showAddSub(subcontractor)" ng-click="addNewSub()">[+] Add New Sub</button>
</div>
<input type="hidden" style="display:none;" ng-model="formData.subCount" value="{{subcontractor.id}}" />
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-primary" id="submit" ng-click="submitting()" ng-disabled="buttonDisabled">{{submit}}</button>
</div>
</div>
</form>
<pre>{{formData}}</pre>
you are splicing $scope.subcontractors-1 which only behaves like it does, ie, removes the last one.
try using $event.currentTarget as a general rule, it will indicate the clicked item exactly, and don't forget to pass $event as a parameter for the remove function.
I hope this helps you
You need to pass an index to the function removeSub
I modified your fn to accept an index
$scope.removeSub = function(ind) {
var newItemNo = $scope.subcontractors.length-1;
$scope.subcontractors.splice(ind-1, 1);
};
and in your HTML you just pass the currently iterated $index
<button type="button" ng-click="removeSub($index)" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Hope this works. But be careful your formdata and subcontrators array are not in sync after this, thats a programming logic I guess you have to fix.
Happy coding
Cheers.
Joy
Not a full answer but your not telling the function in your script.js which one to remove your just telling it to chop one off the end. Try setting it up so that you pass the current subContractor id like ng-click="removeSub({{subcontractor.subContractorId}})" (not sure what your data model is) you could also reference the index but I believe that would be harder.
I have created a character count function which calculates the length of characters use use and displays them at each key up. it works fine out of a loop but when I add it to the fore each loop for adding new rows it doesn't work.
Code below shows everything within the loop, the notes and description section is the classes which include the character count:
<div class="row">
<div class="span18">
<h2 class="PIMS3">Task Details</h2>
<div id="taskList">
<div class="row">
<div class="span1">Dept</div>
<div class="span1">Skill</div>
<div class="span3">Description</div>
<div class="span3">Notes</div>
<div class="span6">Budget</div>
</div>
<div data-bind="foreach: tasks">
<div class="row">
<div class="span1"><select class="span1" data-bind="options: $parent.departmentList, value: department"></select></div>
<div class="span1"><select class="span1" data-bind="options: skillList, value: skill"></select></div>
<div class="span3"><input class="span3" name = "description" id="textAreaDescriptions" data-bind="value: description" placeholder="Max Character Limit 50" maxlength="50" >
<div id="char_namb2" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:50:0</div>
</div>
<div class="span3"><input class="span3" name = "notes" id="textAreaNote" data-bind="value: notes" placeholder="Max Character Limit 150" maxlength= "150">
<div id="char_namb3" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:150:0</div>
</div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Hours: <input class="span1" placeholder="Hours" data-bind="value: budget_hours"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Cost Rate: <input class="span1" placeholder="Cost Rate" data-bind="value: budget_cost_rate"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Charge Rate: <input class="span1" placeholder="Charge Rate" data-bind="value: budget_charge_rate "</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Cost: <input class="span1" placeholder="Other Cost" data-bind="value: budget_other_cost"</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Charge: <input class="span1" placeholder="Other Charge" data-bind="value: budget_other_charge"</input></div>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-success" data-bind="click: addTask"><i class="icon-plus icon-white"></i> Add Task</a>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-primary" data-bind="click: save,visible: isValid() && !isSubmitting() "><i class="icon-ok icon-white"></i> Create Job</a>
<a class="btn btn-info" data-bind="click: save,visible: isSubmitting"><i class="icon-ok icon-white"></i> Saving ... ...</a>
</div>
</div>
</div>
</div>
</div>
this snippet includes the script for character count function which is placed outside the loop.
<script>
$(function(){
$('#textAreaDescriptions').keyup(function(){
var charsno2 = new $(this).val().length;
$('#char_namb2').html("Character Count:50 : " + charsno2);
});
});
<script>
$(function(){
$('#textAreaNote').keyup(function(){
var charsno3 = $(this).val().length;
$('#char_namb3').html("Character Count:150 : " + charsno3);
});
});
Does anybody know how I could get this to work?
Thanks!
In spite of the fact that you are using Javascript instead of PHP, try puting your functions inside a
$( document ).ready()
I think you are binding the event to the inputs before the DOM's load
****Edit****
I think that there are several issues with your code. Check this link https://jsfiddle.net/ivan0013/fmu9bj35/1/ where you have an example working.