Develop Reference

How to copy an input element with its value?

I have simple textboxes generated by AJAX.
<input type='text' id='txt1' name='txt1_nm' />
What I'd like to do, when I press a button. The input is all copied inside a different div with its new value inserted by user.
I use
$('#txt1').html();
but, the value is not copied only the textbox

You need to make use of clone() so that you get the element with its value. Type anything in the textbox in the snippet below and press the Copy button.
//detect the click of the copy button
$('#copyBtn').click(function(){
//get the clonned element
var inputElement = $('#txt1').clone();
//add clonned element to a new div
$('#copiedDiv').html(inputElement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='text' id='txt1' name='txt1_nm' />
</div>
<div id='copiedDiv'></div>
<button id='copyBtn'>Copy</button>
If you want to add multiple cloned items then you will require to change the id of the input element and then append that to the page. You can do like this to achieve it,
//detect the click of the copy button
$('#copyBtn').click(function(){
//get the last input item
var $inputEl = $('input[name="txt1_nm"]:last');
//get the next id number
var num = parseInt( $inputEl.prop("id").match(/\d+/g), 10 ) +1;
//clone and set a new id for this element
var $cloneEl = $inputEl.clone().prop('id', 'txt'+num );
//add clonned element to a new div
$('#copiedDiv').append($cloneEl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='text' id='txt1' name='txt1_nm' />
</div>
<div id='copiedDiv'></div>
<button id='copyBtn'>Copy</button>

$(document).on('click','#myBtn',function(){
value=$('#txt1').val();
$('#myDiv').empty();
$('#myDiv').append($('#txt1').clone());
$('#txt1').val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt1' name='txt1_nm' />
<button type="button" id="myBtn">Click Me</button>
<div id="myDiv"></div>

You can simply use:
$('#txt1').clone()
It will perform a deep clone of that element with all of its content.
NOTE: Cloning an element will also duplicate its ID if it has one.
You should change any ids to classes beforehand.
This is from the documentation:
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

How to change the content of a span depending on the content of a form?

Universal Converter - question #2
Question 1 - How to input the content of a form as a variable?
Hello again. I'm having some more trouble with my converter (see link.) I was wondering how I could change the content of a span depending on what was inside of a form (in this case, looking at the link, the form with the ID of "unit").
How it would work was, the span with the ID of invalidUnit would be called in a function, and the function would be used to change the content of the span to tell the user if the unit they input into the form is valid or not.
The HTML and JavaScript are below.
HTML:
<form>
<input type="text" id="unit">
</form>
<br>
<button class="btn btn-sm btn-danger" id="confirm">Confirm</button>
<br>
<br>
<h4>Pick two units of <span id="unitType">[?]</span> you want to convert.</h4>
<h5><span id="invalidUnit">[?]</span></h5>
JavaScript:
function invalidUnit() {
var unitInput = document.getElementById("unit").value;
var invalid = document.getElementById("invalidUnit");
if (unitInput.value == "temperature") {
invalid.innerHTML = ("temperature is a valid unit");
}
}
So, how would I make this work? It seems like I have it right, but...

change this:
var unitInput = document.getElementById("unit").value;
to this:
var unitInput = document.getElementById("unit");
Also, I think you'll want to add onClick="invalidUnit();" to your button.
Working JSBin

How to Input and Output Javascript?

Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(

To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}

Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/

var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body

Pass Info to form input when link is clicked

I have some html that looks as so:
<h3 class="basic left-top-border-radius">Basic<br /> 500<span>$25</span></h3>
<a class="signup colorbox" href="#text-signup-form">More Info</a>
When More Info is clicked a lightbox pops up with a simple info request form. Here is my problem. I would like when the link is clicked to have the text of the h3 header passed to a form input field that is hidden so I know which plan they clicked on for more info.
The input looks like so:
<input type="text" class="cat_textbox" id="CAT_Custom_440761" name="CAT_Custom_440761" maxlength="1024" />
How would I do this using jQuery? (I thought of using jQuery .text() method but I read that does not work with forms and I do not know how to pass the h3 text anyway.
NOTE There are multiple h3 elements on the page.

You can do the following with this code.
$('.signup').click(function(){
var planTitle = $('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});
As you click on the button it will search for the h3 tag (would be better to attach an ID to the h3 tags) grab the text of that element and insert it into the value of the input field.
If you aren't able to attach an ID to the h3 tag you can search for the prev instance of h3 and take the text from that.
$('.signup').click(function(){
var planTitle = $(this).prev('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});

You can try this:
$('a').click( function() {
var text = $(this).parent().find('h3').text();
$(this).parent().find('.cat_textbox').val(text);
})

perhaps you can use this code
<form action="test1.asp" id="testform">
<input type="hidden" id="test3" value="">
<input type="BUTTON" id="submit" onclick="modify_value()"/>
</form>
<script type="text/javascript">
function modify_value()
{
var hidden_field = document.getElementById('test3');
hidden_field.value = 'testvalue';
document.getElementById("testform").submit();
}
</script>

Get the value of an input field within multiple divs when clicking a submit button

How would I go about correctly writing this so that the var input is the value of the content input field within the .overlay div when the submit button is pressed? Keep in mind that there's several .overlay divs, so it needs to be that separate div.
I know how to make it work assuming only 1 div exists, but this isn't the case. My jQuery is as follows:
$('.button').click(function() {
var input = $(this).parents('.overlay')$(input[name=content]).val();
});
My HTML structure (assume this div is duplicated several times on the page):
<div class="overlay">
<input name="content" value="value">
<input type="submit" class="button" value="submit">
</div>

$('.button').click(function() {
var input = $(this).parent().find("input[name='content']").val();
});
should work.
Or, if you can rely on that exact structure:
$('.button').click(function() {
var input = $(this).prev().val();
});

like this
$('.button').click(function() {
var input_val = $(this).parent().find('input:first').val();
alert(input_val)
});
here is ia working demo