Develop Reference

Clone dynamic content by class

I have a div which shows result of a quotation form. Results changes if user change form value instantly. I want to display or copy the same results of that div to another div or more like a "second version" of that div.I know this below sort of code will work.
$("div1").clone().appendTo("div2");
But it works only for the 1st time page loads. After that it doesn't change the results with the div1 results.
Does anyone have a hint on what to do here?
Many thanks in advance!

Use the onchange event in your html on the form. Then call your code from it somewhat like:
onchange="$('div1').clone().appendTo('div2');"
or
onchange="someJSfuncion();"
also dont forget to delete the old copy. Further information:
https://www.w3schools.com/jsref/event_onchange.asp

You need to setup your event handlers on form changes and then copy the output to other div. Example:
// Original js
(function() {
$('.inp_name').on('change', function() {
$('.original-output .name_text').text($(this).val());
});
})();
// Your js
(function() {
var version = 0;
$('.inp_name').on('change', function() {
version++;
// Don't use clone as your events starts working in cloned code also which you don't expect
//$('.original-output').clone().appendTo('.copied-output');
$('.copied-output').append($('.original-output').html());
$('.copied-output').append(`<div>Version: ${version}</div>`);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: Focus out see text getting change.
<div class="original-form">
Enter text here: <input type="text" class="inp_name" placeholder="enter your name" />
</div>
<div class="original-output">
Entered name: <span class="name_text">Entered Name</span>
</div>
<div class="copied-output">
</div>

How to put a degree symbol in an html input field through javascript

I have a text box as
HTML
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
which works fine as it displays the degree sign perfectly, but when I try to set the value through jquery like
Jquery
$("#lat").val("9°")
Its displaying the entire text instead of the degree symbol.

You can target the value attribute:
$("#lat").attr('value',"101"+String.fromCharCode(176))
it is also better to use .text() to set the text because .val() is used to retrieve the value of an element

You can use HEXCode,
e.g
<a href id="my">Here</a>
<script>
$('#my').click(function()
{
alert('9\xB0');
});
</script>
Also go through this link

$("#test").click(function(){
$("#lat").val("29" + ascii(176))
});
function ascii (a) { return String.fromCharCode(a); }
Updated JSFiddle for further help: http://jsfiddle.net/zkh2of12/1/

Use the special tag besides the input field, it will be clear for the user:
<input type="text" id="lat" placeholder="Latitude °" value=""> °

What about just setting the symbol directly in JavaScript instead of the HTML code?
$(function(){
$("#set").click(function(){
$("#lat").val("°");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
<button id="set">set</button>
If you want to improve those just make a hidden <span> with the html code you like inside and then just pick the html with JavaScript. This will work even for symbols you cannot post in JS

Try this:
$("#lat").attr("val","9"+ascii(176));

Create unique name for <input> in form

Okay, first thing, I had a lot of trouble thinking of a title for this, and also of what to search for in Google. So that may just be me being stupid, but here is what I would like you help with.
I have a form, that has a button that will add additional input fields, but I would like the the name of the field to iterate everytime the button is pressed. E.g. the first time it will be:
<input type="textfield" name="field1" value=""/>
Then the second time it is pressed, it will be:
<input type="textfield" name="field2" value=""/>
I also have a small example of what I currently have here: http://jsfiddle.net/5gh75/14/
Please let me know if you can help me, or if you require more info thanks :)

The best way to handle this is to name them all field[].
When handled by the server-side code, it will build an array for you. For instance, in PHP you would get $_POST['field'][0], $_POST['field'][1] and so on.

For your example:
JQuery
var i=0;
$('span.add').click(function () {
$('<input>').attr({
type: 'textfield',
name: 'program'+i
}).appendTo('#addsoftware');
i++;
});
JSFiddle.
But #Kolink-s answer is much better.

Edit: I just saw the previous posts after sending this. Using an array would definitely be better, and JQuery is always nice :).
Just use some javascript:
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
idx = 0;
function add() {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "textfield");
element.setAttribute("name", "field" . idx);
element.setAttribute("value", "");
idx++;
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<INPUT type="button" value="Add" onclick="add()"/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>
I took this example from: Add more text fields dynamically in new line (html)

Javascript form innerHTML

i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .

There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.

I don't think there is any document.getElementsById function. It should be document.getElementById.

"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/

How do I get the html from a contentEditable div to go inside of a hidden text form element?

I don't believe that you can use the input straight from a content editable div and submit it in a form, so I figured that I could just have a hidden text field and do something like this:
var blog_post = $("#editable_div").html();
$('#hidden_text_area').val(blog_post);
Does anyone know of a way to do this? It is not working with what I have. I thought that maybe the $('#hidden_text_area').val(blog_post); needed to be triggered by an event, but I tried it with a click and it didn't work.
$('#clicker').click(function(){
$('#hidden_text_area').val(blog_post);
})

Try:
$('#clicker').click(function(){
var blog_post = $("#editable_div").html();
$('#hidden_text_area').val(blog_post);
})
Because it does not look like your blog_post variable contains the html content when you click this button.

please check alert($('#hidden_text_area')) is giving object or not . if it is not giving object then it has problem otherwise $('#hidden_text_area').val(blog_post); should work.

Seems to work well for me, however, please be aware that the html in the value attribute will be escaped:
HTML:
<textarea id="content">
<p style="background-color: blue;">Testing</p>
</textarea>
<input type="button" value="hit me" id="btn" />
<div id="parent">
<input type="text" name="testinput" id="inputtest" value="" />
</div>
JS:
$("#btn").click(function () {
var html_contents = $("#content").html();
$("#inputtest").val(html_contents);
});