Develop Reference

I can't get past the js div hiding problem

I want to hide the divi when I click the button and open it when I click it again. But I couldn't run the normally working code, what could be the reason?
The js code works when there is only one div, but it does not work due to this code I wrote, but I can't solve the problem.
Razor Page
#for (int i = 0; i < Model.quest.Count; i++)
{
<div class="row mt-12" >
<div class="col-md-1">
<input type="checkbox" id="questcb" asp-for="#Model.quest[i].check">
<span>#(i + 1) Soru</span>
</div>
<div class="col-md-9">
<textarea class="form-control" asp-for=#Model.quest[i].Question rows="3" id="question" hidden></textarea>
<label>#Model.quest[i].Question</label>
</div>
</div>
<div class="row mt-12">
<div class="col-md-1" hidden>
<button class="btn btn-outline-secondary" type="button" id="A" onclick="clickFunc(this.id)">A</button>
</div>
<div class="col-md-1" >
A)
</div>
<div class="col-md-11" hidden="hidden">
<input type="text" asp-for=#Model.quest[i].Answer1 class="form-control" placeholder="" id="answer"
aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="col-md-11" id="Amod_#i" style="display:inline-block">
#Model.quest[i].Answer1
</div>
<div class="col-md-2">
<button class="btn btn-primary" type="button" id="mod_#i" onclick="question(this.id)">Cevapları Görüntüle</button>
</div>
</div>
}
js code
let question = button => {
let element = document.getElementById(`A${button}`);
let buttonDOM = document.getElementById(`${button}`)
let hidden = element.getAttribute("hidden");
if (hidden) {
element.removeAttribute("hidden");
buttonDOM.innerText = "Cevapları Gizle";
}
else {
element.setAttribute("hidden", "hidden");
buttonDOM.innerText = "Cevapları Görüntüle";
}
}
</script>

If the id of div is unique in your code,your js should work.If it still doesn't work,you can try to find the div with the position of the button:
let question = button => {
let element = $("#" + button).parent().siblings(".col-md-11")[1];
let buttonDOM = document.getElementById(`${button}`);
if (element.hidden) {
element.removeAttribute("hidden");
buttonDOM.innerText = "Cevapları Gizle";
}
else {
element.setAttribute("hidden", "hidden");
buttonDOM.innerText = "Cevapları Görüntüle";
}
}
result:

How to use screenshot api?

I am practicing to capture screenshot of webpage by using api.
I want to change the img src, on the button click.
Code is as follows:
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url"
id="input" value="" />
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
<button onclick="changeimg()">Capture</button>
</section>
And this is JavaScript:
<script type="text/javascript" charset="utf-8">
var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>

You should get the input value inside the function and the img id is sh not screenshot
Now it's work
const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url" id="input" value="" />
<button onclick="changeimg()">Capture</button>
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
</section>

How can I validate multiple grouped inputs?

I've this structure here:
<div>
<div class="row">
<input id="1a">
<input id="1b">
</div>
<div class="row">
<input id="2a">
<input id="2b">
</div>
<div class="row">
<input id="3a">
<input id="3b">
</div>
<div class="row">
<input id="4a">
<input id="4b">
</div>
</div>
If the user leaves everything empty, there is no problem. But when he enters for example something into 1a and leaves 1b empty, this should cause an error. So how can I find out if a & b is filled for each row? It's a bit tricky and I have no idea how to deal with this.

