Develop Reference

Getting Input Values from Appended Divs

I am having trouble getting the input values from a div that I appended. It returns as undefined. So basically I am creating the input element and giving it an Id. I have a function that when I clicked a button it is suppose to show the input value..
I am relatively new to JavaScript and I can't seem to find any solution for this. Please help me.. thank you
I am currently doing this in the same JavaScript script so there is no HTML script.
var question1ProjectTitleDiv = document.createElement("div");
var question1ProjectTitle= document.createElement("span")
var question1ProjectTitleName= document.createTextNode("Project Title:")
var question1ProjectTitleInput = document.createElement("input");
question1ProjectTitleInput.type= "text"
question1ProjectTitleInput.maxLength = 256;
question1ProjectTitleInput.id="question1ProjectTitleInputID"
question1ProjectTitleDiv.append(question1ProjectTitle)
question1ProjectTitle.append(question1ProjectTitleName)
question1ProjectTitleDiv.append(question1ProjectTitleInput)
questions.append(question1ProjectTitleDiv) //Add project title
console.log(question1ProjectTitleInput) // Returns <input type="text" maxlength="256" id="question1ProjectTitleInputID">
JS CODE:
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery
let question1ProjectTitleInputID2 = document.getElementById('question1ProjectTitleInputID') //Vanilla JS

You have the following statement:
question1ProjectTitleInput.id="question1ProjectTitleInputID"
So, if you use jquery to read the input, you should
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery

How to Decode htmlentities in yui TextAreaCellEditor

I am facing problem with yui TextAreaCellEditor.
Below yui statements opens the editor with save and Cancel button on clicking the yui column.
var myTextareaCellEditor = new YAHOO.widget.TextareaCellEditor();
var myColumnDefs = [
{key:"title",label:"Title", sortable:true ,editor: myTextareaCellEditor},
];
Now my problem is when ever I specify title and save in database for example my title is "text&data<new>".
It is properly getting saving but when I open the editor containing the title text.
It display like "text&data<new>".
I wanted to remove html entities from editor.
Any help is very much appreciated.

