passing the values dynamically (eg: innerHTML) to another element as a value - javascript

I've a form with three fields, which are rendered via the jinja2 template & the fields are part of a Django ModelForm. The fields are: CharField, FileField, and Textarea.
And, I've also a textarea like <div> element which exactly works like Stackoverflow's editor, omitting some options like <code>, <image> ...
But, it's totally JavaScript based. Which when rendered on the page disabling that existing TextArea that was rendered from the ModelForm. As, I defined on the page...
<script>
$(document).ready(function () {
$('#txtArea').TxtEdtr();
});
</script>
I've mentioned both the element's IDs same, to always render the second textarea by overriding the first one. And, by hiding that element by - display: none.
And to pass the context of the 2nd created textarea to that modelform textarea, I've used:
$('.myeditor').keyup(function () {
$('#txtArea').innerHTML = $('.myeditor').html();
});
By looking at the browser console I can see that keyup is working but, the context or the 1st element isn't affected. And, as it's a required element I can't submit the form also.
For example, I want to pass that html context as a string to that ModelForm's textarea element before the form is submitted:
$('#txtEditor').innerHTML = $('.editor').html();
result to pass: "<span style=\"font-style: italic;\">hi there ...<br></span>"
which is shown to the console while I ran that code, but not able to pass.
The DOM structure:
<div class="form-group">
<!-- model form element -->
<label for="txtEditor">Body of article</label>
<textarea name="details" cols="40" rows="10"
id="txtEditor" class="form-control" required="" style="display: none;">
</textarea>
<!-- after rendering -->
<div class="row-fluid main ted">
<div id="menubar_txtEditor" class="row-fluid menu-bar">
<!-- menubuttons are displayed here -->
...
...
</div>
<div class="editor" name="details" style="overflow: auto;" contenteditable="true">
<!-- portions here dynamically added if textarea has
any content inside -->
<span style="font-style: italic;">hi there ...<br></span>
</div>
</div>

You can do something like this:
// add data to the editor
$('.editor').prepend($('#txtEditor').val());
// initialize TxtEdtr
window.quill = new Quill('.editor', {
theme: 'snow'
});
// Update the model textarea value after submit
$('form').on('submit', function() {
$('#txtEditor').val(quill.root.innerHTML);
});
Vist jsfiddle, for more.
check network on jsfiddle, it's submitting the desired data.

Related

how to use js simulation input those <div contenteditable ="true"> elements.thanks

<div contenteditable="true" style="width: 509px;" id="test"></div>
document.getElementById("test").value=1231
document.getElementById("test").innerText=1231
document.getElementById("test").innerHTML=1231
None of the above methods worked when I hit the submit button.
I wonder if I have to trigger events to save values
But I don't know how to create event
The belows methods works in inputs evets ,but not work in
<input type="text" id="test2">
window.inputValue(document.getElementById("test2"),"simulation_string")
window.inputValue = function (dom, st) {
var evt = new InputEvent('input', {
inputType: 'insertText',
data: st,
dataTransfer: null,
isComposing: false
});
dom.value = st;
dom.dispatchEvent(evt);
}
First, you have a typo in your code as you've not added the closing double quote for the style attribute.
Next, a div element does not have a value property and when you want to set content into it, that content must be a string.
Also, when setting the value of an element as a non-HTML string, use .textContent.
Finally, you imply that you will be submitting data, which will only work with form fields. A div is not a form field, so you'll have to copy the contents of the div into another element that will submit its data along with the rest of the form. Or, you could just use a textarea in the first place instead of a div.
document.getElementById("test").textContent = "1231";
// Copy the div content into the hidden form field so that it will transmit
document.getElementById("divData").value = document.getElementById("test").textContent;
console.log(document.getElementById("divData").value);
<div contenteditable="true" style="width: 509px;" id="test"></div>
<input type="hidden" id="divData">

Spectrum, option showInput, show a input text not editable

I have implemented a Spectrum color Picker, it works perfectly, except for the showInput option which makes the text input not editable, it is not even selectable, it does not even focus on itself. If I select the color, however, the hexadecimal value appears in the input, so it works halfway. But I can't select it to manually set the hex value I want it to have.
This is the Jquery code :
$("#divPickerColor").spectrum({
showInput : true ,
preferredFormat: "hex",
showButtons: false,
allowEmpty:true
});
this is the html code :
<script id="configurazioni-inserimento-modifica-stato-avanzamento" type="text/template">
<div>
<form id="formAddStatoAvanzamento" role="form" action="/" method="POST"
data-parsley-validate>
<div class="form-group">
<div class="row">
<div id="colorazione" class="col-lg-12">
<input type="text" id="divPickerColor" />
</div>
</div>
</div>
</form>
</div>
</script>
This script is called by a function to display it on a modal.
The tour is complex and I can't post all the code to you, I tried to put the main nodes in it. What I can say further is that I have looked at the CSS properties of the input, it has no disabling properties. I also tried to forcibly put them with JQuery in the console but nothing changed. The input generated by Spectrum is not editable and has no focus on itself.
I add that I have tried the same code in an html page outside my application, everything works perfectly. I think it's something related to the fact that this portion of html is included in a script. Does anyone know why and how to fix it?
As #BugCatcherJoe wrote at the question comment, the answer is at the next link:
https://github.com/bgrins/spectrum/issues/161
The solution that works for me was removing 'tabindex=-1' from the modal attributes.

vue.js binding value from dynamically generated input

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.

Clone dynamic content by class

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>

AngularJS Render HTML in textarea

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

Categories

Resources