Develop Reference

appendChild + createElement is not working

The following block of code is not working.
instead of creating a list element with the text thats coming from the input, it just creates a text and appends it without creating a list element.
Can someone see where my mistake is?
var button = document.querySelector('#btn');
button.addEventListener('click', handleClick);
function handleClick(e) {
e.preventDefault();
var name=document.querySelectorAll('#item');
for (let i=0; i<name.length; i++) {
var x=name[i].value;
var item= document.createElement('li')
item.className="list-group-item";
var text= document.createTextNode(x);
var addList=item.appendChild(text);
var ul=document.getElementById('items').appendChild(addList);
console.log(document.getElementById('main').childNodes)
name[i].value='';
}
}
<div class="container">
<div id="main" class="card card-body">
<h2 class="title ">Create Contact
</h2>
<form id="addForm" class=" mb-3">
<input type="text" class="form-control mr-2 my-3" id="item" placeholder="First Name" required>
<input type="text" class="form-control mr-2 my-3" id="item" placeholder="Last Name" required>
<h6 id='warning' style="display:none">All fields are required.</h6>
<button id="btn" class="btn btn-dark">Create</button>
</form>
<h2 class="title">Items</h2>
<ul id="items" class="list-group">
<li class="list-group-item">x</li>
<li class="list-group-item" >y</li>
<li class="list-group-item" >z</li>
<li class="list-group-item" >g</li>
</ul>
</div>
</div>

var name=document.querySelectorAll('#item');
.querySelectorAll() is for getting more than one element.
# means id.
ID's must be unique within a document.
A button's default type is submit, which you don't want here. A
regular button is what you need.
See additional HTML, CSS, and JavaScript comments inline below:
// Get references to the elements you'll need just once:
let warning = document.getElementById("warning");
let fName = document.getElementById("fName");
let lName = document.getElementById('lName');
let list = document.getElementById("items");
// Set up event handler
document.getElementById("btn").addEventListener('click', handleClick);
function handleClick(){
// Check to see if required fields have data
if(fName.value == "" || lName.value == ""){
warning.classList.remove("hidden"); // Invalid! Show message
return; // Exit function
} else {
warning.classList.add("hidden"); // Valid! Hide message
}
// There's only two elements to worry about and each has a unique id
// so just do the work on each. A loop is overkill here.
// First name
var li= document.createElement('li')
li.className="list-group-item";
li.textContent = fName.value; // No need for a text node. Just set the text content
items.appendChild(li);
fName.value = "";
// Last Name
li= document.createElement('li')
li.className="list-group-item";
li.textContent = lName.value;
items.appendChild(li);
lName.value = "";
//console.log(document.getElementById('main').innerHTML)
}
/* CSS does all the layout and styling */
#warning { font-weight:bold; color:red; }
.hidden { display:none; }
<div class="container">
<div id="main" class="card card-body">
<h2 class="title ">Create Contact
</h2>
<form id="addForm" class=" mb-3">
<input type="text" class="form-control mr-2 my-3" id="fName" placeholder="First Name" required>
<input type="text" class="form-control mr-2 my-3" id="lName" placeholder="Last Name" required>
<!-- You need a regular button here. Not the default type, which is a submit. -->
<button type="button" id="btn" class="btn btn-dark">Create</button>
<!-- Heading elements (h1...h6) are to create sections of a document. You can't
have section 6 unless you've already had sections 1 - 5. Don't use heading
tags because of the way they make the text look. Style is CSS's job. -->
<div id='warning' class="hidden">All fields are required.</div>
</form>
<h2 class="title">Items</h2>
<ul id="items" class="list-group">
<li class="list-group-item">x</li>
<li class="list-group-item" >y</li>
<li class="list-group-item" >z</li>
<li class="list-group-item" >g</li>
</ul>
</div>
</div>

How do I insert Data Into database with many Input which has same name?