TextareaCellEditor has a Event called "Focus", When the editor is initailized and focus is on it, the Focus function is called, You can make use of it.
var myTextareaCellEditor = new YAHOO.widget.TextareaCellEditor({
focus:function(e){
var textVal = myTextareaCellEditor.textarea.value;
textVal = decodeTEXT(textVal) ;
myTextareaCellEditor.textarea.value = textVal;
}
});
myTextareaCellEditor.textarea.value : will give the value that appears in the text area. This value you can decode using the decodeText() function and replace the textarea value.
function decodeTEXT(textVal){
textVal = textVal.replace(/&/g, '&');
textVal = textVal.replace(/>/g, '>');
textVal = textVal.replace(/</g, '<');
textVal = textVal.replace(/"/g, '"');
textVal = textVal.replace(/'/g, "'");
return textVal;
}
Hope this helps. Enjoy coding :)

How to display <input type=''text'> without creating a textbox in jquery?

I have a comment box(textarea) in which the user types something and when he hits enter that thing is automatically displayed in 'comment section'. Now when the user hits submit I'm executing the following code,
var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
comment.appendTo(commentSection);
By the above code the comment typed by user is dynamically displayed in the commentSection. This works fine but when user types something like,
<input type='text'>
in the comment box then a textbox is created within the comment section. So is there a way through which I could not let this happen?
Thanks in advance.

One way would be to just append the data as .text
Something like this:
var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
commentSection.text(comment);
Edit: To append to an existing part of the comment, replace:
commentSection.text(comment);
with:
commentSection.text(commentSection.text() + comment);

You have to convert the string to entities. Define this function:
function htmlencode(str) {
return str.replace(/[&<>"']/g, function($0) {
return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
});
}
Then run the following code when the user hits enter:
var comment = htmlencode($("#commentBox").val());
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

Try this ,
div.insertAdjacentHTML( 'beforeend', comment);

You can use
var commentText = $("#commentBox").text();
but this do not clean html tags on your string, additionally you can use a function to do this
function RemoveHTMLTags(vals) {
var regX = /(<([^>]+)>)/ig;
var html = vals;
return (html.replace(regX, ""));
}
and then you use:
var finalComment = RemoveHTMLTags(commentText);

Remove HTML tags from a javascript string

I have this code :
var content = "<p>Dear sms,</p><p>This is a test notification for push message from center II.</p>";
and I want to remove all <p> and </p> tags from the above string. Just want to display the string values without html tags like :
"Dear sms, This is a test notification for push message from center II."

Why not just let jQuery do it?
var content = "<p>Dear sms,</p><p>This is a test notification for push message from center II.</p>";
var text = $(content).text();

Here is my solution ,
function removeTags(){
var txt = document.getElementById('myString').value;
var rex = /(<([^>]+)>)/ig;
alert(txt.replace(rex , ""));
}

Using plain javascript :
content = content.replace(/(<p>|<\/p>)/g, "");

You can use jQuery text() to get plain text without html tags.
Live Demo
withoutP = $(content).text()

var content = "a<br />";
var withoutP = $(content).text()
alert(withoutP )
This one does not work for the .text() solution.

this one is checking for special chars
var $string = '<a href="link">aaa</a>';
var $string2 = 'aaa';
var $string3 = 'BBBBB';
var $string4 = 'partial<script';
var $string5 = 'has spaces';
function StripTags(string) {
var decoded_string = $("<div/>").html(string).text();
return $("<div/>").html(decoded_string).text();
}
console.log(StripTags($string));
console.log(StripTags($string2));
console.log(StripTags($string3));
console.log(StripTags($string4));
console.log(StripTags($string5));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

myString.replace(/<[^>]*>?/gm, '');

Place hidden element in markup, or create it from jQuery. Use this code to get plain text without complications with incomplete tags, < etc.
content = $(hiddenElement).html($(hiddenElement).html(content).text()).text();

Above approch is not working for me. so i got one alternative solution to solve this issue`
var regex = "/<(.|\n)*?>/";
var originaltext = "1. Males and females were compared in terms of time management ability. <br><br>The independent variables were the people in the study.<br><br> Is this statement correct";
var resultText = body.replace(regex, "");
console.log(result);

Use regex:
var cleanContent = content.replace(/(<([^>]+)>)/ig,"");

you can use striptags module to remove HTML and get the text. It's quite an easy and straightforward solution.

function htmlTagremove(text) {
var cont = document.createElement('div'),
cont.innerHTML=text;
return $(cont).text();
}
htmlTagremove('<p><html>test');

Populating form text inputs with data-* data using jQuery

I've been trying to wrap my head around this particular issue for two days now. I feel like I'm close, but I can't crack it. I have a div with data-* attributes:
<div class="pull-right" id="actions" data-ph-title="I am a title" data-ph-type="and a type" data-ph-source="from a source" data-ph-subject="with a subject">
When trying to alert - for instance - the value of "data-ph-title", I can do the following as apparently the dash between "ph" and "title" gets removed.
var info = $("#actions").data();
alert(info.phTitle);
That's great and it works (alerts: "I am a title"), but what I really want is to populate certain form fields with all of this data. I have named my form fields identical to the info object's properties, for example:
<textarea id="placeholder-title" name="phName"></textarea>
I'm trying to come up with a loop that will put all of the info object's property values into the corresponding text inputs (or textareas). This is where I'm getting stuck. I currently have the following code:
var info = $("#actions").data();
$.each(info, function(field, val){
$("[name='" + field + "']").val(val);
});
Any help would be greatly appreciated!

Your code works, so I don't really know what the problem is, aside from you not having a field named 'phName'.

This should be what you need. Iterate through the JSON object and populate the text areas:
var info = $("#actions").data();
for (var key in info) {
if (info.hasOwnProperty(key)) {
$("[name='" + key + "']").val(info[key]);
}
}
Here is a jsFiddle that demonstrates it working.

You don't seem to have a phName in #actions. But what about using an id on your form elements?
var info = $("#actions").data();
$.each(info, function(field, val){
$("#placeholder-" + field).val(val);
});
and
<textarea id="placeholder-phTitle"></textarea>
<textarea id="placeholder-phSource"></textarea>
...

Try this:
var fields = $('#myform input, #myform textarea');
for(var i=0; i < fields.length; i++){
var input = fields[i];
if(info[input.name]) input.value = info[input.name];
}