I have a 'div' that copies the text and I can paste it somewhere else.
<div id="div1">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText()" />
</div>
It works when it has one result since its getting the first div1, but when it has two or more results even if i click on the 'copy' it will copy the first text.
How can I get it that it will copy each div separately?
This is my javascript:
function copyText() {
var copyDivText = document.getElementById('div1').innerText;
var returnVal = window.clipboardData.setData('Text', copyDivText);
alert(returnVal);
document.getElementById('div2').innerText = window.clipboardData.getData('Text');
}
After re-reading your question countless times, suddenly it clicked: it seems like you want to use the code from div1 as a 'pattern' that you can re-use.
However your javascript has currently just one div-id hard-coded.
I didn't know what to make of div2 (from your function) so I changed that (as example) to a textarea (with id clipboardText) that will show you the text-content that was just copied to the clipboard.
For simplicity (staying in-line of what seems to be your current code-logic/style) I suggest that the button is a direct child of the div that it needs to get the innerText from. If this is the case (and we continue to use inline-script), you'd pass this (that refers to the button that was clicked) to the function. In the function you'd then simply get the innerText of the button's parentNode:
Javascript:
function copyText(t) {
var copyDivText = t.parentNode.innerText;
var returnVal = window.clipboardData.setData('Text', copyDivText);
alert(returnVal);
document.getElementById('clipboardText').value = window.clipboardData.getData('Text');
}
HTML Body (note I added another 'pattern' with id div2, since that seemed inline with what I guess you are doing):
<textarea id="clipboardText"></textarea>
<hr>
<div id="div1">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>
<div id="div2">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>
Hope this is what you intended with your question.
PS: if this is what you intended, note that a lot of people consider inline-scripts bad and when you dynamically attach your function you do not have to pass this anymore (since then this can be called directly inside your function).
Related
Hey the task i try to achieve is to activate and deactivate a button depending on, if there is text in a textarea or not.
Here the code I'm trying to get going.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
$(button).prop('disabled', true);
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
and here a fiddle: Fiddle
What I'm really not understanding here is, why the button which I disabled in the js part is still active
I'm an absolute html/js/web developement newbie, so please give some explanation.
Thanks in advance
The jsFiddle doesn't work because there's no jQuery CDN link.
You can find an updated version, witch includes the jQuery CDN here.
You're using jQuery to disable the button on page-load.
I'll recommend using HTML for that:
<button id="button_01" type="button" value="submit" disabled>
Then, your code appears to work just fine because there's no jQuery needed anymore:
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
textarea.addEventListener('input', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit" disabled>
Modify
</button>
</div>
Note;
Changed event from keyup to input so things like right-click and paste will trigger the event. (Thx to #freedomn-m)
Try like this.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
button.disabled = true;
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
I'm trying to create a script that uses the input.
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
function hintbutton4() {
document.getElementById("textareabox").innerHTML = 'ID=textareabox';
}
I've got this, but I don't know how to grab the text as input...
How can I do it? What should I search for?
I want the input from the text area used in the script in the last part 'ID=textareabox'. That's all.
Here is a basic example using pure JavaScript.
Essentially, from what I understand, you are trying to populate a textarea with JavaScript as well as get the value.
Code Pen: http://codepen.io/anon/pen/mWyOMq
JavaScript
function getText() {
var text = document.getElementById("textareabox").value;
alert(text);
}
function setText() {
var text = document.getElementById("textareabox").value = 'Hello, World!';
}
HTML
<div>
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
<input type="button" value="Get Text" onclick="getText()" />
<input type="button" value="Set Text" onclick="setText()" />
</div>
I have setup clipboardjs successfully. Now I am adding a framework to it for design purpose.
It is all working fine only when I add a new class to the button called "small button" than it will not work anymore. Before I used a button it will work very well.
I think there is an simple answer but I think I have the wrong look on the issue.
This is the not working example:
< script >
var clipboard = new Clipboard('.small button');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
This is the working example:
< script >
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
The argument passed when initializing the clipboard library is a CSS selector, so the code you have
new Clipboard('.small button')
will find button tags within tags of small class. What you want is probably
new Clipboard('.small.button')
which will find tags having both small and button classes.
Add a double class to your button as posted down below. First you post "btn" and then with a space the relevant css from the framework.
<button class="btn small button" data-clipboard-action="copy"
data-clipboard-target="#ds24code">
In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:
<div class="col-sm-5 narrow">
<p id="title">Jhon123</p>
<p id="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default" id="repost">Re-Tweet</button>
</form>
</div>
When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:
$('#retweet').click(function(e){
e.stopPropagation();
var text = $(this).parent("div").closest('#text');
alert("some retweet button has been pressed which has the text:"+text);
});
You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:
$('#repost').on('click', function () {
var text = $(this).closest('div[class^=col]').find('#text').html();
console.log(text);
});
The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.
$('#repost').click(function(){
console.log($(this).closest('div').find('#text').html());
});
See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output
and as comments suggest you IDs should be unique per page so you should use a class or something else instead.
$( "#text" ).text() will give you the value inside P tag. So your code will look something like:
$('#repost').click(function(){
$( "#text" ).text() // save it to wherever you want
});
As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.
If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
$(function() {
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
<p class="title">Jhon123</p>
<p class="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
<div class="col-sm-5 narrow">
<p class="title">Mary123</p>
<p class="text">This is the status of mary</p>
<p>posted at 12:35pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
I have a simple html form where I input a title and description and hit submit. At the top of the page are some paragraphs of text that I often copy and paste into these fields. It's a repetitive task, and the paragraphs are generated dynamically with php.
Can I put a button or link at the end of each paragraph or div that would fill in my form input fields with a script? Then all I would have to do is hit submit. I'm already using jquery on the page too.
EDIT:
<p>Sentence one. Longer than this</p><!--would like a button here to populate field in form below-->
<p>Sentence two. Longer than this</p>
<p>Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title>
Desc<input type="text" name="title>
<input type="submit" value="Submit"></form>
If you have some selector that can select all of the <p> tags that contain those paragraphs, you can do something like the following:
$(function() {
var $descInput = $('input[name=desc]');
// wrap the text of each paragraph in a span so we can target it easily.
// Then add a button inside each <p> at the end that will prepopulate that text.
$('p.prefill').wrapInner('<span class="text"></span>').append('<button class="prefill-sentence">Prefill</button>');
// Add a click handler for all the newly added buttons
$('button.prefill-sentence').click(function() {
// get the contents of the span we used to wrap the sentence with
var sentence = $(this).prev('.text').text();
// add that sentence to the current value of the description input
$descInput.val($descInput.val() + sentence);
});
});
.prefill-sentence {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="prefill">Sentence one. Longer than this</p>
<p class="prefill">Sentence two. Longer than this</p>
<p class="prefill">Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title
<input type="text" name="title" />Desc
<input type="text" name="desc" />
<input type="submit" value="Submit" />
</form>
(Note I assumed you had a name of "desc" for your description input. Ideally, you can use a class or id to target it easier in the real code).
Is this what you are looking for?
http://plnkr.co/edit/S3OegSh80UH6oQJPDatr?p=preview
$(function(){
$('p').each(function(){
$(this).after('<button>Click<\/button>');
});
$('button').on('click', function(){
var txt = $(this).prev().text();
$('input').eq(0).val(txt);
})
});
You'll probably want to add something more specific to those php-generated paragraphs/divs, so they can safely be selected and manipulated by JS.
CodePen: http://codepen.io/anon/pen/PwJwmO
HTML
<div class="text-section">
Sentence one. Longer than this
</div>
<div class="text-section">
Sentence two. Longer than this
</div>
<div class="text-section">
Sentence three. Longer than this
</div>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title">
Desc<input type="text" name="desc">
<input type="submit" value="Submit">
</form>
JS
var $text_section = $('.text-section');
var $description_field = $('input[name="desc"]');
$text_section.each(function(){
var section_text = $(this).text();
var $autofill_button = $('<button>Autofill</button>');
$autofill_button.click(function(){
$description_field.val(section_text);
});
$(this).append($autofill_button);
});