|
I am not sure I understand the question but you can only select one radiobutton in a group. So having selected checkbox A and radiobutton 2, if you then select checkbox B and radiobutton 1, then when the Javascript code processes the checkbox settings, it will only 'see' radiobutton 1 as set.
|
|
|
|
|
Exactly, the javascript function, allows checkbox B to be able to select the radiobattun 1 or 3, since the radiobutton 2 has already been selected in the line of checkbox A, you must also see what happens to the line of checkbox C, if radiobutton 1 or 2 or 3 have been selected, it is the creation of this function that is the problem...
|
|
|
|
|
I still do not fully understand what you are trying to do. You can only have one radiobutton set at any time. As soon as you change it then the previous setting is lost.
|
|
|
|
|
I'm guessing there are three sets of radiobuttons, one for each checkbox.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
|
Probably not the nicest UX, but you can disable the radiobuttons based on the previous element selection.
For example, given the markup:
<ul>
<li>
<label><input type="checkbox" name="a"> A</label>
<ul>
<li><label><input type="radio" name="opta" value="1"> Position 1</label></li>
<li><label><input type="radio" name="opta" value="2"> Position 2</label></li>
<li><label><input type="radio" name="opta" value="3"> Position 3</label></li>
</ul>
</li>
<li>
<label><input type="checkbox" name="b"> B</label>
<ul>
<li><label><input type="radio" name="optb" value="1"> Position 1</label></li>
<li><label><input type="radio" name="optb" value="2"> Position 2</label></li>
<li><label><input type="radio" name="optb" value="3"> Position 3</label></li>
</ul>
</li>
<li>
<label><input type="checkbox" name="a"> C</label>
<ul>
<li><label><input type="radio" name="optc" value="1"> Position 1</label></li>
<li><label><input type="radio" name="optc" value="2"> Position 2</label></li>
<li><label><input type="radio" name="optc" value="3"> Position 3</label></li>
</ul>
</li>
</ul> then the following Javascript will dynamically enable or disable the radiobuttons as you select different options:
let updateOptions = () => document.querySelectorAll("input[type='checkbox']").forEach(chk => {
let li = chk.closest("li");
li.querySelectorAll("input[type='radio']").forEach(rbn => {
if (!chk.checked){
rbn.disabled = true;
rbn.checked = false;
return;
}
let value = rbn.value;
let prevLi = li.previousElementSibling;
while (prevLi !== null){
var prevRbn = prevLi.querySelector(`input[type='radio'][value='${value}']`);
if (prevRbn?.checked){
rbn.disabled = true;
rbn.checked = false;
return;
}
prevLi = prevLi.previousElementSibling;
}
rbn.disabled = false;
});
});
document.querySelectorAll("input[type='checkbox'], input[type='radio']").forEach(el => el.addEventListener("click", updateOptions));
updateOptions(); Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Very much thanks......That’s exactly what I meant..... now I study the parts of Javascript code carefully, again thanks.....
|
|
|
|
|
I want to make this project: https://codepen.io/samuelbeard/pen/Dsdie, to where when you upgrade, it will increment to 0.01 Click Per Second Automatically, instead of 1 click per second. I am pretty sure this has to do with a function, but I am a beginner and cant find anything to change it, and dont have the knowledge. Is there a variable I have to change, or what?
|
|
|
|
|
|
I'm new to JS, hope this will for help. I'll give you a feedback, after completing your Tutorial.
|
|
|
|
|
Sorry, I cannot take the credit for W3Schools.
|
|
|
|
|
I guess I'll leave the feedback there.
|
|
|
|
|
I never wanted the code for the project. Sorry if I was not specific! Accept my sincere apologies for using the wrong forum as well.
modified 4-Feb-21 13:00pm.
|
|
|
|
|
1) We're happy to help if you have specific questions about code you have written, but nobody here is going to do your assignment for you.
2) Nobody is going to visit a link on a dodgy website to see the details of your question. Either post the question details here, or don't post at all.
3) It's not "urgent" to anyone but you. All you're doing by adding "urgent" to your subject line is telling us that you can't manage your own time.
4) You have posted this in the Javascript forum. Despite the similar names, Java and JavaScript are two completely different languages.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Chrome wont autoplay a video embedded with javascript, unless its muted. But i cant figure out how to use code to unmute it.
problem is that i am repurposing code [listed below, and in link]. it embeds video in an iframe. there is no variable to access the mute of that i can see. thus the vid variable below doesn work.
The whole code is at https://codepen.io/richardengle/pen/poNjvpY
Line 33 of the area of JS code is where i would change. you can see the vid muted/unmuted part, but it wont unmute the video. Any advice is welcomed
----- part of code----
$('button#play20s').click( function() {
$('body').removeClass().addClass('on playing20s');
$("#knob").trigger('play');
$("#tune").trigger('play');
$('.video-embed').remove();
$('body').append('<iframe id="decade-20" class="video-embed" width="560" height="315" src="https://www.youtube.com/embed/gTevoUhDeoM?&theme=dark&autoplay=1&keyboard=1&autohide=2&start=10&mute=1" frameborder="0" allowfullscreen ></iframe>');
var vid = document.getElementById("decade-20");
vid.muted =false;
//https://www.youtube.com/embed/gTevoUhDe
|
|
|
|
|
You can't. That's the whole point - the video can only be un-muted if the user interacts with it.
If there was any way to circumvent that, then every dodgy site in the world would have auto-playing un-muted videos shouting their scam messages as soon as you loaded the page.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I am working on an Ember application, I have a following JavaScript Code written to limit the entry of digits after decimal, this function is called in Key-Down event. Its working but what it is doing it, it allowing 3 digits after decimal but when I am posting its value on the Service, that is taking correctly 2 digits after decimal but what it is showing in the Textbox is 3 digits after decimal.
And another request if possible is, can I do the same without using id attribute on the Textbox.
Any help please, thanks in advance.
allowOnly2Decimals: function (e1, event) {
var boxId = '#' + event.path[0].id;
if ((event.keyCode == 190) || (event.keyCode == 110)) {
this.decimalPressed = true;
}
if (this.decimalPressed) {
var t = e1.toString().split('.');
if (t[1] != null) {
if (t[1].length == 2) {
this.limitDecimal = e1;
$(boxId).val(e1);
}
if (t[1].length >= 2) {
e1 = this.limitDecimal;
$(boxId).val(e1);
return false;
}
}
}
}
|
|
|
|
|
No need to use Javascript:
<input type="number" scale="0.01" /> Or:
<input type="text" pattern="^\d+(\.\d{0,2})?$" />
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
But it didn't work Here is what I have put
${{input type="number" id=p.ViolationTypeId value=p.PenaltyAssessed maxlength="5" scale="0.01" pattern="^\d+(\.\d{0,2})?$" focusOut=(action 'saveTotalPenalty' p model.id p.PenaltyAssessed)}}
I tried both individually and by putting both, still it didn't work, is Ember different, I don't know.
|
|
|
|
|
I am not sure, if I could solve this problem within the Javascript code.
As you can see from the example below, I have a @ model which contains data.
In order to use particular parts of the data, I have assigned it to a Json object by using Json.Serialize .The reason I have done so, is that the events:[ ] section accepts data in some specific format, looking like a json kind of format.
As you can see in the events:[ ] section, I have tried to extract data in such a way so that the events:[ ] part of the program accepts it. (and everything works fine like that)
Problem is that, the number of records in json can vary as it pulls data from a database table.
Desired outcome is: A better formulation to introduce neccessary data in the events:[ ] section.
I would be very happy If you could suggest something about it. Thank you.
@ model IEnumerable<WebAppV2.Models.CalendarEvent>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var json = @ Html.Raw(Json.Serialize(@ Model));
var calendar = new FullCalendar.Calendar(calendarEl, {
initialDate: '2021-01-01',
editable: false,
selectable: false,
businessHours: true,
dayMaxEvents: true,
events: [
{
title: json[0].title,
start: json[0].start,
end: json[0].end
},
{
title: json[1].title,
start: json[1].start,
end: json[1].end
},
{
title: json[2].title,
start: json[2].start,
end: json[2].end
},
]
});
calendar.render();
});
</script>
|
|
|
|
|
Try:
var events = @Html.Raw(Json.Serialize(Model.Select(e => new
{
e.title,
e.start,
e.end
})));
var calendar = new FullCalendar.Calendar(calendarEl, {
initialDate: '2021-01-01',
editable: false,
selectable: false,
businessHours: true,
dayMaxEvents: true,
events: events
});
calendar.render();
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
modified 29-Jan-21 8:08am.
|
|
|
|
|
It worked! Thank you.
var events = @Html.Raw(Json.Serialize(@Model.Select(e => new <-------------- @ added in front of Model
{
e.title,
e.start,
e.end
}))); <------- two more closing brackets on this line.
|
|
|
|
|
This project is a port of rails scaffold generate for React. You can learn more about Rail's scaffold generator here. I mainly used it for its MVC (model, view, controller) generator. It abstracted CRUD operations, form generation, form validation, list-detail presentation pages, database migrations, SQL queries through ActiveRecord, and styling all with one command.
This project leverages file templating, dynamic form generation, routing and CRUD state management to apply those concepts to React and supercharge any project by skipping lots of boilerplate setup. Create an entire app in one command.
Check out the full details of the project[[GitHub - DrewWeth/react-scaffold-generate: Scaffold generator for React projects](https://github.com/DrewWeth/react-scaffold-generate)]
|
|
|
|
|
Not the right place to post this. If you want to publish your GitHub project on CodeProject, import it as a project:
Your GitHub Project on CodeProject[^]
NB: It will be subject to the same standards as other articles[^], so make sure your readme.md has enough information about the project first.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi CodeProject friends,
Probably my question is too broad, but what do you think is the best way to trace and solve
JavaScript conflicts?
Cheers,
modified 11-Jan-21 3:14am.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
