How to send data into span instead of input using this.$emit - javascript

With VueJS current I am calculating my data and passing it through my HTML and use it there but the only way for now I know is this for example:
this.$emit('input', this.finalPrice)
And in my HTML like this:
<input type="number" v-model="finalPrice" disabled />
Now I want to know if it is possible to send data into a <span> or <div> or anything instead of input I tried to change the <input> name to and use the v-model for span but no luck with it.

Related

how to getvalue of textarea in react?

I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize
Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.
You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`

How to set value of form input field?

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.

Change input value using javascript in a form built with Aura

I have an input in a form built with aura (Salesforce JS framework):
<input class=" input uiInput uiInputText uiInput--default uiInput--input" type="text" aria-describedby="5284:0" placeholder="" id="7:4790;a" data-aura-rendered-by="17:4790;a" data-aura-class="uiInput uiInputText uiInput--default uiInput--input" data-interactive-lib-uid="54" aria-required="true">
I need to change the value of this input using javascript.
However, when doing:
document.getElementById("7:4790;a").value = "random value";
Visually, it changes the value in the input, but it is not taken into account when saving as if I didn't change anything.
How can I achieve this ?
Do I need to trigger a specific event so that aura takes notice of the new data ?
You need to create an attribute of string type.
<aura:attribute name="myInputValue" type="String" />
Pass the attribute to the value property of the input tag.
<input .... value="{! v.myInputValue}" />
Now, whenever you want to change the value in the input, you can simply do this from your javascript function:
component.set('v.myInputValue, "My new String" />
Important Note: Salesforce frameworks don't allow DOM level manipulation due to a security architecture called Locker service. It is not advisable to follow DOM level Manipulation. Instead, follow the state-based approach like above.

Change form input data-bind value

I have a form in Laravel using Knockout.js, the input data-bind gets the last data from mysql. Everything works fine but a simple textfield to write in some values for the data is not what I want and a multiselect is not working for me.
I've searched for something to add values to this textfield and I've found the TextExt plugin. Now I can add some values like on this site the Tags field and save them.
In TextExt JS I can set the tagged values on page startup with
tagsItems: {{ $title->language }},
title->language get the Data from mysql and shows it as tags, but now I have the tagged values on startup and the data-bind value with the same data only as text and I need to delete them first before I can edit it.
Is there a way to hide the value from the data-bind or clear it on startup? Here is the form code I'm using
<input type="text" id="language" class="text-core" data-bind="value: app.models.title.language, valueUpdate: 'keyup' " placeholder="Language">
**edit** this is the working form
{{ Form::label('language', trans('dash.language')) }}
{{ Form::text('language', Input::old('language'), array('class' => 'text-core')) }}
When I delete the data-bind value I can't update the data.
I found something to clear the textfield on focus, but I want the tagged values on start because the data-bind value is only shown as text.
Have you some ideas how to do this?

change value of h:outputtext using jquery

i have one component OutputText , i want to change its value using jquery,
my component is,
<h:outputText id="txt_pay_days" value="0"
binding="#{Attendance_Calculation.txt_pay_days}"/>
thanks for any help...
<h:outputText> will be converted to <span> in raw HTML So,
Use id of the DOM and play with jQuery
${"#txt_pay_days"}.text("New Value To Set");
The <h:outputText> renders a HTML <span> with the value as its body.
<span id="txt_pay_days">0</span>
The jQuery .val() function works on HTML input elements like <input type="text"> only. The <span> isn't an input element at all. Instead, you need to use the jQuery .text() function.
$("#txt_pay_days").text("123");
try this..
$('#txt_pay_days').val('valueYouWantToInsert');

Categories

Resources