We Keep Coding

Adding elements to an ordered list on click using jquery

Entering the data in the input field and on clicking the 'Add New' button, element should be added in the list. Here, help me to find out the error
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($(this).data('#nameList'));
console.log(data.length);
});
});
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

Seems like you need smth like:
$(document).ready(function () {
$("#addNew").click(function(){
$("#nameList").append("<li>" + $("#data").val() + "</li>");
});
});

This works:
var dataAdd = [];
$("#addNew").click(function() {
$('#nameList').append('<li>'+$('#data').val()+'</li>');
});

I don't understand what are you doing here...
dataAdd.push($(this).data('#nameList'));
You can access DOM elements with jQuery just referencing css-selector in brackets, like this $('css-selector')
That snippet does the trick:
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var value = $('#data').val();
if(value) {
dataAdd.push(value);
$('#nameList').append('<li>' + value + '</li>');
$('#data').val('');
}
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

You have to append the li with the value of input type text not the button.
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($('#data').val());
$('#nameList').append('<li>'+$('#data').val()+'</li>');
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var htm='<li>'+$('#data').val()+'</li>';
$("#nameList").append(htm);
$('#data').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

jQuery .click() event isn't firing on-click

$("#backButton-1").click(function() {
$("#form-2").empty();
$("#form-1").show();
});
I'm having an issue getting this snippet to run. form-1 is hidden, backButton-1 is created after the end of form-2 and only after form-1 has been hidden. I want backButton-1 to empty out form-2 and unhide form-1 but the .click event isn't firing.
Here's the code:
$(document).ready(function() {
var playersName = '';
var gameName = '';
var playersNameArray = [];
$("#submit-1").click(function() {
playersName = $("#input_players").val();
gameName = $("#input_game").val();
$("#form-1").hide();
gameName = gameName.toLowerCase();
gameName = gameName.charAt(0).toUpperCase() + gameName.substr(1);
function makeArray(string) {
string = string.replace(/\s/g, '');
var array = string.split(",");
for (let i = 0; i < array.length; i++) {
array[i] = array[i].toLowerCase();
array[i] = array[i].charAt(0).toUpperCase() + array[i].substr(1);
}
playersNameArray = array;
}
makeArray(playersName);
function makeScores(array) {
$("#container-1").prepend("<p>Input " + gameName + " scores:</p>");
for (let i = 0; i < array.length; i++) {
var scoreDiv = document.createElement("div");
scoreDiv.className = "score";
scoreDiv.id = "score-" + (i + 1);
var scoreInput = document.createElement("input");
$(scoreInput).attr('type', 'text');
scoreInput.id = "scoreInput-" + (i + 1);
$("#form-2").append(scoreDiv);
$("#score-" + (i + 1)).append("<div class='scoreName'>" + array[i] + "</div>");
$("#score-" + (i + 1)).append(scoreInput);
}
$("#container-1").append(
$("<div class='submitButtonDiv' />").append(
$('<input type="submit" name="submit-2" value="Submit" id="submit-2" />')
),
$("<div class='backButtonDiv' />").append(
$('<input type="button" name="backButton-1" value="Back" id="backButton-1" />')
)
);
}
makeScores(playersNameArray);
});
$("#backButton-1").click(function() {
$("#form-2").empty();
$("#form-1").show();
});
$("#submit-2").click(function() {
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-1">
<form action="/database.php" method="POST" id="form-1">
<div class="input">
<p>Enter player names, separated by commas:</p>
<input type="text" name="input_players" id="input_players">
</div>
<div class="input">
<p>Enter game name:</p>
<input type="text" name="input_game" placeholder="e.g. Smallworld" id="input_game">
</div>
<div class="submitButtonDiv">
<input type="submit" name="submit-1" value="Submit" id="submit-1">
</div>
</form>
<form action="/database.php" method="POST" id="form-2"></form>
</div>

You are saying the button is being created, which means that jQuery cannot add an event listener on load. Either create the listener together where you create the button, or use propagation.
// Create button, add to DOM
$("<div>New div</div>").appendTo("body")
.click(function() {
// Attach click event listener
alert("Works!");
});
// Or using propagation
$("body").on("click", "#test", function() {
alert("Works too!");
});
$("<div id='test'>New div</div>").appendTo("body");
Note that the second approach works irrespective of where you attach the event listener to body, be it before or after creating the new item.
In your case, I suggest:
$("#container-1").append(
$("<div class='submitButtonDiv' />").append(
$('<input type="submit" name="submit-2" value="Submit" id="submit-2" />')
),
$("<div class='backButtonDiv' />").append(
$('<input type="button" name="backButton-1" value="Back" id="backButton-1" />')
)
).on("click", "#backButton-1", function() {
$("#form-2").empty();
$("#form-1").show();
});

Try adding your links at the bottom
and add the following link in your head
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script> <!-- <<<< This ONE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container-1">
<form action="/database.php" method="POST" id="form-1">
<div class="input">
<p>Enter player names, separated by commas:</p>
<input type="text" name="input**strong text**_players" id="input_players">
</div>
<div class="input">
<p>Enter game name:</p>
<input type="text" name="input_game" placeholder="e.g. Smallworld" id="input_game">
</div>
<div class="submitButtonDiv">
<input type="submit" name="submit-1" value="Submit" id="submit-1">
</div>
</form>
<form action="/database.php" method="POST" id="form-2"></form>
</div>
<script type="text/javascript" src="main.js"></script>
</body>

Display one text field on click from a set number of text fields

I have a form where users have 10 text fields. But initially only 1 text field is shown. If the user needs to enter more data they can click on the add one button and then displays the next text field from the maximum of 10.
like so:
Im working with angular.js so I thought about using ng-show to hide & show fields.
<div class="form-group">
<input type="text" class="form-control" name="pointOne" ng-show="pointOne">
<input type="text" class="form-control" name="pointTwo" ng-show="pointTwo">
<input type="text" class="form-control" name="pointThree" ng-show="pointThree">
<span><button ng-click="addOne()">Add One</button></span>
</div>
I am unable to figure out the most effective way to doing this. Any hints, help or suggestions would be great.

Haven't tested it but this is how I would do it:
<div class="form-group" >
<input ng-repeat="i in getNumber(number)" type="text" class="form-control" name="point{{i}}" ng-show="$index<=counter">
<span><button ng-click="addOne()">Add One</button></span>
</div>
And in your controller just add something like this:
$scope.number = 10;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.counter=0;
$scope.addOne= function() {
$scope.counter++;
}

You could easily add elements to the DOM:
function createPetField() {
var input = document.createElement('input');
input.type = 'text';
input.name = 'pet[]';
return input;
}
var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
form.appendChild(createPetField());
});

To go the Angular route, I'd suggest using ng-repeat. Here's a fiddle that might not be exactly what you're looking for, but it shows how to use ng-repeat and you can modify as needed:
Fiddle: https://jsfiddle.net/jvsnao97/5/
<body ng-app="myApp" ng-controller="myController">
<button ng-click="add_input()">Add Input</button>
<br/><br/>
<input type="text" class="form-control" ng-repeat="x in random_array" name="point{{$index}}">
</body>
var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function($scope) {
$scope.random_array = [0]
$scope.add_input = function() {
var i = $scope.random_array.length
$scope.random_array.push(i)
}
}]);
When you want a new <input>, you simply push a new element to $scope.random_array.