hello friends I have a form field in which I want to insert data which has four field which are customer_id , field_name1 ,field_name2, field_name3 ,
The question is I want to insert data which has many inputs but same input name like field_name1 field_name2 field_name3 , firstly there is no input but when I click on a button add partner details then these inputs shows by javascript .
like field_name1,field_name2,field_name3 ten times can repeat , I want to insert data in database according to there numbers with same customer_id , but different field name , below is my code , hope you understand it .
here is my code
<?php
$conn=mysqli_connect("localhost","root","","satya");
if(isset($_POST['submit'])){
$customer_id=$_POST['customer_id'];
for ($ix=0; $ix<count($_POST['field_name1']); $ix++)
{
$field_data = array(
'field_name1' => $_POST['field_name1'][$ix],
'field_name2' => $_POST['field_name2'][$ix],
'field_name3' => $_POST['field_name3'][$ix],
);
$sql="INSERT INTO customer(customer_id,details1,details2,details3) VALUES('$customer_id','$field_name1','$field_name1','$field_name1')";
$result=mysqli_query($conn,$sql);
if($result){
echo "data has been inserted";
}
else{
echo "data could not be inserted";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form action="" method="post">
<div class="form-group">
<div class="row" style="margin-top: 20px">
<div class="col-md-4" ></div>
<div class="col-md-4">
<label for="customer_id">Customer ID </label>
<input type="text" class="form-control" name="customer_id" placeholder="customer_id">
</div>
<div class="col-md-4"></div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-3">
<label for="details1">details1 </label>
</div>
<div class="col-md-3">
<label for="details2">details2</label>
</div>
<div class="col-md-3">
<label for="details3">details3</label>
</div>
<div class="col-md-3">
<div>
Add Partner Details
</div>
</div>
<div class="partner_wrapper" >
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary" name="submit">Submit</button>
</div>
<div class="col-md-4"></div>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_partner'); //Add button selector
var wrapper = $('.partner_wrapper'); //Input field wrapper
var fieldHTML = '<span class="row"><div class="col-md-3"><input type="text" class="form-control" name="field_name1[]" value=""/></div><div class="col-md-3"><input type="text" class="form-control" name="field_name2[]" value=""/></div><div class="col-md-3"><input type="text" class="form-control" name="field_name3[]" value=""/></div><button type="button" href="javascript:void(0);" class="remove_button btn btn-primary" title="Remove field">Remove</button></span>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('span').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>

Give the repeating fields array-style names:
<input type="text" name="field_name1[]">
PHP will collect the inputs into arrays, so $_POST['field_name1'] will be an array. Then you can loop over them:
foreach ($_POST['field_name1'] AS $index => $field1) {
$field2 = $_POST['field_name2'][$index];
$field3 = $_POST['field_name3'][$index];
// now you can insert all these values into the DB
}

Replicating and differentiating portions of a form

UPDATE:
Using the code that colecmc provide(Thank you!!) I updated the codepen. I like how the date.now is added, but I would like to just do a an incremental increase. Im not sure how to apply that to this function I tried zer00ne's index incremental but am doing something wrong.
let cloneList = [],
index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
index++;
clonedNode.id = index+1;
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
Im having an issue with my form. Initially I had two forms on the page. However on submit only the info from the first form was written. I tried combining the forms. Now if i fill out the campaign and component inputs and submit it writes to the correct tables(good!). However the component section is supposed to be replicated. A campaign can have as many components as the user wants. I am using cloneNode and before I combined the table it added more component sections. Now that they are combined the function no longer works. Im confused if this is even the right approach for what Im doing. I included a copdpen that shows a stripped down version of what Im trying to do.
Basically I want to be able to press add component, add as many new components as I'd like fill them out and have then all written as records to the db. I need a way to differentiate all the clones (new ids or names?)
codepen: https://codepen.io/anon_guy/pen/VMZWWW?editors=1010
HTML:
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>
JS:
document.getElementById('launch').onclick = function() {
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
container.appendChild(clonedNode );
}

You will want to try something like this before appending to the container clonedNode.id = Date.now();
That will provide a way to differentiate all the clones by giving a unique id. You can take it a step further like this:
let cloneList = [];
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
clonedNode.id = Date.now();
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>

This is the closest I came to what I believe is your way of thinking by looking at your code. (I also removed some unnecessary steps in your code to make it a little bit cleaner). This is for if you must have different names and ID:s on your inputs. However, if you can manage to have the same for both (i.e. component_0, other_0 etc.), you can remove the "names" array and the "names" forEach.
When you want to add an input to your addon-div, just add the ID (and name if you decide to keep it), without the "_0", to the array/s as in the example.
Change the name to "otherName_0" and ID to "otherID_0" in your html and this should work.
var i = 1;
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var ids = ['componentID', 'otherID'];
var names = ['componentName', 'otherName'];
ids.forEach(function(id) {
var currentInput = clonedNode.querySelector(`#${id}_0`);
currentInput.id = `${id}_${i}`;
});
names.forEach(function(name) {
var currentInput = clonedNode.querySelector(`input[name=${name}_0]`);
currentInput.name = `${name}_${i}`;
});
container.appendChild(clonedNode);
i++;
}

Form data not showing after post in AngularJS

I am trying to post a form data but the content are not updated on the UI.
The following code is working it does post the data but the tags are not updated in the {{tag.Title}}.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var new1 = data;
$scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};
<div class="row" data-ng-repeat="tagsByType in consultantCv.TagsbyTypes" ng-init="init('tag',2000)">
<div class="col-md-12">
<hr />
<h2>
<i class="icons8-{{tagsByType.CssClass}}" aria-hidden="true"></i>{{tagsByType.Title}}
</h2>
<div class="tags">
<div class="input-group" ng-controller="consultantController">
<div ng-repeat="tag in tagsByType.Tags" class="tag label label-success">
{{tag.Title}}
<a class="close" href ng-click="removeTag(tag)">×</a>
</div>
<form ng-submit="saveTag(Title,tagsByType.Id)" role="form">
<input type="text" ng-model="Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>
</div>
</div>
</div>
</div>

Push your data as object with same property name.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var newData = {
Title : data,
}
$scope.consultantCv.TagsbyTypes[0].Tags.push(newData);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};