You can achieve it in this simple way
$('button').on("click", () => {
$('body').find(".row").each(function(index, row){
var count = 0;
$(row).find("input").each(function(i, input) {
if($(input).val() !== "")
count++;
})
if(count === 1)
alert("Row " + (index + 1) + " is invalid");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<input id="1a">
<input id="1b">
</div>
<div class="row">
<input id="2a">
<input id="2b">
</div>
<div class="row">
<input id="3a">
<input id="3b">
</div>
<div class="row">
<input id="4a">
<input id="4b">
</div>
</div>
<button>Check</button>

something like that ?
const inRow = document.querySelectorAll('.row')
, valida = document.querySelector('button')
, respon = document.querySelector('output')
;
valida.onclick =_=>
{
let OK = true
inRow.forEach(eR=>
{
let vals = 0
eR.querySelectorAll('input').forEach(eI=>{ vals+=eI.value.length ? 1:0 })
if (vals===1) OK=false
})
respon.value = OK ? 'OK' : 'bad'
}
<div>
<div class="row"> <input id="1a"> <input id="1b"> </div>
<div class="row"> <input id="2a"> <input id="2b"> </div>
<div class="row"> <input id="3a"> <input id="3b"> </div>
<div class="row"> <input id="4a"> <input id="4b"> </div>
</div>
<button>validate</button> <output></output>

Normally multiple form controls (ex <input>, <textarea>, <select>, etc) should be inside a <form> tag. Moreover, the behavior described is called form validation which requires said <form> tag to be triggered by a "submit" event.
The following demo features proper HTML
<form> and <fieldset> instead of <div>
added <output> for each <fieldset>
Also the JavaScript is designed to show a message when any pair of <input> has a .value and the other doesn't.
The message: <output>Complete data input</output>
This pseudo-form validation is triggered whenever a user enters data within an <input> and then clicks (aka "blur" event). This entire chain of actions combined is the "change" event.
The <form> tag is registered to the "change" event so if any of the <input> within the <form> is the event origin (aka event.target - the <input> that the user triggers a "change" event on).
const form = document.forms[0];
form.onchange = reqData;
function reqData(event) {
let origin = event.target;
if (origin.tagName === 'INPUT') {
const parent = origin.parentElement;
const output = parent.querySelector('output');
const inputs = [...parent.querySelectorAll('input')];
let total = inputs.length;
let count = 0;
for (let input of inputs) {
if (input.value) {
count++;
}
}
if (count < total && count > 0) {
output.style.opacity = '1';
} else {
output.style.opacity = '0';
}
}
return false;
}
output {
opacity: 0;
color: tomato
}
<form>
<fieldset>
<input><br>
<input> <output>Complete data input</output>
</fieldset>
<fieldset>
<input><br>
<input> <output>Complete data input</output>
</fieldset>
<fieldset>
<input><br>
<input> <output>Complete data input</output>
</fieldset>
<fieldset>
<input><br>
<input> <output>Complete data input</output>
</fieldset>
</form>

How do I get a <div> on a nearby node in the DOM?

I'm trying to write some JavaScript that could be used throughout my app, and allow a checkbox to show/hide a nearby element.
If I have these elements:
<div class="optionable" style="display: block;">
<div class="row">
<div class="col-md-2">
<input checked="checked" class="form-control"
data-val="true" id="IsActive"
name="IsActive"
onclick="CheckboxOptionsToggle(this);"
type="checkbox" value="true">
</div>
<div class="col-md-8">
Chapter
</div>
</div>
<div class="row options">
<div class="col-md-12">
Some data here...
</div>
</div>
</div>
And this script:
CheckboxOptionsToggle = function (thisCheckbox) {
debugger;
var optionElement = $('.options');
if (thisCheckbox.checked) {
$(thisCheckbox).closest(optionElement).show();
} else {
$(thisCheckbox).closest(optionElement).hide();
}
}
But this isn't working. I would like the checkbox with the onclick="CheckboxOptionsToggle(this);" to trigger the options element in the same optionable div to either show or hide.
What am I doing wrong in my JavaScript/jQuery?
UPDATE: This is my final solution:
$('.optionToggle').on('change', function () {
$(this).closest('.optionable').find('.options').toggle(this.checked);
});
$(document).ready(function () {
var toggleElements = document.body.getElementsByClassName('optionToggle');
for (var i = 0; i < toggleElements.length; i++) {
var thisCheck = $(toggleElements[i]);
thisCheck.closest('.optionable').find('.options').toggle(thisCheck.prop('checked'));
}
});
<div class="optionable" style="display: block;">
<div class="row">
<div class="col-md-2">
<input checked="checked" class="form-control optionToggle"
data-val="true" id="IsActive"
name="IsActive"
type="checkbox" value="true">
</div>
<div class="col-md-8">
Chapter
</div>
</div>
<div class="row options">
<div class="col-md-12">
Some data here...
</div>
</div>
</div>

Be more generic, and stop using inline event handlers
$('[type="checkbox"]').on('change', function() { // or use class to not attach to all
$(this).closest('.optionable').find('.options').toggle(this.checked);
}).trigger('change');
FIDDLE

You can change it like
CheckboxOptionsToggle = function (thisCheckbox) {
debugger;
var optionElement = $('.options');
if (thisCheckbox.checked) {
$(thisCheckbox)..closest('div.optionable').find(optionElement).show();
} else {
$(thisCheckbox)..closest('div.optionable').find(optionElement).hide();
}
}

I would stay away from .closes, because it is so specific, instead I would go with more reusable code like so:
HTML:
<input type="checkbox" id="toggler" data-target-class="some-div" class="toggler" value="myValue" checked> Toggle Me
<div class="some-div">
Some Text within the div.
</div>
JS:
$('#toggler').on('click', function() {
var targetClass = $(this).data('target-class');
$('.' + targetClass).toggle($(this).checked);
});
JSFiddler: https://jsfiddle.net/ro17nvbL/
I am using data element on the checkbox to specifiy which divs to show or hide. This allows me to not only hide/show divs but anything n the page, and not only one instance but as many as needed. Way more flexible - still does the same job.

iterate through a radio buttons group and get their labels

i want to iterate through a group of radio buttons generated dynamically and get their labels, but when i attempt to print their values nothing appears, see this script demo for an example http://jsfiddle.net/HaBhk/20/ and here's my html where the generated buttons will go
<div data-role="content">
<div data-role="collapsible" data-inset="true">
<h1>AddVote</h1>
<div data-role="fieldcontain" >
<input type="text" name="name" id="question" value="" /><br>
<div data-role="controlgroup" data-type="horizontal" >
<label for="name"><a href="" id="AddButton" data-role="button"
data-icon="plus">Add</a><a href="" id="RemoveButton" data-role="button"
data- icon="delete">Delete</a>
</label>
<input type="text" name="option" id="option" value="" /><br>
</div>
<div data-role="fieldcontain">
<form name="OptionsForm" id="InputForm" method="get">
<div id="after" data-role="controlgroup">
/////Generated radio buttons goes here
</div>
</form>
</div>
<a href="#approve" id="publishButton" data-role="button"
data-inline="true"data-transition="flip">Preview</a>
</div><!-- /content -->
below is my script to get radio buttons values:
$('#publishButton').click(function(){
var result
var y=document.getElementById('question').value
var form='<Question value=' + y + '/>'+'<br>'
alert(form);
$('input:radio').each(function() {
var value=$('input:radio').val()
'<option value='+value + '/>'+'<br>'
alert(result);
});

Here is some sample code that will return the relevant labels for the radio options.
var labels = [];
$('input:radio').each(function(){
labels.push($('label[for='+$(this).attr('id')+']').text());
});
alert(labels);

$('#publish').click(function () {
var labs = $(':radio + label'),
alertString =[];
for (var i = 0, labLen = labs.length; i < labLen; i += 1) {
alertString[i] = labs[i].id;
};
alert(alertString.join("\n"));
});

Try this: http://jsfiddle.net/HaBhk/24/
<input type="text" name="option" id="option" value="" /><br>
<div id="AddButton" data-role="button" data-inline="true">Add</div>
<div id="RemoveButton" data-role="button" data-inline="true">remove</div>
<div id="publishButton" data-role="button" data-inline="true">publish</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup"><legend>Choose an Option:</legend><br><br>
<div id="after">
</div>
</fieldset>
</div>
<script type="text/javascript">
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<div><input type="radio" name="option1" id="'+id+ '" value="1"/><label for="' + id + '">'+label + '</label></div>'));
}
$('#AddButton').click(function() {
var x = document.getElementById('option').value;
createRadioElement(this, $('#option').val());
});
$('#RemoveButton').click(function() {
$('#after').children().children("input[checked='checked']").parent().remove();
});
$('#publishButton').click(function() {
var result;
$('#after input:radio').each(function() { // only radio buttons in #after
var value = $(this).next('label').html();
alert(value);
});
});
</script>