Suppose I have 3 text boxes on a page defined as below.
<input id="input" type="search" autocomplete="off" role="combobox" placeholder="Search">
<input id="input" type="open" autocomplete="off" role="combobox" placeholder="Open">
<input id="input" type="close" autocomplete="off" role="combobox" placeholder="Close">
I will pass the value 'Open' as a parameter to JSoup and JSoup should return me the data as below (which are the details of the middle textbox).
<input id="input" type="open" autocomplete="off" role="combobox" placeholder="Open">
Can JSoup do this?
Thank You
-Anoop
You need to select tag by attribute:
document.select("input[placeholder=Open]")
UPD:
To select tag has any attribute with value "Open" you need to iterate over all attribute values:
List<Element> result = document.select("input").stream()
.filter(input -> hasAttrValue(input, "Open"))
.collect(Collectors.toList());
hasAttrValue method:
private boolean hasAttrValue(Element element, String targetValue) {
for (Attribute attribute : element.attributes()) {
if (targetValue.equals(attribute.getValue())) {
return true;
}
}
return false;
}
Related
Here is my form html
<div class="card-body">
<form action="#{/orgCategoryTag/create}" method="POST">
<div class="form-group">
<label for="form-tags-1" class="text-dark font-bold">Add new tags</label>
<input id="form-tags-1" name="tags-1" type="text" th:value="${tags}">
</div>
<a
type="button"
class="btn btn-success" href="#"
data-placement="top" title="Tooltip on top">Add
</a>
</form>
</div>
Here is Get mapping for rendering form
#GetMapping(value = "/form")
public String categoryForm(Model model, BindingResult result) {
Long testId = (long)1;
OrgCategory orgCategory = new OrgCategory();
List<OrgCategoryTagModel> orgCategoryTags = orgCategoryTagRestController.getAllByCategoryId(testId);
model.addAttribute("category", orgCategory);
model.addAttribute("tags", orgCategoryTags);
model.addAttribute("add", true);
return "orgCategoryForm";
}
For displaying a list of options (tags in your context), please use a combo-box, they are better suited to display a list of options.
<select>
<option
th:each="tag: ${tags}"
th:text="${tag.name}"
th:value="${tag.id}"
/>
</select>
<select> is the tag for creating a combobox and <option> are the different options available in the combobox. I have used a for each loop to create different options for the combobox where tag represents your object OrgCategoryTagModel.
I do not know your object OrgCategoryTagModel, but I am assuming you want to display the name of the tag (tag.name) and use the id of OrgCategoryTagModel (tag.id) as the value to be saved when making a selection.
Those are the fields that I have that I want to write a conditional statement for in a PDF form that I am creating in Adobe Acrobat Pro X. In the form if I tick the checkbox I would like FP1 to get the value from QxHxW1. If the checkbox is not ticked I want FP1 to register as "0". I have been trying to do this with different tutorials that I have found online and each time I get some sort of SyntaxError.
is there anything I can do to fix this? Am I way off with the way that this is written?
FrenchPane1 is a checkbox
FP1 is a text box
QxHxW1 is a text box
Using javascript, this would be:
var check = document.getElementsByClassName('check');
for( var i = 0; i < check.length; i++ ){
check[i].onchange = function() {
var isChecked = this.checked;
var target = document.querySelector(this.dataset.target);
var source = document.querySelector(this.dataset.source);
target.value = isChecked ? source.value : '0';
}
}
<div>
<label for="FrenchPane1"><input type="checkbox" id="FrenchPane1" data-target="#FP1" data-source="#QxHxW1" class="check"> FrenchPane1</label>
<input type="text" name="FP1" id="FP1">
<input type="text" name="QxHxW1" id="QxHxW1" value="Some values">
</div>
<div>
<label for="FrenchPane1"><input type="checkbox" id="FrenchPane2" data-target="#FP2" data-source="#QxHxW2" class="check"> FrenchPane1</label>
<input type="text" name="FP2" id="FP2">
<input type="text" name="QxHxW2" id="QxHxW2" value="Some values 2">
</div>
I have written the following code in JSFiddle to able so get the sum of combined values of the checkboxes.
Script
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
}
}
Code
<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox">
<input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>
There it works perfect, when I implement this in my system there is no reslut or any error.
The checkboxes in my system are genarated by an MySQL output.
Any suggestions what migh be wrong?
Your code is probably running before the elements are dynamically generated, so the event handlers are not being attached. Try delegating the event handlers using .on() method:
$total = $('#payment-total');
$(document).on("click", ".sum", function() {
var add = this.value * (this.checked ? 1 : -1);
$total.text(function(i, value) {
return parseFloat(value) + add;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="33" type="checkbox" class="sum" data-toggle="checkbox">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox">
<input value="62" type="checkbox" class="sum" data-toggle="checkbox">
<span id="payment-total">0</span>
I prefer to use pure javascript for your solution because you didn't use Jquery on your code. I think problem reason comes from Javascript eventListener. When you create a new element to your document, you should add its events.
In first code i create a checkbox but this is not work as others. link_1
<http://jsfiddle.net/3oweu107/1/>
However in second code i add event as other checkbox so payment-total value calculation done by new event. link_2
<http://jsfiddle.net/3oweu107/2/>
i hope this will help your problem :)
<br>
<input id="workedWithGR" type="radio" onclick="showDiv('hiddenInput');" value="yes" checked="" name="workedWithGR" style="border:none;">
<label>Yes</label>
<input id="workedWithGR" type="radio" onclick="hideDiv('hiddenInput');" value="no" name="workedWithGR" style="border:0px;">
For yes and no buttons I keep getting "no element found error for Webdriver". I can't do the xpath because there are quotes in the id.
Use the tag "value" instead or the child node "label" then recursively go up the tree to select the right element. For instance I'm assuming your html has the following:
<br>
<input id="workedWithGR" type="radio" onclick="showDiv('hiddenInput');" value="yes" checked="" name="workedWithGR" style="border:none;">
<label>Yes</label>
<input id="workedWithGR" type="radio" onclick="hideDiv('hiddenInput');" value="no" name="workedWithGR" style="border:0px;">
<label>No</label>
So try something like the following keying off the node label:
//input[#id=\"workedWithGR\"]/label[text()="Yes"]/../input
I use this approach for radio input. Avoid having to look for multiple input elements / works with variable number of radio buttons having same name.
String valueToSelect = "no";
List<WebElement> radios = driver.findElement(By.name("workedWithGR"));
if (radios.size() == null)
return ;
for (WebElement radio : radios){
if (radio.getAttribute("value").equals(valueToSelect)){
radio.click();
break;
}
}
Can someone please tell me how to set a checkbox dynamically in Javascript?
function displayResults(html){
var v = html.split(",");
document.getElementById('fsystemName').value = v[0];
if (v[1] == "true"){
document.getElementById('fUpdateActiveFlag').checked = true;
}
}
So I am passing some values from my controller separated by commas. For the checkbox, when the value is true I want it to tick the box.
EDIT:
When a value is changed from a dropdown box it calls this displayResults method as its return statement:
$('#uINewsSystemList').change(function() {
$.get("/live-application/SystemById", {systemid: $("#systemList").val()}, displayResults, "html");
I want it to update some other values such as textboxes and checkboxes. I can get the fsystemName to populate with the appropriate value but the fUpdateActiveFlag always stays unchecked.
In your question, you posted a javascript example, not JSP.
In JSP you can use a for loop to write the checkbox like this:
<% for (Element element : elementList) { %>
<input type="checkbox" name="<%=element.getName() %>" value="<%=element.getValue() %>" <%=element.getChecked() ? "checked" : "" %> />
<% } %>
Will result in:
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>