Input to populate textarea - Javascript - javascript

I am making a coupon code page and i am struck in one thing, Maybe its easy for javascript buddies.The problem is
All output links are in one line, I want each link in different text area and able to copy from textarea
HTML Markup
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
</p>
send
<div id="url_value"></div>
Javscript Code
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var route = "http://www.domain.com/route.php?email=" + value + ', ';
var data = "http://www.domain.com/data.php?email=" + value + ', ';
var form = "http://www.domain.com/form.php?email=" + value;
document.getElementById('url_value').innerHTML = route + data + form
}
From the above code, Its generate all links in one line and looks ugly, I need it to show in 3 different textareas.
Like this Html
<p>Link 1</p>
<textarea name="route"> Output Link</textarea>
<p>Link 2</p>
<textarea name="data"> Output Link</textarea>
<p>Link 3</p>
<textarea name="form"> Output Link</textarea>

The issue with your code is this line:
document.getElementById('url_value').innerHTML = route + data + form;
What you're doing is injecting the DOM with all your links as one single line with no spaces between them.
The solution is to make a view for the results, and then inject them into the DOM afterwards as shown here:
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var routeLink = "http://www.domain.com/route.php?email=" + value + ', ';
var dataLink = "http://www.domain.com/data.php?email=" + value + ', ';
var formLink = "http://www.domain.com/form.php?email=" + value;
var routeView = '<p>Link 1</p><textarea name="route">'+routeLink+'</textarea>';
var dataView = '<p>Link 2</p><textarea name="data">'+dataLink+'</textarea>';
var formView = '<p>Link 3</p><textarea name="form">'+formLink+'</textarea>';
document.getElementById('url_value').innerHTML = routeView + dataView + formView;
}
UPDATE:
If the HTML already exists, add IDs to your textarea fields.
<p>Link 1</p>
<textarea id="routeValue" name="route"> Output Link</textarea>
<p>Link 2</p>
<textarea id="dataValue" name="data"> Output Link</textarea>
<p>Link 3</p>
<textarea id="formValue" name="form"> Output Link</textarea>
Replace your JS with this code:
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var routeLink = "http://www.domain.com/route.php?email=" + value + ', ';
var dataLink = "http://www.domain.com/data.php?email=" + value + ', ';
var formLink = "http://www.domain.com/form.php?email=" + value;
document.getElementById('routeValue').innerHTML = routeLink;
document.getElementById('dataValue').innerHTML = dataLink;
document.getElementById('formValue').innerHTML = formLink;
}

Related

jquery emoticon click function