Probably good way is to make array of input fields and then ng-repeat them. When user clicks on AddOne, then just push input field in array, and it will be there.

<html>
<head>
<title>jQuery add / remove textbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>

JQuery can be used to add inputs in your addOne() method.
Like so:
var maxInputs = 10;
var currentInput = 0;
function addOne() {
currentInput++;
if (currentInput > maxInputs) {
currentInput = maxInputs;
return;
}
var name = "point" + currentInput;
var $input = $("<input type='text' class='form-control' name='" + name + "' ng-show='" + name + "'>");
$(".form-group").append($input);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<span><button onclick="addOne()">Add One</button></span>
</div>

jquery create dynamic div inside div

I have created Dynamic insert using JQuery. now I can not able to create dynamic div inside div this is my code snippet
<html>
<head>
<title>jQuery add / remove textbox example</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'form-group' + counter)
.attr("class", 'form-group' );
var newTextBoxDiv1 = $(document.createElement('div'))
.attr("id", 'col' + counter)
.attr("class", 'col-md-8' );
newTextBoxDiv.after().html('<label class="col-md-3 control-label">Achievement #'+ counter + ' : </label>');
newTextBoxDiv1.after().html(
'<input type="text" name="achievement' + counter +
'" id="achievement' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
newTextBoxDiv1.appendTo("#TextBoxesGroup")
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#form-group" + counter).remove();
$("#achievement" + counter).remove();
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="form-group1">
<label class="col-md-3 control-label">Achievement #1 : </label><input type='textbox' name="achievement" id='achievement' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
</body>
</html>
that create Dynamic Div like this
<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2"></div>
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div>
but I want to append div that means div inside div and the code should be like this
<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2">
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div></div>

newTextBoxDiv1.appendTo("#col2")

Demo
Jquery
$('#idd').click(function() {
$( this ).append("<div >new div</div>");
});
Html
<div id="idd">
Contgert
</div>

Set the innerHTML of the outer div to contain the HTML for the inner div.
This way you can dynamically generate all the different internal divs you want depending on the situation.

How to show input (name + value) in textarea?

I'm working on this project where I need to have the value of a textarea change when one of the input values in the same form changes.
HTML:
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add" name="product1" />
<input type="text" class="add" name="product2" />
<input type="text" class="add" name="product3" />
<input type="text" class="add" name="product4" />
</form>
The customer is allowed to change the input.class.
The textarea-value should change whenever one of the inputs changes.
The textarea should show something like:
3 x product1
1 x product3
4 x product4
Anybody got an idea?
Thanks in advance,
Joel

<textarea readonly class="overview" id="mytxtarea"></textarea>
$("#product1").blur(function(){
if($("#product1").val()!='')
{
$("#mytxtarea").val('test value');
}
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form .add').on('keyup', function(){
console.log('test');
var string1 = $('#form .product1').val() + ' x product1\n';
var string2 = $('#form .product2').val() + ' x product2\n';
var string3 = $('#form .product3').val() + ' x product3\n';
var string4 = $('#form .product4').val() + ' x product4';
$('#form textarea').val(string1 + string2 + string3 + string4);
});
});
</script>
</head>
<body>
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add product1" name="product1" />
<input type="text" class="add product2" name="product2" />
<input type="text" class="add product3" name="product3" />
<input type="text" class="add product4" name="product4" />
</form>
</body>
</html>

$(".add").keyup(function () {
var app=""
$(".add").each(function () {
if( $(this).val() ) {
var value=$(this).val();
var name=$(this).attr('name');
app +=value+"*"+name+ "\n" ;
}
});
$(".overview").text(app);
});
Watch this.
Hope this will give you some solution.

This will do what you want...
$("input.add").keyup(function() {
var msg = "";
$("input.add").each( function() {
if( $(this).val() ) {
msg += $(this).val() + "x " + $(this).attr("name") + "\n";
}
});
$("textarea.overview").text(msg)
});
I used this with your HTML here: http://jsfiddle.net/XYXpp/

$('input').keyup(function () {
var inputedValue = $(this).val();
var name = $(this).attr('name');
$(".overview").text(inputedValue+name);
});

var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())
will return
['field_name=9&field_name=15&field_name=10']
you will then have to parse the info in your view