Develop Reference

How to assign HTML text to a JavaScript variable?

Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.

Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>

It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();

How can I replace the content of a div instead append a value using JQuery?

I am pretty new in JQuery and I have the following problem.
I have create this JQuery function that when the user select a file into an input tag having id=rendicontoAllegato it put the name of this file into an hidden div having id=nomeDocumentoRendicontazione into my page
$(document).ready(function() {
$("#rendicontoAllegato").change(function() {
alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());
var selectedFileName = $("#rendicontoAllegato").val();
$('#nomeDocumentoRendicontazione').append(selectedFileName);
});
});
It works fine but the only problem is that if I first select something asfile1.txt and then select another file as file2.txt into the div having id=nomeDocumentoRendicontazione I will have the concatenation of the 2 files name.
So I will have something like file1.txtfile2.txt and it is not good for me.
How can I replace the value of the div having id=nomeDocumentoRendicontazione instead to append a new value inside it?

You can use the .text() fn if you are dealing with with your data to be inserted as text or .html() fn if you are dealing with html to be replaced
$('#nomeDocumentoRendicontazione').text(selectedFileName);
Or
$('#nomeDocumentoRendicontazione').html(selectedFileName);

Use html() instead of append().
$(document).ready(function() {
$("#rendicontoAllegato").change(function() {
alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());
var selectedFileName = $("#rendicontoAllegato").val();
$('#nomeDocumentoRendicontazione').html(selectedFileName);
});
});

You have to use
$('#nomeDocumentoRendicontazione').html(selectedFileName);
it will replace the already present HTML of that. OR you can use
$('#nomeDocumentoRendicontazione').text(selectedFileName);
it will do the same but append your data as text.

Inserting html code with markdown to a div, using a twig function

I want to use Markdown to preview to the user how a form field on a twig file will be styled using javascript.
Basically what I'm trying to do, is :
// This function is used to show the Description Preview
$( "#server_new_profile_description" ).on('input propertychange', function() {
// This should make the $(this).val() formated in markdown
var descrString = $(this).val();
$("#descriptionPrev div").html("{{- "+descrString+"|markdown|raw -}}");
});
What I get:
If the input is *ABC*
the output will be: {{*ABC*|markdown|raw}}.
instead of ABC
Can anyone get me through this?

Twig is rendered server-side, which means it gets executed only once, when you request the page. So you will have to use javascript functions to achieve the markdown effects. This means you will need a markdown parser, for example: https://github.com/evilstreak/markdown-js

I created HTML that looks like this.
<div id="server_new_profile_description">
<input type="text">
</div>
<div id="descriptionPrev">
</div>
And I would achieve what you are looking to do like this.
$( "#server_new_profile_description input" ).change(function() {
var descrString = $(this).val();
$("#descriptionPrev").html("{{*"+descrString+"*|markdown|raw -}}");
});
It grabs the input element that is inside the div with the server_new_profile_description ID and won change it grabs the value assigning it to a variable. That variable is then placed inside of the DIV with the ID of descriptionPrev and concatenated with the two string parts

Make html() include content typed into textarea

I've got webpage with this structure:
<div id="report_content">
Some information
<textarea name="personal"></textarea>
<b>Other information</b>
<textarea name="work"></textarea>
</div>
After writing some text in the textareas, I use jquery to get the entire html. The result is that the textareas are empty, as if I hadn't written anything inside.
I'm guessing it's because they do not accept html, but I need to get the html including textarea's content.
The only solution I've found so far is to convert textareas to divs and then assign them the textarea content.
Is there any other way to avoid this conversion?

The problem is that .html() will not get the value (which is what the content people type into the textearea will go into). You can set the innerHTML to what the value is before getting the full html, like this...
JSFiddle
$('textarea').each(function () {
$(this).html($(this).val());
});
var html = $("#report_content").html();
console.log(html);
or... with less jquery wrapping...
var html = $("#report_content").find("textarea").each(function () {
this.innerHTML = this.value;
}).end().html();
console.log(html);

