I have the below code for generating comments (cutted down for simplicity sake):
<div v-for="(g, gi) in submission.goals" :key="gi">
<div>
<p >Goal #{{gi+1}}</p>
<div>{{g.text}}</div>
</div>
<div>
<p>Comments:</p>
<div><span class="uk-text-small uk-text-muted"><i>no comments</i></span></div>
<hr>
<div>
<textarea class="comment-input" placeholder="type your comment here"></textarea>
</div>
</div>
</div>
and my method look like this:
submitComment(gid,uid,phase,e)
{
e.preventDefault();
//var comment -> get the value of the closes textaraea here
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
As you can see the whole thing is generated in a v-for loop generating divs according to the size of the submission.goals array returned by the API.
My question is how can I get the value from the textarea input closest to the anchor that is calling the submit function.
Obviously I can't have a separate data object for each comment area since I do not have a control over the size of submission.goals array. And if I use v-model="comment" on each input, whatever user types in will be automatically propagated to each and every textarea.
I know how to handle this with jQuery, but with Vue.js I am still in the early learning stages.
If you mark the text area as a ref, you could have a list of textarea elements. With the index number of the v-for items (gi in your case), you can get the [gi] element of the refs list and submit its value.
<textarea ref="comment" class="comment-input" placeholder="type your comment here"></textarea>
submitComment(gid,uid,phase,e, gi)
{
e.preventDefault();
var comment = this.$refs.comment[gi].value;
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
Try change submission.goals to computed submissionGoals and create this computed with the code above:
submissionGoals(){
return this.submission.goals.map(goal => ({...goal, comment: ''}));
}
Use v-model="g.comment" on textarea.
Now change submitComment(g.id, g.user_id, g.phase, $event) to submitComment(g, $event) like Alexander Yakushev sayed.
Related
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)
}}`
I have a concern how to get the string from textarea but also to get every new row added by pressing enter, also TAB space. Priority is to get every new row, so I can use that string to add to paragraphs but to respect new rows, TAB spaces.
Example:
Textarea text: http://prntscr.com/kvbbcv.
When I add value to the paragraph:
http://prntscr.com/kvbbur
One more example: http://prntscr.com/kvhmca
What would be the best practice to fix this problem?
Code:
<textarea v-model="comment"></textarea>
<p>{{ comment }}</p>
I found the solution to resolve this problem.
The solution is to use <div contenteditable></div> and get the value from this <div> when content inside of it is changed using #input="contentEditableChange()"
The function will return the value as HTML. But using v-html you can convert html string to html preview.
So final solution code is:
<div id="unique-element" #input="contentEditableChange()" contenteditable></div>
<p v-html="message"></p>
Method:
contentEditableChange() {
this.message = document.getElementById("unique-element").innerHTML;
},
if you using ckeditor, you can try like this
<ckeditor v-model="comment"></ckeditor>
<p v-html>{{comment}}</p>
because ckeditor has added new lines automatically. or if you use textarea, add a <br> tag manually.
I have a div which shows result of a quotation form. Results changes if user change form value instantly. I want to display or copy the same results of that div to another div or more like a "second version" of that div.I know this below sort of code will work.
$("div1").clone().appendTo("div2");
But it works only for the 1st time page loads. After that it doesn't change the results with the div1 results.
Does anyone have a hint on what to do here?
Many thanks in advance!
Use the onchange event in your html on the form. Then call your code from it somewhat like:
onchange="$('div1').clone().appendTo('div2');"
or
onchange="someJSfuncion();"
also dont forget to delete the old copy. Further information:
https://www.w3schools.com/jsref/event_onchange.asp
You need to setup your event handlers on form changes and then copy the output to other div. Example:
// Original js
(function() {
$('.inp_name').on('change', function() {
$('.original-output .name_text').text($(this).val());
});
})();
// Your js
(function() {
var version = 0;
$('.inp_name').on('change', function() {
version++;
// Don't use clone as your events starts working in cloned code also which you don't expect
//$('.original-output').clone().appendTo('.copied-output');
$('.copied-output').append($('.original-output').html());
$('.copied-output').append(`<div>Version: ${version}</div>`);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: Focus out see text getting change.
<div class="original-form">
Enter text here: <input type="text" class="inp_name" placeholder="enter your name" />
</div>
<div class="original-output">
Entered name: <span class="name_text">Entered Name</span>
</div>
<div class="copied-output">
</div>
I need to render HTML values in text area SUBMIT FORM.
I can bind the html values in a <div> but not in a <textarea>.
Also, ng-model for data binding can retrieve the value but it is displayed as html.
Controller
//task.descr contains "<br>-------<br><a href="http://www.google.com"..."
var str="<br><hr><br>"+ task.descr;
//str= $sce.trustAsHtml(str);
$scope.formData5 = {
descr: str}
console.log($scope.formData5);
<textarea placeholder="Deskripsi Memo" name="descr"
ngMaxlength="1000" ng-model="formData5.descr"
ng-bind-html="formData5.descr" > </textarea>
This would allow you have both two way data binding as well as give you the functionality of textarea:
<div ng-bind-html="modelname"
contenteditable="true"
ng-model="modelname">
</div>
DEMO
I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }
innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;
If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!