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>
Related
Here is the form I have ( many dishes where each has an input number ( quantity of dishes to order ).
The problem is that I would like to show the price of an order before the order is done, for this I need to sum somehow input of the ${dish.price}, but how can this be done?
<form action="#" th:action="#{/menu}" th:object="${order}" method="post">
<div th:each="dish : ${dishList}">
<div>
<h4 th:inline="text">[[${dish.name}]]<span class="price" th:text="${dish.price}">45</span></h4>
<p th:text="${dish.category}">DRINKS</p>
<p th:text="${dish.description}">
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
<div>
<button class="decrement" type="button" onclick="stepperDecrement(this)">-</button>
<input
th:value="0"
th:name="${'dishIdQuantityMap[' + dish.id + ']'}"
type="number"
min="0"
max="100"
step="1"
/>
<button class="increment" type="button" onclick="stepperIncrement(this)">+</button>
</div>
</div>
</div>
</div>
<button type="submit" value="Submit">Confirm order</button>
</form>
JS ( Just inputs +1 to input type"number" when the button is clicked )
function stepperDecrement(btn){
const inputEl = btn.nextElementSibling;
const calcStep =inputEl.step * -1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}
function stepperIncrement(btn){
const inputEl = btn.previousElementSibling;
const calcStep = inputEl.step * 1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}
Of course yes, it is possible.
To get server data inside your thymeleaf templates, you can proceed various ways, and it depends on the context where you need that data.
Inside Javascript, (CSP "script-src 'unsafe-inline' ..." or <script th:inline="javascript" nonce="" ...> are required because writing JS inline is a bad way regarding all XSS caveats. Thanks OWASP), you can try to write : let productCategory = /*[[${productCategory}]]*/ '';
Inside Javascript with ES6+ modules (with webpack or any other solution), you can check an endpoint of your webapp (using Promise feature with polyfill) which will load data inside a form input element. And make your operations as usual. Have fun.
I am trying to get the check boxes' check state with the code below but ended up with the following error if the any of the checkboxes are not checked. My goal is to update the database table with the checkbox state. if checked then 1 else 0.
Error:
Severe: java.lang.NullPointerException
at doPost(Controller.java:125)
java:
String[] chkDisperse = request.getParameterValues("chkDisperse");
int status;
for (int i = 0; i < attId.length; i++) {
if (chkDisperse[i] == null) {
//(line 25 here)
status = 0;
}
else
{
status = 1;
}
html:
<c:forEach var="AttList" items="${att}" varStatus="iter">
<tr id="test">
<td style="text-align: center;"><input name="attId" type="hidden" value="${AttList.attId}" /></td>
<td style="text-align: center;"><input type="checkbox" name="chkDisperse" value="${AttList.isPresentDisperse}" ${AttList.isPresentDisperse == 1 ? 'checked' : ''}></td>
</tr>
</c:forEach>
It seems that selected checkbox values are not being passed to the servlet. Hence you get array as null here,
String[] chkDisperse = request.getParameterValues("chkDisperse");.
And you end up with NPE at this line:
if (chkDisperse[i] == null)
Make sure that the checkbox are properly enclosed within the form tag. In case it is an ajax call do check the parameters being sent from the web browser console.
Edited
I want to set the the status to 0 if not checked
In jsp or js file imported in jsp, try this jQuery solution:
$(function() { //dom ready
$('input[name=chkDisperse]').on('change', function() {//change event handler
this.value = this.checked ? '1' : '0';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="chkDisperse" value="0" />
<input type="checkbox" name="chkDisperse" value="1" />
This is plain js solution:
var putState = function(input) {
input.value = input.checked ? '1' : '0';
};
<input type="checkbox" name="chkDisperse" value="0" onchange='putState(this);' />
<input type="checkbox" name="chkDisperse" value="1" onchange='putState(this);' />
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 :)
Say I have the following
<div class="facetContainerDiv">
<div>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
</div>
</div>
Now I want to put a check mark on the checkbox based on the index I provide. So I write a method like below
How do I access all elements inside the div class="facetContainerDiv" ?
I tried
List<WebElements> elementsList = driver.findElements(By.cssSelector(".facetContainerDiv"));
for(WebElement checkBox:elementsList) {
int i=0;
checkBox = elementsList.get(i);
bla bla bla..
}
in the above code elementsList has only one element with "type" as null.
Follow the code below exactly matched with your case.
Create an interface of the web element for the div under div with class as facetContainerDiv
ie for
<div class="facetContainerDiv">
<div>
</div>
</div>
2. Create an IList with all the elements inside the second div i.e for,
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
<label class="facetLabel">
<input class="facetCheck" type="checkbox" />
</label>
3. Access each check boxes using the index
Please find the code below
using System;
using System.Collections.Generic;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.Support.UI;
namespace SeleniumTests
{
class ChechBoxClickWthIndex
{
static void Main(string[] args)
{
IWebDriver driver = new FirefoxDriver();
driver.Navigate().GoToUrl("file:///C:/Users/chery/Desktop/CheckBox.html");
// Create an interface WebElement of the div under div with **class as facetContainerDiv**
IWebElement WebElement = driver.FindElement(By.XPath("//div[#class='facetContainerDiv']/div"));
// Create an IList and intialize it with all the elements of div under div with **class as facetContainerDiv**
IList<IWebElement> AllCheckBoxes = WebElement.FindElements(By.XPath("//label/input"));
int RowCount = AllCheckBoxes.Count;
for (int i = 0; i < RowCount; i++)
{
// Check the check boxes based on index
AllCheckBoxes[i].Click();
}
Console.WriteLine(RowCount);
Console.ReadLine();
}
}
}
I'm not sure if your findElements statement gets you all the divs. I would try the following:
List<WebElement> elementsRoot = driver.findElements(By.xpath("//div[#class=\"facetContainerDiv\"]/div));
for(int i = 0; i < elementsRoot.size(); ++i) {
WebElement checkbox = elementsRoot.get(i).findElement(By.xpath("./label/input"));
checkbox.click();
blah blah blah
}
The idea here is that you get the root element then use another a 'sub' xpath or any selector you like to find the node element. Of course the xpath or selector may need to be adjusted to properly find the element you want.
You're asking for all the elements of class facetContainerDiv, of which there is only one (your outer-most div). Why not do
List<WebElement> checks = driver.findElements(By.class("facetCheck"));
// click the 3rd checkbox
checks.get(2).click();
alternatively, you can try writing a specific element:
//label[1] is the first element.
el = await driver.findElement(By.xpath("//div[#class=\"facetContainerDiv\"]/div/label[1]/input")));
await el.click();
More information can be found here: https://www.browserstack.com/guide/locators-in-selenium
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>