Develop Reference

Making a button copy a text

I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.
http://porcelaincoins.com
<a class="btn btn-lg" href="#">copy address</a>

This code will copy the text abc to the clipboard.
function copy(text) {
document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
document.getElementById("copy").focus();
document.execCommand("selectAll");
document.execCommand("copy");
document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>
How does it work?
Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
Finally, it removes the div from the DOM (i.e. destroys the div)
These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.

Jquery get form's html with values within div

I have Got a div with two text area fields in it and , i have got a list of names where ; if you click on a name from the list it fills the first text area with the name and second text area with surname. This is done via jquery.
I need to save all the content of the div with the values in to mysql and for this reason I have tried .html(), .text(), get().innerHTML, get(), content(), but even though it gets the html , it doesnt not get the text area html with value.

You need to grab the text area fields individually and then use .val() on them to get whatever will be entered in the field.

ok i found a way to do it , when i mentioned that you click on a name from the list it sets the value of the text area; i used ,val(); , but instead i am now using .text(); and it allows me to get the value of it when i use .html(); to get the entire content with the form values. It may not be the best way but it does the job , I am open to suggestions

$.html is not having textarea value

When we are trying to get the html of div using the below code it is having all the data except the text which I am entering in the textarea or input field
var mywindow = $(printDiv).html();
mywindow will have all the html except textarea text, radio button values or inputfield.
I have looked into this question but using clone is giving any text at all.

The thing to remember is that .html() does exactly what it says: it gives you the HTML currently in the DOM within that node. But the thing is, content entered by the user, and more generally the content of HTML input fields, is not a part of the HTML. Entering text into a textarea or checking a checkbox or radio button doesn't change the HTML one bit. It does update the internal memory representations of the individual DOM nodes, but this isn't represented in the HTML.
Whenever you want to get content from an input element on the page, you have to use .val() instead of .html(). The .val() function also does what it says: it gets you the value of the input field.

To get the text in a textarea you have to use .val() in JQuery. e.g.
var text = $('#textarea_id').val();
console.log(text);
The second line logs it to the console so you can check it works.

setting text in textarea using javascript

I am trying to process the text in textarea [on Facebook group page. 'write post' has one text area] and replace it with new text. This is done using Greasemonkey script
textHolder = document.getElementsByClassName( "uiTextareaAutogrow input mentionsTextarea textInput" )[0];
var vntext=textHolder.value;
var vn2text=Encrypt(vntext);
textHolder.value=vn2text;
So new text is seen in text-area but the when the 'post' button is clicked the new text is not taken instead old text is posted
But if we manually insert at least a character to the processed text then the resulting text is posted after click on post button. So I am not getting why it is directly not taking the new text without inserting the text manually.
There are other events being called in textarea element, but I do not know what they are doing exactly.
So what should be done so that new text will be posted?
DOM for text-area on Facebook page is as follows:
<textarea
class="uiTextareaAutogrow input mentionsTextarea textInput DOMControl_placeholder"
title="Write something..." name="xhpc_message_text" placeholder="Write something..."
onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4ef51acb72eb241587530255').init(JSCC.get('j4ef51acb72eb241587530256'));;JSCC.get('j4ef51acb72eb241587530256').init(["buildBestAvailableNames","hoistFriends"]);JSCC.get('j4ef51acb72eb241587530253').init({"max":10}, null, JSCC.get('j4ef51acb72eb241587530255'));;;});});"
autocomplete="off" style="direction: ltr; "
>
Write something...
</textarea>

Can you link to the page in question?
That page could be tracking that textarea's value in JS or even AJAX-posting it with every keystroke. Clicking the 'post' button might merely tell the page/server to use the last saved version of the text.
Since the GM script changes the textarea value independently of mouse and focus events, the page and/or server tracking mechanism won't be triggered.
So, if you can, find the appropriate JS function and call it after changing the text.
If that's too difficult, try setting the focus to the textarea, then elsewhere and then back to the textarea.
Or try sending a keystroke event to the text area.
Link to the page, or a full-code snapshot of it, for more detailed help.

reload a page without losing field values like in FireFox using javascript

I'm very new to JavaScript and HTML.
I have a simple html form that has some select fields. When the user selects the options from the fields, a function is called that takes the values of the fields, multiples the values against other field values and spits out the results to an input text field named "result".
This is all working great, however I would love a way that instead of outputting the results to a text field, it would output as standard text on the page.
What I did was call the calculate function the tag, within the body, I inserted a document.write(result), then I created a button that calls the calculate function in addition to location.reload().
In Firefox, it works perfectly where it KEEPS the options selected, calculates the results, reloads the page and updates the document.write(result) value on the page.
But in IE or Safari, it resets the select options values to the default settings.
I hope this makes sense and appreciate any help!

how about this:
every time the user selects an option, or makes any sort of a selection, serialize that control, and slap the serialized string to the end of the current window.location, then navigate to it.
also, you will need to add javascript to check the current url, figure out what selection was made, and pro grammatically change the control's values. this way, when the user refreshes the page, the url will contain all of his selections.
got it?

Instead of document.write you could setup an element used specifically to hold the output value much like you do currently with the input element.
In place of the current input element used to output the result..
<span id="calculationResult"></span>
Then to populate that value and avoid reloading the page at all so that your fields maintain current values..
document.getElementById("calculationResult").innerHTML = result;
if you need to append you can always just create text nodes and append to the element which would be preferred anyway.

In order to keep text boxes' content as is, set the button as type="button" and call the calculate function and document.write in onclick. No reload, no mess.