Found the issue was that tagsType was not passed to the controller.
Fixed it by the following code
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(result){
TagTypeId.Tags.push(result);
$scope.consultantCv.TagsbyTypes.Tags.push(newData);
//$scope.consultantCv.TagsbyTypes[0].Tags.push(new1);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
};
<form ng-submit="saveTag(tag.Title,tagsByType)" role="form">
<input type="text" ng-model="tag.Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>

Dynamically adding form fields until a certain value is entered in the form field

I need a group of form fields to dynamically be added if a user does not enter the minimum required value.
So I need 3 years living history for a residential address. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered.
The html looks like this
<!-- Current address-->
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label">Current Home Address</label>
<div class="col-sm-2">We need 3 years living history. Keep adding previous home addresses until you reach a minimum of 3 years history.</div>
<div class="col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton1"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The hidden Current address template containing the Current address fields and a Remove button, this gets added when a user clicks "add" on the form group above -->
<div class="form-group hide" id="homeTemplate">
<div class="row">
<label class="col-md-4 control-label">Previous Address</label>
<div class=" col-SM-offset-2 col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
The javascript which currently handles dynamically adding and removing the form group manually looks like this
$(document).ready(function() {
// The maximum number of options
var MAX_OPTIONS = 20;
$('#custom')
.formValidation()
// Add button click handler
.on('click', '.addButton1', function() {
var $template = $('#homeTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$about_st = $clone.find('[name="about_you_address-st[]"]')
$about_sub = $clone.find('[name="about_you_address-sub[]"]')
$about_city = $clone.find('[name="about_you_address-city[]"]')
$about_state = $clone.find('[name="about_you_address-state[]"]')
$about_post = $clone.find('[name="about_you_address-post[]"]')
$about_dur = $clone.find('[name="about_you_address-duration[]"]');
// Add new field
$('#custom')
.formValidation('addField', $about_st)
.formValidation('addField', $about_sub)
.formValidation('addField', $about_city)
.formValidation('addField', $about_state)
.formValidation('addField', $about_post)
.formValidation('addField', $about_dur);
})
// Remove button click handler
.on('click', '.removeButton1', function() {
var $row = $(this).parents('.form-group'),
$about_st = $row.find('[name="about_you_address-st[]"]')
$about_sub = $row.find('[name="about_you_address-sub[]"]')
$about_city = $row.find('[name="about_you_address-city[]"]')
$about_state = $row.find('[name="about_you_address-state[]"]')
$about_post = $row.find('[name="about_you_address-post[]"]')
$about_dur = $row.find('[name="about_you_address-duration[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#custom')
.formValidation('removeField', $about_st)
.formValidation('removeField', $about_sub)
.formValidation('removeField', $about_city)
.formValidation('removeField', $about_state)
.formValidation('removeField', $about_post)
.formValidation('removeField', $about_dur);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length >= MAX_OPTIONS) {
$('#custom').find('.addButton1').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length < MAX_OPTIONS) {
$('#custom').find('.addButton1').removeAttr('disabled');
}
}
});
});
Thank you so much.

For starters you have id's with [] in them eg 'about_you_address-duration[]'. You can't do that. It's not unique
Add some javascript
function checkTimeTotal()
{
// Calculate total times
totalDays = 0;
lastDate = new Date.now();
$('[name="about_you_address-duration[]"]').each(function() {
// get days between now and last date
thisDate = $(this).val(); // Turn this into a date
totalDays += (difference between 2 dates);
lastDate = thisDate;
});
if (totalDays < (3 * 365)) {
// Add more options using your other code
}
}
// Need to call this again when you add the new form elements in the above code
$('[name="about_you_address-duration[]"]').off('change').on('change', checkTimeTotal());
Get difference between 2 dates in javascript? - this will get the days between 2 dates