HTML textarea value is not getting from js in running time - javascript

I don't have too much experience working to JS but I am trying to get the value from textarea using JS when I am writing into textarea but it is not working the append function.
In HTML:
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
javascript code:
$(document).on('click', 'li.tag_system_search_people', function() {
var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');
var content = $('#wall_post_text').val();
content = content.replace(/#(\w+)/ig,'');
$('#wall_post_text').val(content);
$('#wall_post_text').append(" <span data-people='"+user+"' data-people_tagged='"+username+"' class='people_tagged' contenteditable='false'>"+username+"</span> ");
alert($('#wall_post_text').val());
$('#pg_social form#wall_post)
});
The alert is printing but text without the text in append function.

You are not doing it right.
For example:
// find elements
$('.elm_submit').on('click', function() {
/*var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');*/
// its value (You can too insert html in variable).
var content = $('#wall_post_text').val();
// insert value in div
$('.content').html(content);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Value -->
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
<!-- Get element -->
<div class="content">
</div>
<!-- Fire -->
<button class="elm_submit">
Click
</button>
and your postcode is incomplete
...
$('#pg_social form#wall_post ... <-
});

Related

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

How do do you edit HTML form elements’ in jQuery?

I’m trying to make a simple font generator for a challenge. The form element I’m trying to edit is the tag.
The way this webpage is supposed to work is a user types in the “input textbox”, presses one of the 3 buttons and the new text will appear in the “output textbox” in the font that the user chooses.
This is what my HTML looks like:
<div id=“inputContainer”>
<p id=“inputText style=“text-decoration:underline;position:relative;”>Input</p>
<textarea id=“input” rows=“10” columns=“10”></textarea>
</div>
<div id=“outputContainer”>
<p id=“outputText” style=“text-decoration:underline;position:relative;”>Output</p>
<textarea id=“output” rows=“10” columns=10”></textarea>
</div>
And here is my jQuery/JS:
var inputText = $("#input").html();
$("#monospaceButton").click(function() {
$("#output").html(inputText);
});
The function only works if I manually add text between the tags (innerHTML). When the user types in the textarea in the code’s output (The website.), there will be no output in the “output” textarea.
I appreciate any help. Please let me know if I need to explain anything more clearly. Thanks!
$("#button1").click(function() {
var value = $("#input").val();
$("#output").css('font-family', 'serif');
$("#output").val(value);
});
$("#button2").click(function() {
var value = $("#input").val();
$("#output").css('font-family', 'monospace');
$("#output").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="inputText" style="text-decoration:underline;position:relative;">Input</p>
<textarea id="input" rows="3" columns="10"></textarea>
</div>
<button id="button1">Style 1</button>
<button id="button2">Style 2</button>
<div>
<p id="outputText" style="text-decoration:underline;position:relative;">Output</p>
<textarea id="output" rows="3" columns="10"></textarea>
</div>

access the exact view in a raw using js

My view has a button and the view is looped.so it has raws.
when i click the button of a single raw i need to color that button.
so i added a onclick="select_Button(<?php echo $rawID?>)" to the raw's button in my view
select_Button is my funtion in js
function select_Button(rawNumberOfVote) {
var RawNumber = rawNumberOfVote;
alert ("Form submitted successfully" + RawNumber);
var upVote = document.getElementById("up_vote");
upVote.style.background = "green";
}
like above i send the rawID to the funtion.
how can i edit this line to accept the view called up_vote in that particular raw id that i got from parameter.
var upVote = document.getElementById("up_vote");
becuz if i only use this line it will color the first raw's button instead the one i wanted
Thank you
you can use data attribute in your html referencing to this page and this page. and retraive with this this jquery code snippet:
$("[data-test ='my value']")
or this code snnipet in javascript:
document.querySelectorAll(".example").find(function(dom){
return dom.dataset.test == "expected-value"
});
Update:
accourding to this page querySelectorAll return nodeList and NodeList are not array and we cannot use find method so I change my answer to this code:
<html>
<body>
<div class="post" data-key="1">
<lable>test</lable>
<button type="button" onclick="upvote(1)">up vote</button>
</div>
<div class="post" data-key="2">
<lable>test</lable>
<button type="button" onclick="upvote(2)">up vote</button>
</div>
<div class="post" data-key="3">
<lable>test</lable>
<button type="button" onclick="upvote(3)">up vote</button>
</div>
</body>
</html>
<script type="text/javascript">
var upvote = function(id) {
var nodes = document.querySelectorAll(".post");
console.log(nodes.length);
for(i = 0 ; i < nodes.length ; i++){
console.log(nodes[i].dataset.key);
if (nodes[i].dataset.key == id)
nodes[i].style.backgroundColor = "red";
}
};
</script>

HTML/Javascript form - How to make a new div element that overlays?

I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.

Display array (converted from string) on button click

I have this code snippet which is meant to return an array on click of 'button', the string converted to an array comes from $('#text-area').text();
Please help me return the array in #text-ent after 'button' click.
<div id="container">
<h1>Type Test</h1>
<div id="div-text-area">
<textarea id="text-area" ng-model="yourText" placeholder="Please enter your text here"></textarea>
</div>
<div id="text-result">{{yourText}}</div>
<div id="entities1">
<button>Get Entities</button>
<div id="text-ent"></div>
</div>
<div id="entities2">
<button>Get Keywords</button>
<div id="text-key"></div>
</div>
</div>
JS
$(document).ready(function(){
$('button').click(function() {
var getData = $('#text-area').text();
var arrayOfText = getData.split(" ");
$('#text-ent').text(arrayOfText[0]);
});
});
You are trying to get text-area value by .text() method which return inner HTML
so please try .val() which return the value of text-area
$(document).ready(function(){
$('button').click(function() {
var getData = $('#text-area').val(); //Change here
var arrayOfText = getData.split(" ");
$('#text-ent').text(arrayOfText[0]);
});

Categories

Resources