I do have the following html text:
<tr class="off" onmouseout="this.className='off'"onmouseover="this.className='over'">
<td><input type="checkbox" name="caller_enrollment_form:enrollmentParticipantSelectionTable:0:personSelection" id="caller_enrollment_form:enrollmentParticipantSelectionTable:0:personSelection" value="true" />
</td>
<td><span id="caller_enrollment_form:enrollmentParticipantSelectionTable:0:extClientId">111</span>
</td>
<td><span id="caller_enrollment_form:enrollmentParticipantSelectionTable:0:clientName">SAMUEL</span>
</td>
I am trying to click on the checkbox which has the data 111 in the same row.
I am trying to something like this:
page.FindChildByXPath("//span[contains(text(),'111')]/parent::td/preceding-sibling::td/input[#name='caller_enrollment_form:enrollmentParticipantSelectionTable:0:personSelection']",false)
but I get object not found error.
Your checkox has an ID, and IDs are unique within a page. So you can use:
// JScript
var checkBox = page.FindChildByXPath("//input[#id='caller_enrollment_form:enrollmentParticipantSelectionTable:0:personSelection']");
checkBox.ClickChecked(true); // Check the checkbox
The ID contains a number (0); you can use a variable to specify this number:
var checkBox = page.FindChildByXPath("//input[#id='caller_enrollment_form:enrollmentParticipantSelectionTable:" + index + ":personSelection']");
If you specifically need to identify by the text "111", you can use something like this:
var checkBox = page.FindChildByXPath("//tr[td/span[.='111']]/td/input");
checkBox.ClickChecked(true); // Check the checkbox
You can also use a variable instead of "111":
var checkBox = page.FindChildByXPath("//tr[td/span[.='" + text + "']]/td/input");
XPath explanation:
//tr - find a table row
[ - that matches this condition:
td/span[.='111'] - any of the row's cells contains a SPAN with the text '111'
]
- then in this row
/td/input - find an INPUT in any cell
Related
I have a form where the user choose a supplier from a select box, then a button to choose an item.
When he click the button, a module open and he can search for items. Result came into a table in the module, next to each row there is a + symbol, when he clicks the +, the row come outside the module, and place itself in the table in the main form.
<table>
<tr ng-repeat="row in searchitems">
<td>...</td>
<td>...</td>
<td> <a data-dismiss="modal" ng-click="additemfound(row)"></a> </td>
</tr>
</table>
javascript code:
$scope.additemfound = function(row){
$scope.rowrequest.push(row)};
here i get the row that i chose from the module to the main form and the module close.
I need to push from the module multi row, not only one by one, any solution ?
in the table :
<tr ng-repeat =" row in rowssearchitems"" ng-class="{'selected':
row.selected}" ng-click="addItemFound(row)">
in js
$scope.addItemFound = function(row) {
row.selected ? row.selected = false : row.selected = true;
in html again:
<button ng-click="getallrows();">Get all rows </button>
js:
$scope.getallrows = function(){
var selectedrows = $filter("filter")($scope.rowssearchitems, {
selected : true}, true);
for (var i=0;i<selectedrows.length;i++){
var selectedrowsdata = selectedrows[i];
$scope.rowsrequests.push(selectedrows[i])}
What I did :
I gave a class selected to every row where the user click on the row and the class become selected true then a loop on all rows selected true and push those rows to the main table
I have a table that has js to allow me to sort the data. But I need to be able to change the data and have js still sort it when I click the header. I have a input box off to the side with a button. I am looking for a onclick way to change the table data from X to what is ever in that input box.
<td id="tabledata1">
1
</td>
I need to be able to change the "1" in that table data. I can not find the function code to effect that specific number. I am guessing it is something like this document.getElementById("tabledata1").style.color but instead of style.color there is something to reference table data.
It would look something like this
var cell = document.getElementById("tabledata1");
var button = document.getElementById("my-button");
var input = document.getElementById("my-input");
var par = document.getElementById("result");
button.addEventListener("click", function() {
cell.textContent = input.value;
});
<input id="my-input" type="text" />
<button id="my-button">Change Table Data</button>
<table>
<tr>
<td id="tabledata1">1</td>
</tr>
</table>
<p id="result"></p>
Breakdown
First query the document for the ids you want and store them into variables. You can then listen for the click event with the addEventListener function.
You can change the text of the table cell, by using the textContent property and setting it equal to the value of the input element.
I am wanting to generate a table dynamically using Angular JS, based on what is checked on some checkboxes. The problem is that there are a few fields, we will call them relation/column, that I want to display ALWAYS, and the remaining fields only if their box is checked. The relation is searched for via a search box (relations can have multiple columns), and I want to display only the properties of that relation that are relevant to a user.
So
Update Time [X]
Update Status [ ]
Time Zone [ ]
Would display some html along the lines of
<table>
<tr>
<th> Relation </th>
<th> Column </th>
<th> Update Time </th>
</tr>
<tr ng-repeat= "result in results">
<td> {{result.relation}} </td>
<td> {{result.column}} </td>
<td> {{result.update_time}}</td>
</tr>
If no boxes were checked, only the relation and column fields would be populated. The documentation for Angular JS is taking me all over the place, so would anyone have an idea on how to do this?
edit : controller isn't working quite yet, I still need to filter the search results, but basically it goes
$scope.search = function(){
//validate form input
//create url with the input recieved
$http.get(url).success(function(data){
$scope.results = angular.fromJson(data);
});
}
I use mojolicious backend to grab the data I want. Again, the problem isn't that I can't get any data, or that I can't filter the results based on the relation. I want to be able to search based on relation, and only display the attributes of that relation that I want to, based on what is checked. THAT part, I can't figure out.
edit again : the firewall where I'm at prevents me from writing comments/upvoting. You shall be rewarded for your help when I get home tonight. Thank you thank you!
I think the best way to do this would be using ng-show expressions tied to a variable in the model.
For example.
<input type="checkbox" ng-model="updateTime">
makes a checkbox and ties the result to $scope.updateTime. You can then use this variable later on via the ng-show directive like so...
<th ng-show="updateTime"> Update Time </th>
...
<td ng-show="updateTime"> {{result.update_time}}</td>
this means that these elements will only show when updateTime is set to true (i.e the checkbox is checked.)
You can see an example here, I've only implemented the one field but it should be possible to extend it pretty easily!
http://plnkr.co/edit/W6Ht6dnGw4fBplI83fB1?p=preview
I would suggest using a custom filter with the checkbox scope variables passed in. Something like this:
html
<input type="checkbox" ng-model="checkbox1" />
<input type="checkbox" ng-model="checkbox2" />
<input type="checkbox" ng-model="checkbox3" />
... ng-repeat= "result in results|checkboxFilter:{checkbox1,checkbox2,checkbox3}"
filter.js
.filter('checkboxFilter', function() {
return function (results, checkbox1, checkbox2, checkbox3) {
var filtered_objects = angular.copy(results);
for (var i = 0, len = filtered_objects.length; i < len; i++) {
**modify your filtered_objects based on your checkboxes**
if (checkbox1) ...
if (checkbox2) ...
if (checkbox3) ...
}
return filtered_objects;
}
});
Maybe something like that.
What are the ways to get and render an input value using jQuery?
Here is one:
$(document).ready(function() {
$("#txt_name").keyup(function() {
alert($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
You can only select a value with the following two ways:
// First way to get a value
value = $("#txt_name").val();
// Second way to get a value
value = $("#txt_name").attr('value');
If you want to use straight JavaScript to get the value, here is how:
document.getElementById('txt_name').value
There is one important thing to mention:
$("#txt_name").val();
will return the current real value of a text field, for example if the user typed something there after a page load.
But:
$("#txt_name").attr('value')
will return value from DOM/HTML.
You can get the value attribute directly since you know it's an <input> element, but your current usage of .val() is already the current one.
For the above, just use .value on the DOM element directly, like this:
$(document).ready(function(){
$("#txt_name").keyup(function(){
alert(this.value);
});
});
You have to use various ways to get current value of an input element.
METHOD - 1
If you want to use a simple .val(), try this:
<input type="text" id="txt_name" />
Get values from Input
// use to select with DOM element.
$("input").val();
// use the id to select the element.
$("#txt_name").val();
// use type="text" with input to select the element
$("input:text").val();
Set value to Input
// use to add "text content" to the DOM element.
$("input").val("text content");
// use the id to add "text content" to the element.
$("#txt_name").val("text content");
// use type="text" with input to add "text content" to the element
$("input:text").val("text content");
METHOD - 2
Use .attr() to get the content.
<input type="text" id="txt_name" value="" />
I just add one attribute to the input field. value="" attribute is the one who carry the text content that we entered in input field.
$("input").attr("value");
METHOD - 3
you can use this one directly on your input element.
$("input").keyup(function(){
alert(this.value);
});
I think this function is missed here in previous answers:
.val( function(index, value) )
You can get the value like this:
this['inputname'].value
Where this refers to the form that contains the input.
To get the textbox value, you can use the jQuery val() function.
For example,
$('input:textbox').val() – Get textbox value.
$('input:textbox').val("new text message") – Set the textbox value.
You can simply set the value in text box.
First, you get the value like
var getValue = $('#txt_name').val();
After getting a value set in input like
$('#txt_name').val(getValue);
For those who just like me are newbies in JS and getting undefined instead of text value make sure that your id doesn't contain invalid characters.
Try this. It will work for sure.
var userInput = $('#txt_name').attr('value')
You can try
let quantity = $('input[name = quantity]').val()
where the name of the input field is quantity
Shortest
txt_name.value
txt_name.onkeyup = e=> alert(txt_name.value);
<input type="text" id="txt_name" />
I've a HTML file that shows to the user the contents of a database (it is shown as a table). The user can choose one of the rows.When this is done the selection made by the user is sent to a servlet that will work with that information.
Imagine that this servlet is going to look for files related to the information chosen by the user. What I'd like to do is to provide the user with the option of also choosing the number of files that are going to be looked for by the servlet. That way the user should be able to choose one of the rows shown in the table and should also be able of typing the numers of files that are to be looked for.
So far I'm able to send to the servlet what the user chooses in the table, but I'd like to know if it is possible to attach to this information the number of files requested.
This is my code:
<center><form action="administ" method=post >
<center><table>
<table border=\"1\"><tr><th></th><th>Titleo</th><th>Author</th><th>Album</th></tr>
<c:forEach items="${items}" var="item">
<tr>
<td><input type="radio" name="Song" value="${item.file}#${item.title}#${item.author}$${item.album}">
<td>${item.title}</td>
<td>${item.author}</td>
<td>${item.album}</td>
</tr>
</c:forEach>
</table></center>
<tr><td colspan=2><input type=submit value = play name = option></td></tr>
<tr><td colspan=2><input type=submit value = Delete name = option></td></tr>
At this point I want to add a new option that requires not only a new button, but also requires the user to introduce a number.
That depends. If you want single selection of rows using radiobuttons, then you could just put a single input field at bottom of table, next the submit button or so. E.g.:
<input type="text" name="numberOfFiles">
which you can obtain in the servlet as follows:
String numberOfFiles = request.getParameter("numberOfFiles");
But if you want multiple selection of rows using checkboxes or if you want this field to appear in each row at any way, then you need to give the radio/checkbox field a value of the row index. If you're using JSTL <c:forEach> to iterate over the rows (which I'd expect that you indeed do), then you can make use of the varStatus attribute to declare a LoopTagStatus. Inside the loop you can obtain the row index by LoopTagStatus#getIndex(). E.g.:
<table>
<c:forEach items="${items}" var="item" varStatus="loop">
<tr>
<td><input type="checkbox" name="selected" value="${loop.index}"></td>
<td><input type="text" name="number"></td>
</tr>
</c:forEach>
</table>
<input type="submit">
(to have single selection, just replace type="checkbox" by type="radio")
In the servlet, you can obtain all input fields with the same name in the order as they appear in the table as follows:
String[] numbersOfFiles = request.getParameterValues("numberOfFiles");
With checkbox-selection you can obtain the all selected row indexes and thus also the associated input field as follows:
String[] selectedIndexes = request.getParameterValues("selected");
for (String selectedIndex : selectedIndexes) {
int index = Integer.parseInt(selectedIndex);
String numberOfFiles = numbersOfFiles[index];
// ...
}
Or if it is a radiobutton-selected row which is single selection at any way:
String selectedIndex = request.getParameter("selected");
int index = Integer.parseInt(selectedIndex);
String numberOfFiles = numbersOfFiles[index];