<form id="form">
<table id="VIPs" width="400">
<tbody>
<tr id="heading">
<tr>
<td>
<input id="VIP" type="radio" name="VIP" value="1" checked="true"/>
</td>
<td>Sylvester</td>
<td>Stallone</td>
<td>Male</td>
<td>Movie</td>
</tr>
<tr>
<td>
<td>Elvis</td>
<td>Presley</td>
<td>Male</td>
<td>Music</td>
</tr>
<tr>
<td>
<td>Marie</td>
<td>Curie</td>
<td>Female</td>
<td>Science</td>
From the above code snippet how can I click a radio button corresponding to a specific name using selenium java ?
You can do this:
driver.findElement(By.cssSelector("input[name='VIP']")).click()
which will eventually clicks the radio button.
Related
I have a table that's populated with records from an object retrieved from a service captured using AngularJS. I have checkbox in the table that enables that row to be edited. Within the row, I have a select box that I need to have its default value set to the original value in the row when I click the "Edit" checkbox in the row while still populating the select with all the other values from which to choose.
Below is the code that's populating the table and the select box.
<thead>
<tr>
<th class="col-lg-2">Sub Program</th>
<th class="col-lg-6">Description</th>
<th class="col-lg-2">Program</th>
<th class="col-lg-1">Edit</th>
<th class="col-lg-1">Update/Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="timeAllocationSubProgram in timeAllocationSubPrograms">
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramName}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramDescription}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.programName}}</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramName}}"
ng-model="timeAllocationSubProgram.subProgramName" />
</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramDescription}}"
ng-model="timeAllocationSubProgram.subProgramDescription" />
</td>
<td ng-show="checked">
<select class="form-control" ng-options="timeAllocationProgram as timeAllocationProgram.programName
for timeAllocationProgram in timeAllocationPrograms track by timeAllocationProgram.programName" ng-model="timeAllocationProgram"
ng-change="selectProgram(timeAllocationProgram)"></select>
</td>
<td>
<input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"/>
</td>
<td>
<button class="btn btn-xs btn-primary" ng-click="editTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-show="checked">
Update
</button>
<button class="btn btn-xs btn-primary" ng-click="deleteTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-hide="checked">
Delete
</button>
</td>
</tr>
</tbody>
</table>
With my humble experience, the best way to set default value to inputs linked to ng-model in Angular, is simply setting the default value to the ng-model.
ng-options is here remplacing
<options ng-repeat="timeAllocationProgram in timeAllocationPrograms">
Consequently, if timeAllocation (as it's what is written in ng-model directive) is set to the default value you want when you load the data from the service, it should display it right.
The subject seems to have been already answered as well, here's the link, with a plunker :
how to use ng-option to set default value of select element
I have a html table which is binding using Angularjs.Now i want to select checkbox during ng-repeat with a condition.
<tbody>
<tr class="gradeX" ng-repeat="itm in usersList">
<td>
<input type="checkbox"/></td>
<td> {{itm.FirstName}}</td>
<td>{{itm.Email}}</td>
</tr>
</tbody>
I have another field itm.checkstatus.i want to check the checkbox during ng-repeat when itm.checkstatus=1 then checkbox will check else checkbox will not check.how to do this?
You can use ng-checked for this:
https://docs.angularjs.org/api/ng/directive/ngChecked
<tbody>
<tr class="gradeX" ng-repeat="itm in usersList">
<td><input type="checkbox" ng-checked="itm.checkstatus == 1" /></td>
<td>{{itm.FirstName}}</td>
<td>{{itm.Email}}</td>
</tr>
</tbody>
I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee
I need to skip the ng-repeat for particular column.
My Code:
<tr ng-repeat="(lunches,price) in lunchTwo">
<td>
<label class="label_wraptext">{{lunches}}</label>
</td>
<td class="td_width">
</td>
<td>
<label>{{price}}</label>
</td>
<td style="padding-left:190px">
</td>
<td>
<select ng-controller="Quantity">
<option ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
{{key}}
</option>
</select>
</td>
</tr>
I need to avoid binding the 'Select' control for all the rows.
Thanks in Advance,
Stephen.L
Suppose if you want to show the select control only for the first row, you can give a check using the index if it is equals ZERO, then show the select box, else not.
Please find the updated code below, check if it works for you.
<tr ng-repeat="(lunches,price) in lunchTwo">
<td>
<label class="label_wraptext">{{lunches}}</label>
</td>
<td class="td_width">
</td>
<td>
<label>{{price}}</label>
</td>
<td style="padding-left:190px">
</td>
<td>
<select ng-controller="Quantity" ng-show="$index==0">
<option ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
{{key}}
</option>
</select>
</td>
</tr>
I'm working on a small 'Shopping Site' college project...I had created everything but stucked at one Problem.
There is a content part aligned center in my page where i have a table for Product name,Price and Add to cart in consecutive rows...
<div id="Content">
<table id="ContentTable">
<tr>
<td id="iphone5"><img class="thumbnail" src="mobile_img/iphone-5.jpg"></td>
<td><img class="thumbnail" src="mobile_img/Lumia-920.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/blackberry-curve-9300.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/header.jpg"> </td>
</tr>
<tr>
<td>$ 5767435</td>
<td> $ 2343456</td>
<td> $ 123123</td>
<td>$ 345345</td>
</tr>
<tr class="productdetails">
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
</tr>
</table>
</div>
Problem is that, how could i attach product details to 'Add to cart' link below them and send them to other page, which is to be stored in database when 'Add to Cart' below them is clicked...
well you can make a seperate table in database containing the item id,item name or link to the image (or any other way to store images), and the price.
in the page where you want to display, pull the values from the database and put it in a form. so that it would look like:
<form name="something" action="Add_to_Cart.jsp" method="post">
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 1%></td>
<td><%price 1%></td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 2%></td>
<td><%price 2%></td>
</tr>
.
.
.
and finally at the end a submit button with showing Add to Cart..
<input type="submit" name="Getthis" value="Add to Cart"/>
</form>
and then retrive the values like this
String items[]= request.getParameterValues("item");
look for reference: http://www.devmanuals.com/tutorials/java/jsp/multiplecheckbox.html
so now you will have the id's of the item selected and can easily add to cart..
(ps. the codes are just snippets)