Can jQuery or Javascript change elements within textareas?

My first SO question! Here's what I am trying to do:
I'm rewriting a tool that generates some code a user can paste directly into Craigslist and other classified ad posting websites. I have created a list of websites (they populate from a database with PHP) the user can choose from with a radio button, and I want their choice to populate as bare text (not a link) between some <p></p> elements in a textarea. I'm using jQuery for this.
Textarea before the user chooses:
<p id="thing"></p>
Textarea after the user chooses:
<p id="thing">www.somewebsite.com</p>
HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<textarea>
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
JS
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
alert(website);
$("#thing2").html(website);
});
});
JS Fiddle (With comments)
If you see the JS Fiddle, you can see that I put another p element on the page outside the textarea, and it updates just fine, but the one inside the textarea does not. I have read many other like questions on SO and I'm starting to think that I can't change an element that's between textarea tags, I can only change the entire textarea itself. Please, lead me to enlightenment!

You actually can fairly easily manipulate the text contents of the textarea like it is part of the DOM, by transforming its contents into a jQuery object.
Here is a jsFiddle demonstrating this solution: http://jsfiddle.net/YxtH4/2/
The relevant code, inside the input change event:
// Your normal code
var website = $(this).val();
$("#thing2").html(website);
// This turns the textarea's val into a jQuery object ...
// And inserts it into an empty div that is created
var textareaHtml = $('<div>' + $("#textarea").val() + '</div>');
// Here you can do your normal selectors
textareaHtml.find("#thing").html(website);
// And this sets the textarea's content to the empty div's content
$("#textarea").val(textareaHtml.html());
The empty div wrapping your HTML is so that you can easily retrieve it as a string later using jQuery's .html() method, and so the parse does not fail if additional text is entered around the p element inside the textarea.
The real magic is $($("#textarea").val()), which takes your textarea's text and parses it into an HTML node contained in a jQuery object.

It can't do it the way that you are thinking (i.e., manipulate it as if it were a DOM element), but it is still accessible as the value of the textarea, so you can retrieve it like that, use basic string manipulation to alter it, and then set the updated string as the new value of the textarea again.
Something like this . . . first give the <textarea> an id value:
<textarea id="taTarget">
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
Then alter your script like this:
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
var currentTAVal = $("#taTarget").val();
$("#taTarget").val(currentTAVal.replace(/(<p id="thing">)([^<]*)(<\/p>)/, "$1" + website + "$3"));
});
});
Unless you need the <p> element in there, you might consider using a more simple placeholder, since it won't actually act as an HTML element within the textarea. :)
EDIT : Fixed a typo in the .replace() regex.

I know that this answer is a little bit late, but here it goes =)
You can do exactly the way you want to do. But for that, you need to implement a small trick.
by having this HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<p id="thing2"></p>
<textarea id="textarea">
<p id="thing"></p>
</textarea>
you can edit textarea content, as a DOM by implementing something like the function changeInnerText
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val(); // Gets value of input
changeInnerText(website);
//$("#thing").html(website); // Changes
//$("#thing2").html(website); // Does not change
});
var changeInnerText = function(text) {
var v = $("#textarea").val();
var span = $("<span>");
span.html(v);
var obj = span.find("#thing")[0];
$(obj).html(text);
console.log(obj);
console.log(span.html());
$("#textarea").val(span.html());
}
});
As you can see, I just get the information from the textarea, I create a temporary variable span to place textarea's content. and then manipulate it as DOM.

Instead of attempting to insert the text into the <p> element, insert the text into <textarea> element and include the <p> tag. Something like this should do the trick:
Change:
$("#thing").html(website);
to:
$("textarea").html('<p id="thing">'+website+'</p>');
And here is a fiddle: http://jsfiddle.net/nR94s/