I need to set #page{margin-top: dynamic value}. The value should be retrieved from an input element of type text. The element is named P1_MARGIN_TOP. Can this be done?
You will need JavaScript to do this.
Here is a simple snippet to set a CSS variable to the value picked up from the input.
You will need to add code to check that the value and the units the user gives are suitable - I would probably do that with two inputs, one of type number and one a select which has just the options you know will work (e.g. 'in', 'cm'...) to avoid the margin being set to something impossible.
const p1MarginTop = document.querySelector('#P1_MARGIN_TOP');
const button = document.querySelector('button');
// NOTE: you will want to check the value of the input to make sure it makes sense in terms of number and units
button.addEventListener('click', function() {
p1MarginTop.style.setProperty('--margintop', p1MarginTop.value);
alert('--margintop has been set to: ' + p1MarginTop.style.getPropertyValue('--margintop'));
});
#page {
margin-top: var(--margintop);
}
<input id="P1_MARGIN_TOP"><button>Submit</button>
Related
So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple
I have a simple textarea and It has a default value. I want to hold this value everytime. User should not remove this value but he can add extra string.
<textarea>This is contstant</textarea>
As you see above. It has a default value. How can I protect this value? But user can add something after default value like below.
<textarea>This is contstant and extra things by user</textarea>
So how can do a partially editable textarea with default value?
You can attach an event handler to the <textarea> that does a simple validation every time it changes. If it tries to change to where your constant is partially destroyed, overwrite the X characters of the string value.
$('#foo').keydown(function () {
if ($(this).val().indexOf("This is constant. ") !== 0) {
var length = "This is constant. ".length;
var current = $(this).val();
var after = current.slice(length);
$(this).val("This is constant. " + after);
}
});
Here is a example on JSFiddle.
I recommend using JQuery for this because <textarea> doesn't actually have a value, or I think even a text attribute that you can check. JQuery just abstracts away <textarea>'s quirks.
I would go this way:
Style the textarea to remove the border.
Put a div on top which contains the constant text.
Wrap both elements in a div to give it a common border.
That way, the constant text will appear as if it was part of the textarea but it's not.
When you submit the form, prepend the static text to the field value.
First, please forgive me, as I know very little about JavaScript, and am trying to make something work without knowing proper terms and syntax. I am working within the CMS called "ViArt." A lot of what is going on is handled by php, and I only have access in ViArt to add JavaScript to an onChange event for a listbox.
Here is what I'm trying to accomplish:
The product is sunglasses. Different frame colors in a listbox 1 are designated by a numerical prefix. There are 30 different lens color options for each frame color, and these lens colors are chosen in listbox 2.
Using my current code, for each frame, I have to go in the JavaScript for each frame and manually enter the numerical prefix designated to that frame.
This is my current, working code in an onChange event:
=================================
var FrameNo = '01';//ENTER FRAME NUMBER
var ImagePath = 'images/GlassesBrand/Rx/GlassesTest/';//ENTER PATH TO IMAGES
var ImageNamePrefix = 'GlassesTest-XL';//ENTER NAMING CONVENTION
// This changes the IMAGE hyperlink to larger image to match user's selection
document.getElementById('blackImg').href=ImagePath + 'Large/' + ImageNamePrefix + '-Frame' + FrameNo + '-Lens' +
this.form.property{form_id}_{property_id}.options[this.form.property{form_id}_{property_id}.selectedIndex].text.substrin g(0,2) + '.jpg';
=================================
The change I want to make, is that I don't want to have to hard-code "FrameNo." I want to call that dynamically within the onChange event, by looking up the selectedIndex of listbox 1.
=============================
In an onChange event for list box 2, named "{property_id}," I am trying to get the selectedIndex of a listbox 1, named "{property_parent_id6385_6773}"
{form_id} value is 6385
{property_id} is listbox 2, and in this example, the value is 6773
{property_parent_id6385_6773} value is 6765, and in this example, this refers to listbox 1
{property_parent_id6385_6773} is named dynamically by a php script or something. For example, on the next form, it may be called {property_parent_id6400_6800}. So I am trying to program the JavaScript to dynamically refer to the property_parent_id####_####, based on whatever form and list box I'm working with.
When I hard-code or semi-hard code it for testing, the following methods work:
this.form.property6385_6765.selectedIndex;
and
this.form.property{form_id}_6765.selectedIndex;
I don't know the syntax, so I thought declaring some things in variables might help me get what I needed.
From my notes:
var FrameBox = [this.form.property_parent_id6385_6773.value]; //WHICH EQUALS "6765"
var FrameNo = 'this.form.property' + {form_id} + '_' + FrameBox + '.selectedIndex';
RESULTS IN:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Framethis.form.property6385_6765.selectedIndex-Lens02.jpg
Whereas, an example of the result I am seeking is:
http://www.companyname.com/images/GlassesBrand/Rx/GlassesTest/Large/GlassesBrand-GlassesTest-XL-Frame1-Lens02.jpg
==============================
In summary, I know what I need, but I don't understand enough of the syntax.
I know this could be better phrased, but this is all new to me. On the bright side, I am now inspired to take a class in JavaScript.
Any help would be greatly appreciated.
This is more of a calculated guess but could be worth a try.
this.form.property_parent_id{form_id}_{property_id}.options[this.form.property_parent_id{form_id}_{property_id}.selectedIndex].text
I'm a little lost and don't know how to continue, after a lot of search I think that I'm not doing correctly it.
My problem is that I've got a offer class model like this one:
class Offer(models.Model):
design_hours = models.IntegerField()
design_price = models.DecimalField(max_digits=10, decimal_places=2)
devel_hours = models.IntegerField()
devel_price = models.DecimalField(max_digits=10, decimal_places=2)
offer_price = models.DecimalField(max_digits=10, decimal_places=2)
Where offer_price is a calculated field (desig_hours * design_price + devel_hours * devel_price), I don't have problems overriding the save method.
class OfferAdmin(VersionAdmin):
list_display = (
'design_hours',
'design_price',
'devel_hours',
'devel_price',
'offer_price')
What I'd like to do is in the add/change form show a not editable field wich auto calculate when changing the design_hours or the design_prices form fields.
I supose that I have to override the change_form.html template but from here I don't know what to do :(
Thanks,
Do you really need to save the offer_price in your database? It could always be recalculated from any model object, since all the required fields are there, and could be saved as a method for your object class.
If you decide that you do need to save this field in your database, then you'll need to add some sort of event logic in javascript to update the calculated value whenever your other inputs change.
You'll need to override your template as you thought. First, print everything out normally and then you can add a disabled tag to the offer_price input field (or better yet, create a new item that's not an input, such as a text field), then at the bottom add this script (assuming jQuery is imported in your template):
// load jQuery
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// when any input in this form changes, call recalculate price
$('#form_name input').on('change', reclaculate_price);
var reclaculate_price = function(){
// whatever your logic is for calculating the offer price
var value = $('#design_hours').val() * $('#design_price').val();
// Add some error checking here to ensure the price is valid
// Set the value to you field
$('#offer_price').val(value);
}
</script>
You'll need to change the id field names to whatever the appropriate fields are in your template.
Make sure the offer price saved in your database is calculated on the server-side because a malicious user could put whatever they wanted in the offer price field by flipping the disabled switch to enabled (see this post) It'd be best to override the ModelForm and exclude the offer_price field. Though hopefully you can trust the users in your admin, so this may not be required.
I am doing some website where I have a login form. I know people can save their usernames and passwords on these in their web browsers.
I need to show / hide a label (<label></label>). if the field is empty then the label has to appear, if there is any value in the field then the label has to hide,
but this doesn't work with the browser autocomplete, is there anyway I can track this?
I tried with:
jQuery.change();
but that doesn't work.
Is there anything I can do about this rather than turning autocomplete off?
The norm here is to use the placeholder attribute on the relevant input element:
<input type="text" placeholder="username">
username will be displayed within the input when there's no text, and hidden otherwise. If you're using this, then you should probably also use something like Modernizr to detect support and create a normal text label otherwise.
You have to manually trigger the change event:
$("#username")
.change(function () {
// do stuff on change (check for default)
})
.trigger("change");
or use some watermark library if you only want to toggle default text (or the placeholder attribute with Modernizr as aviraldg recommends).
This is very simple.
I use this for my site's text fields.
This coding is in Javascript text.
create a <form> with name and id = "comform" (you can change this later; just for reference).
create an <input type = "text" with name and id = "Message" (you can change this later; just for reference).
create a <div> with id = "ifsend" (you can change this later; just for reference).
Also create a variable to store the length in. var numbering (you can change this later; just for reference).
function counter() {
var numbering;
numbering = document.forms["comform"]["Message"].value.length;
if (numbering == 0) {
label();
}
if (numbering != 0) {
document.getElementById('ifsend').innerHTML="";
}
}
function label() {
document.getElementById('ifsend').innerHTML="Your form value is empty";
}