How to check if dynamically appearing inputs are selected - javascript

When I click on my arrow, I would like to see if the inputs that were currently displayed on my page were checked. If not I want to display modal. Unfortunately it only works on the first two questions(first click). I would ask for a hint on how to check the next inputs. Here is the all JS code: https://codepen.io/paulina-mi/pen/jOybQGe
arrowBtn.addEventListener("click", () => {
const checkedAnswers = answers.filter(answer => answer.checked);
if(checkedAnswers.length < 2) {
modal.classList.add("modal-active");
modalInfo.innerText = "Wszystkie pola muszą być zaznaczone!"
}

Related

Checkbox doesnt stay Checked

I am having a very weird problem. I am trying to load a "Group" which has a list of devices. The devices exist in a table and a checkmark should appear when the device is inside the group.
My code looks like this:
function LoadGroup(Input)
{
document.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = false);
console.log(Input.id);
GroupData.find(Element => {
if(Element["ID"] == Input.id)
{
Element["Devices"].forEach(Device => {
Checkmark = document.getElementById(Device["DeviceID"]);
Checkmark.checked = true
console.log(Checkmark.checked);
})
return true;
}
});
document.querySelectorAll('input[type=checkbox]').forEach(Element => console.log(Element.checked));
}
So a group gets clicked on, I search for the right Group in my data and then go through the devices to set the Checkmark and log the current state. I get 4 true in the console.
After this I query all checkmarks and check if they are checked. I get 3 true one false.
I dont understand what the problem is. He sets all true but then one is false.
Any ideas?

Intro.JS possible to check user input before proceed

So, i want to come out with the Javascript which forced user to input / select anything before going to next step, (like forced user to press button, input their name, etc). I am working on Django Framework with mix together with Javascript and HTML together.
Ignore the first part as I am trying to assign each function to the button so the button can do different tasks individually. But it wont work in the intro.js script.
Code snipper are below:
<script>
/*
var btn1=document.getElementById("button1");
var btn2=document.getElementById("button2");
var div=document.getElementById("InputName");
btn1.onclick=function(){
if (div.style.display !=="none") {
div.style.display="none";
} else {
div.style.display="block";
}
};
// this is the crucial part
btn2.onclick=function(){
var steps=[
{element:"#button1",intro:"A button", position:"right"},
{element:"#button2",intro:"This goes away sometimes"}
];
if (div.style.display==="none") {
steps.splice(1,1);
}
introJs().setOptions({
steps:steps
}).start();
} */
var steps=[
{element:"#InputName",intro:"Please fill your name", position:"right"},
{element:"#InputUsername",intro:"Please fill your username"},
{element:"#button1",intro:"Succesfully Filled, press register."}
];
introJs().setOptions({
steps:steps
}).start();

How to validate the forms on the submit function, if there are input fields has left on each row

I have problem regarding on my module right now. My question is how I can validate all the input fields has left on each row. Ex. let say I have 5 rows on my table, the first row has completed inputs and then on the second row there are input fields has left. How can I detect that this second row has left input fields.?
Currently I'am using react js for my frontend side and laravel for backend.
Question: How I can validate all the input fields has left on each row
Here is my handleSubmit:
handleSubmit = (e) => {
e.preventDefault();
this.state.rows.map((obj, i) => {
let obj_amount = obj.amount;
let obj_bank = obj.bank;
let obj_branch = obj.branch;
let obj_check_date = obj.checkDate;
let obj_check_no = obj.checkNo;
let obj_customer = obj.customer;
let obj_remarks = obj.remarks;
});
}
Here is my sample table:
Thank you for the help.
you should use react-metarial-ui-form-validator : https://www.npmjs.com/package/react-material-ui-form-validator it is the easiest way.
If you want to make this without material-ui; I don't know your all code but you can try to create a new function for check the all fields(it is so hard, material-ui has advanced form-validator inside).

Cucumber Data Table in (Nightwatch) javascript not working as expected

So the problem I'm getting is probably something so, so simple (probably), but it's infuriating my as to why it won't work.
What I'd like to do is click on an Edit button on a website, change a value, and Save it.
However, there are over 120 of these changes to be made, and thus over 120 edit clicks, etc.
Hence why I thought I'd use a Data Table.
And here is my subsequent test code;
const { client } = require('nightwatch-cucumber')
const { defineSupportCode } = require('cucumber')
const globals = require('../../config/globals.js')
var emailEntry = (`input[name='administrator[email]']`)
var passwordEntry = (`input[name='administrator[password]']`)
var existingGtmKey = ("GTM-123456")
var newGtmKey = ("GTM-654321")
var gtmKey = (`//div/input[#value='${existingGtmKey}']`)
var saveButton = (`input[type=submit][value='Save']`)
defineSupportCode(({ Given, Then, When }) => {
Given(/^I've logged into Winit cms$/, () => {
return client
.url('http://winit-stage.bauerpublishing.com/admin/sign_in')
.waitForElementVisible('body', 5000)
// Enter winit email address
.moveToElement(`form#new_administrator ${emailEntry}`, 1,1)
.click(`form#new_administrator ${emailEntry}`)
.setValue(`${emailEntry}`, "*****.*****#*****.co.uk")
// Enter winit password
.moveToElement(`form#new_administrator ${passwordEntry}`, 1,1)
.click(`form#new_administrator ${passwordEntry}`)
.setValue(`${passwordEntry}`, "******")
// Click on the 'Sign in' button
.click("form#new_administrator input[type=submit][value='Sign in']")
})
Then (/^I'm able to change the gtm tag for that site (.*?)$/,
(siteedit) => {
return client
// Click on the 'sites' link
.useXpath()
.click("//a[normalize-space(text())='Sites']")
// Click on Edit button
.click(siteedit)
.click(`${gtmKey}`)
.clearValue(`${gtmKey}`)
// Set new gtm key value
.setValue(`${gtmKey}`, `${newGtmKey}`)
// Click save
.useCss()
.click(`${saveButton}`)
})
})
I thought (wrongly!) this would be pretty straightforward, the script would log into my account, click the edit button, enter new value, press the save key, then do the same for the next website edit button.
It works for the first edit button in the Data table, but then the test fails, giving the following error;
So it looks as though it's running the whole script, and not just the Then part of the script.
But I don't understand why??
Any help would be greatly appreciated.
Many thanks.

