I have a field "comment" in my site and I want to make it editable. To do that, I use an input field and with a javascript function it is saved in my database. However sometimes a comment has already been saved and I want to display it the user but it only displays the first word, it means Nothing is dispayed after the first space even if there is no problem in the database.
<input id ="comment"
class="w3-col round subsection-overview w3-hover-shadow"
data-url="{{ request.path }}"
onKeyPress="saveComment('data-url',this, '{{object.pk}}')"
value ={{object.comment | default:''}} >
</input>
Below the input field, there is the real value of the comment
image
You are missing quotes around your value attribute:
value="{{object.comment | default:''}}" >
Also, the default should not be necessary:
value="{{object.comment}}" >
Related
I am trying to pre-populate a time field on an input form, and I'm getting the field from a database. I was successful in finding how to do this with the date field by putting this in my value attribute:
"value="{{shipment.pickup_date|date:'Y-m-d'}}">"
Is there a similar conversion I can make with a time value? I've tried "HH:mm:ss", "H:m:s", to no avail. I can see in via the Chrome Elements tab that the value is getting passed properly, it's just not getting displayed in the field.
You can provide a value to the input tag in your template by passing the shipment's pickup_date value to the time filter with the right format. Providing the right format is key here, since the additional a.m. in your current value is not accepted. As a result, type="time" expects something like H:M; where H is the hour in double digits, and M is the minutes in double digits, as well. This means that you should change your code to the following:
<div class="">
<input type="time" name="pickup_time" value="{{ shipment.pickup_date|time:'H:i' }}">
</div>
Here, H:i is the format that converts your time value to something like H:M.
In this scenario the input field is limited to 5 Characters for the user to enter, once the user enters the 5 characters I append programatically a kind of description for the input to it (USER-Description).
Since the actual input will be the users input i want that to be limited to 5 but I should be able to programatically add a string of any length. When I do this currently the input field stays Red as if the required flag is on.
I think below points may help
You can add a empty box and maxLength Validation on (focus). and on (blur) remove the validation and apeend extra text.
or
you can do via css Trick, make a input group box. (input + div). (search input-group bootstrap for more info).
Have input a validation of 5 charter in input box and on focus and blur play with your append logic.
point 1 code will look something like this
<input type="text"
(focus)="firstName.maxLength = 5"
(blur)="appendString()"
name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />
What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.
Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.
Actually setting the form field seems bad because it makes it less obvious you can change it yourself.
I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.
Cheers
The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.
Labels on inputs are read once you focus the related input.
For this reason we can generate labels "on the fly" to contain whatever we want.
As such the best option here would be to generate the label on blur of the first input that the second input depends on.
Within the label we add the instructions that explain why this input is already filled in.
We then auto populate the second input based on the input of the first.
In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.
I also remove the explanation in parenthesis if the user has changed the second input value.
$('#iUsername, #iUserURL').on('blur', function(){
var ElUserName = $('#iUsername');
var ElUserURL = $('#iUserURL');
if(ElUserURL.val() == ""){
ElUserURL.val(ElUserName.val() + "URL");
$('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
}else if(ElUserURL.val() != ElUserName.val() + "URL"){
$('label[for="iUserURL"]').text("user url");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />
Very easy question but too much confused about whats the scope of input type='number' field.
Actually working on forms found error during validation of the form.
<input type="number" placeholder="Demo Number Field" class="form-control" [(ngModel)]="demoNumber">
{{demoNumber}}
<input type="text" placeholder="Demo Text Field" class="form-control" [(ngModel)]="demoText">
{{demoText}}
When I load the page for the first time these input fields have values of null but whenever I fill those fields once and then delete all contents from both fields, the value of Textfield is null but the value of numberfield remains NAN instead of null. Why is this so? Due to this, the form is valid even if number field is empty (after removing content) which is wrong. How can I fix this?
One more thing - why does numberfield accept some characters like e but not all characters like d,f,r, etc.?
here is plnkr which i have used for demo purpose
Plunker code
PS :- Is there any way to restrict user not to allow e or something else in the number field ?
Edit:: chrome accepts e, firefox also accepts e. because e can exist in the form of 1.1e+10.
However firefox does't allow e if its in invalid formats like, e or 1e etc. Firefox allows if its in valid format like 1.1e+10.
Original answer:
After the edit and making the text box empty, scope of text field is set to empty string, not null.
Same way, scope of number field is set to empty string. When you try to render it, you will get NaN.
For your second question, I have tried in firefox and it is not accepting any characters like e, f, r etc. They are being shown in red color.
I'm having a problem with a template: I'm trying to display a form for changing a value, in which the user enters the current value in a textarea and the old value is kept inside a hidden field for auditing purposes. This value is generally some HTML, and when I render the page this HTML in the hidden field seems to get partially rendered: the value attribute of my hidden field gets closed by the first quotation marks inside the entered HTML, and the rest of the HTML spews out onto my page. I've tried using the escape decorator but that hasn't changed anything.
Firstly, a better solution might be to keep the audit value in a separate model field defined with editable=False. You can still perform checks against the value in a form's clean method:
def clean(self):
cleaned_data = super(SomeForm, self).clean()
if instance.the_audit_field == cleaned_data['the_editable_field']:
...raise a validation error?
You can also modify the value of the audit field from within the model's save method.
Secondly, assuming you must do it the way you are now, let me address the non-escaped value in your template. I assume you're using something like the following:
<textarea value="{{ form.the_audit_field.value }}"></textarea>
You should instead use the following:
<textarea>{{ form.the_audit_field.value }}</textarea>
Note, the value goes inside the textarea, instead of in the value attribute of it.
An even better way to do it is to simply allow Django to render the field for you like the following:
{{ form.the_audit_field }}