How can I prevent some script on the page from affecting the style and creating new divs within my code?
For example, I'm currently creating code like this:
<div class="group-checkbox">
<label for="Hot">
<div>Enabled</div>
<input id="Hot" name="Hot" type="checkbox" {Hot}>
</label>
</div>
But when the page is executed, there is some script that is adding other divs when there is a checkbox on the page.
So the result inside my class class="group-checkbox" looks like below:
<div class="group-checkbox">
<label for="Enabled">
<div>Enabled</div>
<div class="section">
<label class="field switch switch-round switch-primary small">
<input id="Hot-16738839498762826" name="Enabled" type="checkbox" undefined="" data-form-initialized="true">
<label for="Hot-16738839498762826" data-on="" data-off=""></label>
</label>
</div>
</label>
</div>
I don't want these custom styles, and I would like to prevent it from adding these additional divs, when there is a checkbox on the page inside my class='group-checkbox'
Is there any way to prevent this? (Additional info, I don't have access to the imported .js files so I can't remove it, but I can add some code to prevent it from doing so)
Thanks
Would suggest creating your element after the page is loaded with javascript itself. if there is jQuery, then try it like
replace your checkbox html with
<div id="checkbox-container-div"></div>
and add it to your checkbox from jquery like this
jQuery('document').ready(function(){
jQuery('#checkbox-container-div').html('<div class="group-checkbox"><label for="Hot"><div>Enabled</div><input id="Hot" name="Hot" type="checkbox" {Hot}></label></div>');
});
Hope it works
Related
I have this code from the browser console that is coming from Javascript of datatables plugin (All codes are shortened):
<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
"نتائج"
</label>
</div>
and underneath of this code I have this code (All codes are shortened):
<div id="mytable_filter" class="dataTables_filter">
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
</label>
</div>
This is a picture taken from the browser console just to make things clear
https://i.stack.imgur.com/UeLz9.png
Now I need to remove the parent tag <div id="mytable_filter" class="dataTables_filter">
and take/move the child tags with elements label and input and add them to/underneath <div class="dataTables_length" id="mytable_length"> using jQuery. So the final code will be:
<div class="dataTables_length" id="mytable_length">
<label>
"عرض "
<select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select>
"نتائج"
</label>
<label>
"بحث: "
<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable">
</label>
</div>
using jQuery, what I did so far is:
$(document).ready(function(){
$('#mytable').DataTable({
initComplete: function () {
$('.dataTables_filter').remove();
},
});
});
but this will only remove <div id="mytable_filter" class="dataTables_filter"> with its child tags, and that's not what I need. How can I do this?
I need to remove the parent tag <div id="mytable_filter" class="dataTables_filter"> and take/move the child tags with elements label and input and add them to/underneath <div class="dataTables_length" id="mytable_length">
Appending nodes to a given container is a basic operation in jQuery. Select the nodes, use .appendTo(), done.
$(function () {
$('#mytable').DataTable({
initComplete: function () {
$('.dataTables_filter').children().appendTo('#mytable_length');
$('.dataTables_filter').remove();
},
});
});
A DOM node can only have one parent. If you append it to a different parent, it will effectively be removed from its current parent.
I have the following markup in HTML:
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row template">
<input class="add-monthly">
</div>
</div>
And I want to add all inputs with class 'add-monthly' inside each sub-rf-row (excluding template sub-rf-rows) to the 'sum-monthly' inside rf-row (it's parent).
I want to calculate the sum values before user input (on document.ready). As well as dynamically update it on a 'keyup' event on one of the add-monthly inputs.
How can I best do this in jQuery?
You can do something like this...
$(document).ready(function()
{
updateValues()
$('.sub-rf-row').keyup(updateValues);
});
function updateValues()
{
var sum=0;
$('.sub-rf-row:not(.template) input').each(function(){
sum+=parseInt($(this).val()=='' ? 0 : $(this).val());
});
$('.sum-monthly').val(sum);
}
https://jsfiddle.net/rt42fz9q/13/
In order to acheive your goal, you need to reference the desired input fields, iterate through them and calculate their sum, finally place that sum in the .add-monthly field. But you nedd to watch out for the non-numeric values that may be present in some fields, so, in the sumUpdate function below I only add the input field's value to the sum only if that value is a valid number, also decimal numbers are allowed.
Here's a snippet to illustrate all what being said:
$(function(){
var sumInput = $('.rf-row input.sum-monthly'),
/* the 'sumInput' variable is the input field that will display the sum of the other inputs */
inputs = $('.sub-rf-row:not(.template) input.add-monthly');
/* the 'inputs' variable is an array containing the input fields with the class '.add-monthly' that are under '.sub-rf-row' element which doesn't have a '.template' class */
// Call the updateSum function to calculate the sum directly after the document has loaded.
updateSum();
// Adding KeyUp event listener to the inputs
inputs.on('keyup', updateSum);
// Implementation of the updateSum function that will calcule the sum of the input fields.
function updateSum() {
sum = 0;
inputs.each(function() {
var val = +$(this).val(); // Notice the plus sign in front of $(this).val() with we cast the input value to an integer, the val variable could contain of value of NaN if the input value can't be casted to an input(in other words if the input value contains non-numeric characters). With that we also allow decimal numbers.
sum += (val.toString() != 'NaN') ? val:0; // We only add valid numbers, otherwise we add 0 to the sum variable.
});
sumInput.val(sum.toFixed(2).replace('.00', '')); // Assign the sum variable's value to the sumInput, allowing precision to only 2 decimal digits, and also stripping '.00' from the sum variable if it contains a natural number(like 2.00 => 2, 10.00 => 10, but any decimal number will remain the same: 2.8 => 2.80, 12.97 => 12.97).
}
});
<!-- I added some values for the input fields with '.add-monthly' class just to show that the 'updateSum' function executes when the document is loaded -->
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly" value="2.4">
</div>
<div class="sub-rf-row">
<input class="add-monthly" value="8.2">
</div>
<div class="sub-rf-row template">
<input class="add-monthly">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Ps: I added some helpful comments to the code above, try to read them as they may help you.
Hope I pushed you further.
This may help yours
<!DOCTYPE html>
<html>
<head>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row template">
<input class="add-monthly" value="5">
</div>
</div>
<script>
$(document).ready(function(){
var value = 0;
$('.count-container .sub-rf-row').each(function(){
value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
})
$('.sum-monthly').val(value);
});
</script>
</body>
</html>
https://codepen.io/anon/pen/gdpZpR?editors=1010
I need a content filtering system for my website. By checking and unchecking of a checkbox, the according elements should be shown or hidden.
<form>
<p><input type="checkbox" checked="checked"><label>Plants</label></p>
<p><input type="checkbox" checked="checked"><label>Animals</label></p>
<p><input type="checkbox" checked="checked"><label>Humans</label></p>
</form>
The checkboxes above should toggle the visibility of the divs below with the according class, by changing display:block; to display:none;
<div class="Plants" style="display:block">
<p>Grass</p>
<div>
<div class="Humans" style="display:block">
<p>John</p>
<div>
<div class="Plants" style="display:block">
<p>Flower</p>
<div>
<div class="Animals" style="display:block">
<p>Lion</p>
<div>
For example:
By uchecking the Plants checkbox, the divs with Grass and Flower should be hidden.
What would be the most elegant way to accomplish that in php or javascript?
According to your HTML structure you may use:
change event
:checkbox selector
toggle(boolean)
next
As reported in the comment:
In your PHP file you have to include the jQuery library. The line you have to include is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In order to add to your PHP file the jQuery function you have to add a <script> tag and inside it you must copy the jQuery function.
It is not necessary to change the reaming part of your PHP file.
The snippet:
//
// When the document is Ready
//
$(function () {
//
// when you click a checkbox
//
$(':checkbox').on('change', function(e) {
var divClass = $(this).next().text();
$('.' + divClass).toggle(this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input type="checkbox" checked="checked"><label>Plants</label></p>
<p><input type="checkbox" checked="checked"><label>Animals</label></p>
<p><input type="checkbox" checked="checked"><label>Humans</label></p>
</form>
<div class="Plants" style="display:block">
<p>Grass</p>
</div>
<div class="Humans" style="display:block">
<p>John</p>
</div>
<div class="Plants" style="display:block">
<p>Flowesr</p>
</div>
<div class="Animals" style="display:block">
<p>Lion</p>
</div>
I have some html like this :
<p>a. Is there a skin and/or scar condition?
<br>
<input id="ucWSDBQ_CheckBox3" type="checkbox" name="ucWSDBQ$CheckBox3">
<label for="ucWSDBQ_CheckBox3"></label>Yes
<input id="ucWSDBQ_CheckBox5" type="checkbox" name="ucWSDBQ$CheckBox5">
<label for="ucWSDBQ_CheckBox5"></label>No
<br> If yes, check all that apply and complete the corresponding DBQ(s):
<br>
<input id="ucWSDBQ_CheckBox6" type="checkbox" name="ucWSDBQ$CheckBox6">
<label for="ucWSDBQ_CheckBox6"></label> <b>Skin Diseases DBQ<br> </b>
<input id="ucWSDBQ_CheckBox7" type="checkbox" name="ucWSDBQ$CheckBox7">
<label for="ucWSDBQ_CheckBox7"></label> <b> Scars DBQ</b>
</p>
I want to hide the text If yes, check all that apply and complete the corresponding when user clicks No, and show the text when user clicks Yes. I have tried different things but didn't work.
Fiddle
Look at this fiddle and see if it's what you're after.
$('form').on('click', function() {
if($('#ucWSDBQ_CheckBox3').is(':checked')) {
$('.hidden').css('display', 'block');
} else {
$('.hidden').css('display', 'none');
}
});
I've added a form and a wrapper-div to your HTML.
http://jsfiddle.net/yUu6q/10/
Handle the onClick event of the checkbox. In that you will have to write code for whatever you want to achieve
I'm attempting to get the Website URL field on this page to display only when the previous question has the radio button "Yes" selected. I've searched and tried a few code examples, but they aren't working. Does anyone have any suggestions for me?
Thanks in advance!
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No"> No</label></div>
</div>
</div>
<div class="editfield">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
I noticed that you initally put the javascript I gave you at the top of the page. If you are going to do this then you need to encapsulate the code in a jquery $(document).ready(function(){ });. You only need to use a document ready when your html follows after the javascript.
$(function() {
// place code here
});
However, in this scenario I have created another alternative that will be better, but do not forget that you have to initially set the web url div as hidden. Also, I highly recommend that you set better control ids; it will make your javascript easier to understand.
$('input[name=field_8]').on("click", function(){
var $div_WebUrl = $('#field_19').closest('.editfield');
if($('input[name=field_8]').index(this) == 0)
$div_WebUrl.show();
else
$div_WebUrl.hide();
});
Live DEMO
I have created a little example:
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes" onclick="document.getElementById('divUrl').style.display='block'"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No" onclick="document.getElementById('divUrl').style.display='none'"> No</label></div>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
jsFiddle: http://jsfiddle.net/EQkzE/
Note: I have updated the div to include a style, cause I do not know what your css class looks like. Good luck.
Here's a pure JS Solution:
document.getElementById("field_19").parentNode.style.display = "none";
document.getElementById("option_9").onclick = toggleURLInput;
document.getElementById("option_10").onclick = toggleURLInput;
function toggleURLInput(){
document.getElementById("field_19").parentNode.style.display = (document.getElementById("option_9").checked)? "block" : "none";
}
Not a very dynamic solution, but it works.
Something like this will bind the click event to a simple function to look at the radio button and show the other div.
$('#option_9').on('click', function() {
if ($('#option_9').is(':checked')) {
$('#field_19').closest('.editfield').show();
} else {
$('#field_19').closest('.editfield').hide();
}
});
Run sample code