This is my form input field (without classes and such):
<input id="input_partnerID" type="value" name="partner_id" value=""/>
I want to set the input value to the contact id of the logged in user. I can get that value with this Qweb code:
<p id="value_parterID" t-esc="user_id.partner_id.id"/>
And to get that value in my input form I use this javascript. The method is called when the "accept terms and conditions" button is clicked.
function getID() {
document.getElementById("input_partnerID").value = document.getElementById("value_parterID").innerHTML;
}
This works but probably isn't the most efficient way to do this.
How can I use Qweb to fill in the input value in 1 or 2 lines preferably without javascript?
You can set the attribute value using t-att-value="".
So in my case I should use this input field:
<input type="value" name="partner_id" t-att-value="user_id.partner_id.id"/>
Which does the same as the given example with the <p> and javascript.
Related
How to add a placeholder in the input field by javascript using the field's ID? The form fields are made with a plguin (Wordpress) and I am not getting that folder/file where the code located. SO, can someone help me input placeholder on login fields by JS or JQ?
I hope this is what you are looking for:
const myInput = document.querySelector('#someInputId');
myInput.placeholder = 'Some placeholder';
<input id="someInputId" />
i am using an HTML5 input field on a get form to implement search on my site:
<input type="search" name="q" placeholder="search" value="">
everything works, but after the first search the search string the user entered is not saved in the search field, rather the placeholder attribute value is displayed again.
after the first search i would like to have the search string the user entered displayed in the search field on the form.
that means that value attribute of the input field needs to be "" before the first search (so that the placeholder attribute value will display) and then dynamically updated after the first search.
I understand from the Mozilla documentation on <input type="search">
that the value the user entered is stored in the DOMstring "searchTerms = mySearch.value;" but my programming skills and experience are limited.
i am not using php, thank-you in advance.
Try adding this event.preventDefault(); on your function, with that your event will be canceled but the propagation of it won't. If you want to learn more about it, here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
solved the problem with:
DOMContentLoaded to trigger the javascript
(https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)
URLSearchParams and URLSearchParams.get() to get query string
(https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
(https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get)
getElementById to set value in input field
(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
it is a common question-
(How can I get query string values in JavaScript?)
<input type="search" name="q" placeholder="search" id=mySearch required value="">
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
let params = new URLSearchParams(document.location.search.substring(1));
let qstring = params.get("q"); // is the string for the query
document.getElementById("mySearch").value = qstring;
});
</script>
J'm trying to pass some data from javascript to #ENV in hidden input value, in CVT form.
In the form i have some radio inputs which are working fine and one hidden input to get the leaflet coordinates stored in js variable.
My input looks lick that:
<input value='#ENV{localisation, #GET{coord}} 'name="localisation" type="hidden"></input>
and my code:
[(#SET{coord, JSON.stringify(latlng_tab)})];
In the
console.log (#ENV{localisation, #GET{coord}})
I can see the coordinates but it doesn't work in input.
Can someone help me, please.
In case someone will be looking for an answer.
I had to remove #GET from input and #SET from the code and instead i'm using that:
<input id="localisation" value='' name="localisation" type="hidden">
</input>
var latlng_str = document.getElementById("localisation");
latlng_str.value = JSON.stringify(latlng_tab);
<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.
.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');
Here's a pure javascript solution:
document.getElementById('keyword').value = '';
Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.
Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";
I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.
So firstly, I have a JSON object (called fields):
[
{"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
{"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]
The object key type is the input type for a form. See below:
<p ng-repeat="field in fields">
{{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>
Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.
If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.
If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.
Why won't it let me set an input type as a file dynamically?
Topic if changing type property if <input> element is hot topic.
Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).
Here you can read some discussion about possibility to change type:
change type of input field with jQuery
Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371
If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.