How can I hide an element when a user selects an option, navigates away, or selects the same option?

I'm practicing some JQuery and am working on a simple app that asks the user what their favorite food and drink are.
I'm trying to create the app so that the resulting text... "Your favorite food is x, and drink is y", only shows when the user has actually selected their favorite food/drink and when they aren't actively selecting.
My problem is, I can't figure out how to hide the resulting text while the user is selecting the options, in a manner that also has the ability to show the text once the selects are made. I used a change() method which allows me to show the text when they select something new. But what about if the user clicks away, or selects the same option?
Thoughts?
Here's the code...
http://codepen.io/zharriott/pen/oZxvBO?editors=1011
$(document).ready(() => {
/******************
REFERENCES
******************/
const $foodSelector = $('.questions__q1'),
$drinkSelector = $('.questions__q2'),
$dropdownInputs = $('.questions select'),
$foodResultTxt = $('.result__fav-food'),
$drinkResultTxt = $('.result__fav-drink'),
$result = $('.result'),
$resultTxt = $result.text();
/******************/
$dropdownInputs.change(() => {
//IF food/drink has not been selected, leave result hidden
if ( $foodSelector.find(':selected').text() === 'Select an option...' || $drinkSelector.find(':selected').text() === 'Select an option...' ) {}
else {
//Update and show result to display user's current answers
$foodResultTxt.text($foodSelector.find(':selected').text());
$drinkResultTxt.text($drinkSelector.find(':selected').text());
console.log($resultTxt);
$result.show(1400);
}
});
});
Thoughts?
You can consider saving the current value of the input with the focus event and then comparing the selected value after change with both the previous one and the placeholder.
$dropdownInputs.focus(function(){
var oldFoodValue = $foodSelector.find(':selected').text();
var oldDrinkValue = $drinkSelector.find(':selected').text();
}).change(() => {
//IF food/drink has not been selected or is equal to the previous value, leave result hidden
if ( $foodSelector.find(':selected').text() === 'Select an option...' ||
$drinkSelector.find(':selected').text() === 'Select an option...' ||
$foodSelector.find(':selected').text() === oldFoodValue ||
$drinkSelector.find(':selected').text() === oldDrinkValue) {}
else {
//Update and show result to display user's current answers
$foodResultTxt.text($foodSelector.find(':selected').text());
$drinkResultTxt.text($drinkSelector.find(':selected').text());
console.log($resultTxt);
$result.show(1400);
}
});
$foodResultTxt.hide();
and when need to show:
$foodResultTxt.show();

Categories