We Keep Coding

Iterating over dynamically generated input field ids and using keyup to get their values in a separate input field

The mandatory div id gets different numbers of inputs field displayed in it dynamically. Each input field starting from the first gets an id attr1, then attr2,..attr[n]. I need a way to get this into an array that gets the value of each input field with keyup and puts them into a separate input field with id detail.
This code works but returns undefined in some case when the hard coded input field ids exceed the generated input field ids. Thanks.
<div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh-->
<div id="mandatory">
</div>
</div>
var total = '#attr1, #attr2';
$("#attributes").on('keyup', total, function(){
update();
})
function update() {
$("#detail").val($('#attr1').val() + "," $('#attr2').val());
}

If I understood right your question I think you're looking for something like that:
var fields = $("#mandatory").find("input"),
ids = [];
fields.each(function(){
$(this).on("keyup", function(){
var val = "";
ids = [];
fields.each(function(){
val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");
ids.push($(this).get(0).id);
});
$("#detail").val(val);
console.log(ids)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />

I'm not sure if this is what you're looking for, but I think it'll take you down the right path. In this example, any time a text input field is generated, an input event handler is attached to it that changes the value of a main textarea. If this isn't quite what you're looking for, please let me know and I'll be happy to try to work it out more.
document.getElementById('adder').onclick = function() {
var dynamicTextbox = document.createElement('input');
dynamicTextbox.setAttribute('type', 'text');
dynamicTextbox.setAttribute('class', 'dynamicText');
dynamicTextbox.addEventListener("input", function() {
var allTextboxes = document.getElementsByClassName('dynamicText');
var allValues = '';
for (var i=0; i < allTextboxes.length; i++) {
allValues += allTextboxes[i].value;
}
document.getElementById('detail').value = allValues;
});
document.getElementById('textboxes').appendChild(dynamicTextbox);
}
<textarea id="detail"></textarea>
<input id="adder" type="button" value="Add Text Field" />
<div id="textboxes"></div>

Syntax for Displaying name of a textbox with alert

How can i show the name "First Textbox Name", I have tried a multitude of things but nothing seems to work.
This is the text box among other textboxes.
<td>FirstTextbox Name:
<input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td>
</td>
<script>
var x = document.getElementById("box1").WhatwouldGohere?
alert(x);
</script>

Textboxes don't have a closing tag and therefore cannot have any innerHTML.
But, you can access other aspects of a textbox. Also, don't use inline HTML event attributes (onclick, onmousover, etc.). Even though you see them used everywhere, it's only because a lot of new JavaScript folks pick up bad habits. There are many reasons not to use them.
// Get a reference to the textbox
var tb = document.getElementById("box1");
// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);
function calculate(){
// You can access HTML attributes as object properties:
console.clear();
// To get the content of the parent element, use the parentElement property
// Then, access the textContent of that element to only get text (and not
// nested child elements). Finally, strip off any leading or trailing
// spaces from that value (if desired) with .trim()
var parentText = this.parentElement.childNodes[0].textContent.trim();
alert("The text that preceeds the textbox is: " + parentText);
console.log("The name of the textbox is: " + box1.name);
console.log("There are " + this.value.length + " characters in the box.");
console.log("The value of the box is: " + this.value);
}
<td>FirstTextbox Name:
<input id="box1" name="box1" class="nosonly" type="text">
</td>
But, your question has asked about the textbox's "label" and it turns out that there is actually a <label> element that you can and should use because it creates a more accessible UI and makes this even easier:
// Get a reference to the textbox and the label
var tb = document.getElementById("box1");
var lbl = document.querySelector("label[for=box1]");
// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);
function calculate(){
// You can access HTML attributes as object properties:
console.clear();
alert("The text that preceeds the textbox is: " + lbl.textContent);
console.log("The name of the textbox is: " + box1.name);
console.log("There are " + this.value.length + " characters in the box.");
console.log("The value of the box is: " + this.value);
}
<td>
<label for="box1">FirstTextbox Name:</label>
<input id="box1" name="box1" class="nosonly" type="text">
</td>

Well, you do a basic mistake which many people does having no experience with the DOM model. Keep in mind that the code should be executed after the DOM is initialised, so if you want to show the name of the textarea do the following as it's visible that you are using jQuery:
<td>
<label>Label for Box 1</label>
<textarea id="box1"></textarea>
</td>
<script>
$(function() {
alert("My box name is "+ $('#box1').prevAll('label').html());
});
</script>
if no label tag (which is not very clever BTW):
<td>FirstTextbox Name:
<input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td>
</td>
<script>
$(function() {
alert("My box name is "+ $('#box1').parent().text());
});
</script>
Your initial code was showing that you are using jQuery.
This is a simple representation of your html combined with the code above:
alert($('<div>').html('<td>FirstTextbox Name: <input id="box1" name="box1" class="nosonly" type="text" /></td>').find('#box1').parent().text());
alerts FirstTextbox Name:

Try this
<script>
function calculate() {
var x = $('#box1').val();
alert(x);
}
</script>

<script>
function calculate() {
var x = $('#box1').attr('name')
alert(x);
}
</script>
That would alert the name of your textbox.
Or given your edit you could do:
<script>
function calculate() {
var x = document.getElementById("box1").getAttribute('name');
alert(x);
}
</script>

How to Pass a value to input field through javascript

My Question : A value which is passed by an id is showing in the input box. but i can not see that value in the html source code section.
This is my input field In which i am passing a value through a cookie.
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City">
What i am doing is: I have a drop down of cities. when i click on the city. i am setting a cookie with the name of scity.
$("#cuto li").click(function () {
autoValuenew = this.id; // console.log(autoValuenew);
document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});
After that ..
I can access the value of city but i can not see that value in the html source code.
When i change my field type text to hidden type i can see the value in the htmlsource code.
I do not understand what is going here with these two types. or if i am doing something please tell where i am doing wrong. or if there is another way to do this.

Kindly look this code I hope it helps
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City"/>
<ul id="cuto">
<li type="button" id="cuto">test</li>
</ul>
here is your JQuery
$("#cuto li").click(function () {
debugger;
autoValuenew = this.id; // console.log(autoValuenew);
$.cookie("scity", "test value"); // Setting cookie value
//document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});

element.setAttribute('value', myValue);
I think you should not just change the value change it in by changing attribute value.

jquery dynamically print out value of input

I'm working on a dynamic calculation program to practice jquery, but so far it's not going well, I can store the values in a variable, of course (see code here).
<form>
Tafeltje van:
<input type="number" name="tafel" id="tafel" />
Aantal:
<input type="number" name="aantal" id="aantal" />
</form>
<div id="output"></div>
and the JS:
var tafel = $('#tafel').val();
var aantal = $('#aantal').val();
How would one be able to print out these values in output while the user is typing in the text fields?

You can bind your code with keyup or input event of the inputs. Then, once you have got the values, you can use either text() or html() to display the values in #output div in whatever format you want.
// $("input").on("keyup", function(){
$("input").on("input", function(){
var tafel = $('#tafel').val();
var aantal = $('#aantal').val();
$("#output").text("tafel: " + tafel + " aantal: "+aantal);
});//keyup

How can do I enable onclick to clear an input field? Jquery

$('<p><input type="text" class = "class-'+ (++i) +'" onclick="'(+ this.value = ''; +)'" value="Enter Choice #' + i + '"/></p>')
I'm not sure if this is the correct syntax or not, but whatever I am using is not working. ANy help? Thanks

HTML:
<input type="text" class="class-1" value="Enter Choice #1">
<input type="text" class="class-2" value="Enter Choice #2">
JQUERY:
$(document).ready(function() {
$('input[class^="class-"]').focus(function() {
var $input = $(this);
if($input.val() == $input.data('default_val') || !$input.data('default_val')) {
$input.data('default_val', $input.val());
$input.val('');
}
});
$('input[class^="class-"]').blur(function() {
var $input = $(this);
if ($input.val() == '') $input.val($input.data('default_val'));
});
});
Above code clear the value when the textfields gets focus and adds the default value when textfield is empty on lost focus (blur).
Updated fiddle: http://jsfiddle.net/K3Sx7/4/
EDIT: updated code to conform question.

Add an id to your input field:
<input id="myinput"...
Then add this code in your $(document).ready(... call:
$('#myinput') // get element whose id is 'myinput'
.click(function() { // bind a click handler
$(this).val('') // clear field
.unbind('click'); // unbind click handler to avoid field being cleared again
})

I think you can do it without jQuery
try this
<p><input type="text" class = "class-1" onclick="this.value='';" value="Enter Choice # 1"/></p>

To do it inline like that, you need to keep the this.value='' as part of the string:
$('<p><input type="text" class = "class-'+ (++i) +'" onclick="this.value=\'\'" value="Enter Choice #' + i + '"/></p>');
Notice the " onclick="this.value=\'\'", where the single quotes are escaped to keep the main string from being terminated.
Here's a working example for you.

var i = 0;
$('<input type="text" class="class-'+ ++i +'" value="Enter Choice #' + i + '"/>')
.click(function(){
this.value = '';
})
.wrap('<p />')
.parent()
.appendTo('#container');
http://jsfiddle.net/jruddell/FVqjQ/