the element marked i want to get the value to compare it with excel data
#FindBy(id="TAXEI")
//#FindBy(xpath="//*[#id='TAXEI']")
public WebElement taxesEIvalue;
public void verifyTaxesEIvalue() {
//jse.executeScript("arguments[0].setAttribute('type', '')",taxesEIvalue);
String value=taxesEIvalue.getAttribute("value");
System.out.println("the value is "+value);
}
I am facing problem to get the value in an application to compare it from excel,but unable to get value through Dom structure.The Html structure did't provide Value attribute
Here is the html code for the element unable to get the value that is in text box,i have compare with that value with the excel data using data driven
<div class="col-lg-6 col-md-6 col-sm-6">
<fieldset class="fsStyle">
<legend class="legendStyle">
<label class="control-label main">TAXES</label>
</legend>
<div class="wages">
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">EI</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXEI" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPIP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPIP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">CPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXCPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Income Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXIT" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Quebec Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQTax" disabled="disabled">
</div>
</div>
</div>
<a id="divExemptNamesIncome"></a>
<p class="form-control-static"><strong id="divExemptNamesIncome"></strong></p>
</div>
</fieldset>
</div>
I want to retrieve the position of a checked value :
HTML:
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" ng-value="{{i-1}}" name="score1"/>
<br>
{{score1}}
<textarea ng-model="options[i-1]" class="form-control"></textarea>
</div>
</div>
</div>
Controller:
$scope.score1=[];
The following solves my initial problem:
HTML
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" name="score1" ng-value="{{i-1}}" ng-true-value="'checked'" ng-false-value="'unchecked'"/>
<br>
<textarea ng-model="options[i-1]" class="form-control" ></textarea>
</div>
</div>
</div>
Controller
$scope.options=[];
$scope.score1=[];
$scope.scores=[];
angular.forEach($scope.score1,function(value,key){
if (value ==='checked'){
$scope.scores.push(key);
}
});
I have a form that is collecting a user's personal information. I've started to add control to the form using bootstrap grid. I am having issue when I reach certain breaking point. For example, 768 and 781px, one of the control will be out of place. Then, it will fall back into place at 782px and work fine. I have 3 separate css files, but they don't have anything at the moment. How do I handle it when the control as is the case between 768 and 781px?
html file
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">First Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">Middle Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Last Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">Sex:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">DOB:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-sm-4 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
#media only screen and (min-device-width:768px) and (max-device-width:1024px){
}
#media only screen and (min-device-width:1024px) {
}
When the screen is less than 768px
The screen is between 768 and 781 px; the lastName field is out of place
Screen is 782px or more
Right So your question was wired, Ive tided up your code abit (not fully otherwise you wont learn) The form is now responsive from big screens down to phones.
You will see that I have only used col-md-xx to achieve the look you want. If you want something changes just pop a comment and ill be glad to do it for you
<div class="container">
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-md-2 label-control">First Name:</label>
<div class="col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-md-2 label-control">Middle Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-md-2 label-control">Last Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-md-12"></div>
<div class="form-group">
<label for="middleName" class="col-md-2 label-control">DOB:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="FirstName" class="col-md-2 label-control">Sex:</label>
<div class="col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="lastName" class="col-xs-12 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
</div>
i am new to Angular js i want to ask i have a case in which i have to return "YES" if the checkbox is checked or true and want to return "NO" when the value is false or unchecked.
actually my data is storing in databse in "Tinyint" 1 or 0 form i want to do when 1 occurs it shows YES any solution for this Any help will be appreciated.
Here is my html
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" value="" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
i need to target checkbox ismultiple and isspecial .
You can use ng-true-value of ng-false-value like this:
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isSpecial" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
Right now I'm working on a project in which I need to use JSlider plugin of jquery with Angularjs. I tried to use this plugin into a directive and within directive I put this in $evalAsync so that I assign the values dynamically to Jslider after content loaded and before page rendering. The way I did this is mentioned below:-
var sliderDirective = angular.module("sliderModule",[]);
sliderDirective.directive("slider",function(){
return {
restrict: 'AE',
replace: true,
template: '<input id="slider" name="price" type="slider" value="{{filters.price}}">',
link: function(scope, elem, attrs) {
scope.$evalAsync(function(scope){
elem.slider({
from: 0,
to: 3000,
step: 50,
smooth: true,
round: 0,
limits: false,
scale: ['$0','|','$500','|','$1,000','|','$1,500','|','$2,000','|','$2,500','|','$3,000+'],
skin: "blue",
onstatechange:function(value){
scope.filters.price = value;
}
})
})
}
}
})
I'm setting the values dynamically that are being passing in link function's scope variable. But the problem is this that the slider doesn't get these dynamic values and shows only single pointer with value zero. So, anybody who has some solution for this problem. Also, there is a possibility that I followed a wrong way of doing this so please make me correct in that case.
I recommend you set the scope attribute of the directive to something like:
scope : {
values: '='
}
This means you have to provide the values through databinding to the directive. You can then watch the values in the linking function of the directive. As soon as they are not null, call the elem.slider function. I recommend to not use the evalAsync but use a watcher like this instead
Recently I have used RANGE SLIDER in angularJS.
<form>
<div class="choose_industry">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label>
<div class="col-xs-12 col-sm-8 col-md-10 col-lg-10">
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry">
<label for="radio1">
Commercial Trucking Transportation
</label>
</div>
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry">
<label for="radio2">
Other Industries
</label>
</div>
</div>
</div>
</div>
<div class="employee_counting">
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Number of Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp">
<!-- <span>Total Number of Employees</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0</span>
<span class="pull-right">25k</span>
<div id="slidecontainer">
<input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Enrollment Percentage (%)?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
<input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per">
<!-- <span>Estimated Percentage that will enroll</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0%</span>
<span class="pull-right">100%</span>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Annual Cost per Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost">
<!-- <span>Avarage Salary and benifits per Employee</span> -->
</div>
<div class="range_slider">
<span class="pull-left">$0</span>
<span class="pull-right">$300k</span>
<div id="slidecontainer">
<input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost">
</div>
</div>
</div>
</div>
</form>
Add following code in the script tag
<!-- RANGE SLIDER JS START -->
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<!-- RANGE SLIDER JS OVER -->
Above script working good for me, should work for you too.