I have one question about jquery click function. I have created this demo on jsfiddle.
In this demo you can see, there are three textarea and smileys. When you click on one smiley, then something is going wrong, because the smiley sticker="(w1)" is being added in all three textareas.
How can I fix this problem?
Anyone can help me in this regard ?
HTML:
<div class="container one">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="First Text area"></textarea>
<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for first textarea</div>
</div>
<div class="container two">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="Second Text area"></textarea>
<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for second textarea</div>
</div>
<div class="container tree">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="Third Text area"></textarea>
<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for third textarea</div>
</div>
JS:
$('body').on('click', '.sm-sticker', function(event) {
event.preventDefault();
var id = $(this).attr('id');
var sticker = $(this).attr('sticker');
var msg = jQuery.trim($('.add-y-comment').val());
if(msg == ''){
var sp = '';
} else {
var sp = ' ';
}
$('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp));
});
You made some confusions. You take the value of any field calling add-y-comment, but you only want to target the current one with $(this)
First, creating a variable because we will use it several times
var theComment = $(this).parents('.container').find('.add-y-comment');
Then change to this
var msg = jQuery.trim(theComment.val());
And finally (after your code), add this :
theComment.val(jQuery.trim(msg + sp + sticker + sp));
Complete code :
$('body').on('click', '.sm-sticker', function(event) {
event.preventDefault();
var theComment = $(this).parents('.container').find('.add-y-comment');
var id = $(this).attr('id');
var sticker = $(this).attr('sticker');
var msg = jQuery.trim(theComment.val());
if(msg == ''){
var sp = '';
} else {
var sp = ' ';
}
theComment.val(jQuery.trim(msg + sp + sticker + sp));
});
JSFIDDLE updated
Its just because of your two lines of snippet -
var msg = jQuery.trim($('.add-y-comment').val());
.
.
.
$('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp));
In both of these lines you don't retrieve and update the value of the textarea which is present just before the emoticon which is clicked. Here is the correct code for it -
var msg = jQuery.trim($(this).parent('.stiemo').prev('.add-y-comment').val());
.
.
.
$(this).parent('.stiemo').prev('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp));
JSFIDDLE DEMO

add additional fields while maintaining input content

I'm trying to make an input form with multiple fields and generate a preview of this content in a div. I would like the user to be able to add additional fields as they wish. I have the basic functionality working but anytime I "add" an additional field, the entered content of my previous fields are wiped out. Any suggestions would be greatly appreciated. I've included the relevant code below.
function addInput(){
var inpts = document.getElementById("inputs");
var inputCounter = Number(document.getElementById("inputCounter").innerHTML);
var incCount = inputCounter+1;
var currentInfo = inpts.innerHTML;
var newField = "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";
inpts.innerHTML = currentInfo + newField;
document.getElementById("inputCounter").innerHTML = incCount;
}
The call to the function looks like this...
<div style="display: none;" id="inputCounter">1</div>
<div id='inputs'>
<textarea id='1' rows="2" onblur="updatePreview()"></textarea> <div onclick="addInput()" style="display: inline-block;">XX</div><br />
</div>
innerHTML returns the HTML structure but it excludes the value property of form elements (such as textarea).
Instead, you could create a new element to hold the additional field, then append that element to inputs:
function addInput(){
var inpts = document.getElementById("inputs"),
inputCounter = Number(document.getElementById("inputCounter").innerHTML),
incCount = inputCounter+1,
div = document.createElement('div');
div.innerHTML= "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";
inpts.appendChild(div);
document.getElementById("inputCounter").innerHTML = incCount;
} //addInput
Working Fiddle
An alternative to creating a new element is to use insertAdjacentHTML:
function addInput(){
var inpts = document.getElementById("inputs"),
inputCounter = Number(document.getElementById("inputCounter").innerHTML),
incCount = inputCounter+1;
inpts.insertAdjacentHTML(
'beforeend',
"<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />"
);
document.getElementById("inputCounter").innerHTML = incCount;
} //addInput
Working Fiddle #2

Creating Dynamic unordered list and appending it to div

I have created my dynamic unordered list and trying to append it to the div tag. Its not getting reflected. I have written the below JS code
var mydiv= $('#itemList');
var myul=$('<ul/>');
var li1 = $('<li/>').html(''+'Varun Mehta'+''+'<span>'+ '9834562873' +'</span>');
myul.append(li1);
var li2=$('<li/>').html('Varun Mehta');
myul.append(li2);
mydiv.append(myul);
HTML:
<div id="csd" class="myClass">
<br>
<div id="itemList">
</div>
</div>
No error is coming in console and list is not getting reflected on screen.
put it in document.ready and there need quote for Varun Mehtha
$(document).ready(function () {
var mydiv = $('#itemList');
var myul = $('<ul/>');
var li1 = $('<li/>').html('' + 'Varun Mehta:' + '' + '<span>' + 9834562873 + '</span>');
myul.append(li1);
var li2 = $('<li/>').html('Varun Mehta');
myul.append(li2);
mydiv.append(myul);
});

String concatination in javascript

<script type="text/javascript">
function Msg1(){
var a="noida";
id=1;
document.getElementById('myText').innerHTML = '<p onclick="nice(id)">'+a+'</p>';
}
function Msg2(){
document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1" />
<input type="button" onclick="Msg2()" value="Show Message 2" />
<p id="myText"></p>
when i click on Show Message 1 it send id as a charecter not 1 i want to it send me 1
Thanks
You could do something like:
'<p onclick="nice(\"' + id + '\")">'+a+'</p>';
Or:
'<p onclick="nice(' + escape(JSON.stringify(id)) + ')">'+a+'</p>';
But this gets very unreadable very quickly.
Using this method you can't send things that aren't easily serializable. A more robust, and involved, solution would use the DOM API and EventListener API.
Example:
var id = { foo: "bar" };
var p = document.createElement("p");
p.addEventListener("click", function () {
nice(id);
});
p.innerText = "ipsum lorem";
document.body.appendChild(p);
You already have concatenation right near where you need it:
'<p onclick="nice('+id+')">'+a+'</p>';
make your innerHTML as
'<p onclick="nice(\"' + id + '\")">'+a+'</p>'
Replace your Msg1() Javascript function as below
function Msg1(){
var a="noida";
var id = 1;
document.getElementById('myText').innerHTML = '<p onclick="nice(\"' + id + '\")">'+a+'</p>';
}

JQuery - clone element and change attributes for multiple attributes

I have several elements like this:
<div class="image_insert clearfix">
<label for="userfile3">Image 3</label>
<input type="file" name="userfile3" id="userfile3">
<label for="slika_naziv_eng3">Image Title</label>
<input type="text" name="slika_naziv_eng3" id="slika_naziv_eng3"/>
</div>
And JS for cloning:
var img_add = $('.img_add');
img_add.on('click', function(){
var img_ins = $('.image_insert'),
i = img_ins.length,
clon = img_ins.first().clone().attr({'class' : 'image_insert clearfix', 'name' : 'userfile' + i}).insertAfter(img_ins.last());
});
I need to change all attributes where there is a number. Every time new element is added, it needs to count number of elements and the new number will be number of elements + 1. How can I do this?
I've grabbed this from something similar id written in the past
$("#containerDiv").find("div").each(function(){
lastVersionNumber = jQuery(this).attr("id").replace(/\D/g, "")/1;
});
newVersionNumber = lastVersionNumber + 1;
# build the new version HTML string
var sHTML = "<div name='mydiv'>";
sHTML += jQuery("#templateCode").html()
sHTML = sHTML.replace(/<input/i, "<input name='v"+newVersionNumber+"_name'");
sHTML += "</div>";
$("#containerDiv").append(sHTML);
try this: clon contains the new element, so, you need to find your element
<!DOCTYPE html>
<html>
<head>
<title>Clone Elements with Jquery by #MaoAiz + Sasha</title>
</head>
<body>
<button class="img_add">New</button>
<div class="image_insert clearfix">
<label for="userfile1" class="img-label">Image 1</label>
<input type="file" name="userfile1" id="userfile1">
<label for="slika_naziv_eng1">Image Title</label>
<input type="text" name="slika_naziv_eng1" id="slika_naziv_eng1"/>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var img_add = $('.img_add');
img_add.on('click', function(){
var img_ins = $('.image_insert'),
i = img_ins.length + 1;
clon = img_ins.first().clone().insertAfter(img_ins.last());
// clon contains the new element, so, you need to find your element
clon.find("input").first().attr({
'name' : 'userfile' + i,
'id' : 'userfile' + i
});
clon.find("input").last().attr({
'name' : 'slika_naziv_eng' + i,
'id' : 'slika_naziv_eng' + i
});
//plus:
clon.find(".img-label").text("Image " + i)
// view you cosole in Chrome Ctrl + Shift + j
console.log("Elements: " + i)
});
</script>
</body>
</html>
I have a demo in github. https://github.com/MaoAiz/Formulario-Dinamico-JQuery

Categories