when I clone a div, I'd like the event "delete_row_sticker" to be cloned too but this isn't the case, I don't understand why.
html:
<div id="row_sticker_0" class="row mt-10 justify-content-around">
<div class="col-3">
<input type="text" id="width_sticker_0" name="width_sticker_0" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="length_sticker_0 name="length_sticker_<?= $var?>" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="quantity_stickers_0" name="quantity_stickers_0" class="form-control">
</div>
<div class="col-3">
<div id="delete_0" value="0" name="delete_0" class="hide delete_row_sticker">RAZ</div>
</div>
</div>
<div id="add_row_sticker" class="col-12">
<div><i class="fa-solid fa-plus"></i></div>
</div>
jquery to clone the div "row_sticker_0":
$(document).ready(function(){
var i = 1;
$("#add_row_sticker").click(function(){
var row_sticker_id = 'row_sticker_' + i;
$("#row_sticker_0").clone().appendTo("#sticker_added").prop('id', row_sticker_id);
$('#'+row_sticker_id +' input').each(function(value) {
value.value = "";
value.id += '_'+ i;
value.name += '_'+ i;
});
$('#'+row_sticker_id +' #delete_0').each(function(value) {
value.id = $('#'+row_sticker_id +' #delete_0').attr('id').slice(0,6);
value.id += '_'+ i;
});
i++;
});
});
jquery to delete a row:
$(document).ready(function(){
$(".delete_row_sticker").on('click', function() {
var index = $(this).attr('id');
index = index.slice(7, 8);
$('#row_sticker_' + index).remove();
});
});
Related
***<!DOCTYPE html>
<html lang="en">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /css/bootstrap.min.css" rel="stylesheet"/>
<div id="order-details-booking">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-14">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
<div id="order-details-booking2">
<blockquote>Self-order Menu</blockquote>
<div class="form-holder col-xs-1">
<div class="input-field col s4">
<input type="text" id="item-" placeholder="Item Code"/>
</div>
<div class="input-field col s2">
<input type="text" id="item-code" placeholder="Qty" />
</div>
<div class="input-field col s5">
<input type="text" id="item-code" placeholder="Remarks" />
</div>
<div class="col s1">
<i class="material-icons remove">- remove</i>
</div>
</div>
<div class="form-holder-append"></div>
<div class="row">
<div class="col-xs-4">
<i class="material-icons add">+ add</i>
</div></div>
</div>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7 /js/bootstrap.min.js"></script>
<script>
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form1-holder-append');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
</script>***
webpage contain 2 form holder, when ever i click add button the action should be performed to each holder separately, but now the if we press add button, the it add form to both form holder.I shared the code in above, I hope I may get help as soon as possible, Thank for help..
********It looks like your post is mostly code; please add some more details.
if you only have two formholders you can solve this by useing unique classes.
var id_count = 1;
$('.add1').on('click', function() {
var source = $('.form-holder1:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count;
});
clone.appendTo('.form-holder-append1');
id_count++;
});
//button for add second holder
var id_count2 = 1;
$('.add2').on('click', function() {
var source = $('.form-holder2:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
return val + id_count2;`enter code here`
});
clone.appendTo('.form-holder-append2');
id_count++;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
if you have a dynamic amount of formholders you should use a each() function and count the formholders and each element inside with eq(). This results in only one function for all formholders, independently how many.
I create table add row Dynamically but my output be 3 not be 1
is it because of I use div class and not use table(tr & td) ?
example
enter image description here
This is My javascript
<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$("#add").on("click", function () {
var newRow = $("div.rounded");
var cols = "";
cols += '<label>Paket </label><input type="text" class="form-control col-md-5" name="paket"><div class="invalid-feedback">Input paket bosz!' + counter + '</div></div>';
cols += '<label>Quantity </label><input type="text" class="form-control col-md-5" name="quantity"><div class="invalid-feedback">Input Quantity!' + counter + '</div></div>';
cols += '<label>Biaya </label><input type="text" class="form-control col-md-5" name="biaya"><div class="invalid-feedback">Input Biaya' + counter + '</div></div>';
newRow.append(cols);
$("div.rounded").append(newRow);
counter++;
});
$("div.rounded").on("click", function (event) {
$(this).closest("form-group").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
This My View
Paket
Input paket bosz!
<div class="col-4" style="margin-right: -290px;">
<div class="form-group rounded">
<label class="ulang">Quantity </label>
<input type="text" class="form-control col-md-5" name="quantity">
<div class="invalid-feedback">
Input Quantity!
</div>
</div>
</div>
<div class="col-4" style="margin-right: -290px;">
<div class="form-group rounded">
<label class="ulang">Biaya </label>
<input type="text" class="form-control col-md-5" name="biaya">
<div class="invalid-feedback">
Input Biaya
</div>
</div>
<br><br><br> <!-- pembatasan antara add order now -->
</div>
This has been driving me nuts for a few days and i've tried multiple different ways of tackling it. But for some reason it won't remove the element. Can anyone shine some light?
My goal is to on click add the inputed markup then on click of 'remove' remove the whole element.
HTML Mark Up
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Jquery
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
$('body').on('click', '.remtest' function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
I've tried different methods, each method failing.
$(this).closest("p").remove();
and
$('.remtest').on('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Don't dont <p> as a "container" for your code. I switched out your <p> with <div class="container"> and now your code works.
demo
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
Use $(this).closest('.container').remove(); and not $(this).parent('.container').remove(); to get the outer "container".
$(function() {
var test = $('#p_test');
var i = $('#p_test .container').length + 1;
$('#addtest').on('click', function() {
$('<div class="container"><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i + '" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><div>').appendTo(test);
i++;
});
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<div class="container">
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</div>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Here you go.. you were trying to remove the wrong element
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div></p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.input-file-container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
At first, just do not use jquery.
The second thing is that plain javascript is not hard and easy to use.
Therefore you can find how to do the things you want with javascript on the internet.
function GetId(id) {
return document.getElementById(id);
}
const button = GetId("addtest");
button.addEventListener("click", Add);
var id = 0;
function Add() {
files.innerHTML = files.innerHTML +
`<div id="`+ id +`">
<br>
<div class="input-file-container">
<label for="p_test" class="input-file-trigger">
Select a file...
<input type="text" id="p_test" name="p_test_" value=""class="input-file">
</label>
<p class="file-return">
</p>
<button class="remtest" onclick="Remove('`+ id +`')">
Remove
</button>
</div>
<br>
</div>`;
id++;
}
function Remove(id) {
const files = GetId("files")
files.removeChild(GetId(id));
}
<div id="p_test">
<div>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<div class="file-return" id="files"></div>
</div>
</div>
<button class="btn--add" id="addtest">Add</button>
Can someone help me get the values of the firstName and the lastName from a paragraph that I click on so I can display them in another div. I only managed to get the whole text from the paragraph that I click on, but i need the values of the firstName and the LastName. Below is the commented code that I need help with. Thanks in advance.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
// $('#contacts').on('click', 'p', function (e) {
// $("#show-contact").show();
// $("#show-contact h2").text(newContact.firstName);
// $(".first-name").text(newContact.firstName);
// $(".last-name").text(newContact.lastName);
// });
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>
Wrap firstName and lastName with anchor tag (or etc) and get it over with this tag:
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
$(document).on('click', '.para',function(){
var fn = $(this).find('.fn').text();
var ln = $(this).find('.ln').text();
$('#show-contact').append('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // Add
//$('#show-contact').html('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // update
//console.log("first name is: " + fn + " last name is: " + ln);
});
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: <a class="fn">' + newContact.firstName + '</a> Last Name: <a class="ln">' + newContact.lastName + "</a></p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
// $('#contacts').on('click', 'p', function (e) {
// $("#show-contact").show();
// $("#show-contact h2").text(newContact.firstName);
// $(".first-name").text(newContact.firstName);
// $(".last-name").text(newContact.lastName);
// });
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
</div>
</div>
</div>
</div>
One possible solution is to extract firstname and lastname using substr as follows.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
$('#contacts').on('click', 'p', function (e) {
// Get current para's text
var txt = $(this).text();
// pre-define labels present in the text
var fnameLabel = 'First Name: ';
var lnameLabel = 'Last Name: ';
// define length of the labels
var fnameLabelLen = fnameLabel.length;
var lnameLabelLen = lnameLabel.length;
// define Index positions of the labels
var fnameLabelIdx = txt.indexOf(fnameLabel);
var lnameLabelIdx = txt.indexOf(lnameLabel);
// Get First Name value by calculating the Index position
// between labels first name and last name
var firstName = txt.substr(fnameLabelIdx+fnameLabelLen, lnameLabelIdx-fnameLabelLen);
// Get Last Name by calculating Index positions
// between lastname label and end of para
var lastName = txt.substr(lnameLabelIdx+lnameLabelLen, txt.length-lnameLabelLen);
$("#show-contact").show();
$("#show-contact h2").text(firstName);
$(".first-name").text(firstName);
$(".last-name").text(lastName);
});
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>
You can do this with regex.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
$("#show-contact").hide();
$('#contacts').on('click', 'p', function (e) {
var name = $(this).html();
var fname = name.match(/(?<=First Name: ).*?(?= Last)/);
var lname = name.match(/(?<=Last Name: ).*$/);
$("#show-contact").show();
$("#show-contact .first-name").html(fname);
$("#show-contact .last-name").html(lname);
});
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
#contacts>li:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>
when i click on span remove address it removes it from ui but not from the list and the printed value of removeItem is an empty string "".
and how can i pass the stringList to input value="" with id clientAdd without showing it on the input .
var stringList = [];
$("#clientAdd").keypress(function(e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a>");
stringList.push(this.value);
this.value = "";
console.log(stringList);
$(document).on("click", ".removeAddress", function() {
var removeItem = $(this).parent().parent().val();
console.log(removeItem);
stringList.splice($.inArray(removeItem, stringList), 1);
$(this).parent().remove();
console.log(stringList);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<label>Address *</label>
<div class="target"></div>
<input type="text" id="clientAdd" name="address" value="" class="form-control required">
</div>
</div>
</div>
Try this
Its parent text not a parent of parent .so you need get the text value of the parent use with $(this).parent().clone().children().remove().end().text() .It will get the parent text only .end() documentation
After removing clicked element .you are create the array using remaining removeddress via map function
var stringList = [];
$("#clientAdd").keypress(function(e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a><br>");
stringList.push(this.value);
this.value = "";
console.log(stringList);
$(document).on("click", ".removeAddress", function() {
var removeItem = $(this).parent().clone().children().remove().end().text();
console.log(removeItem);
stringList = $('.removeAddress').map(function(){
return $(this).parent().clone().children().remove().end().text()
}).get()
$(this).parent().remove();
console.log(stringList);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<label>Address *</label>
<div class="target"></div>
<input type="text" id="clientAdd" name="address" value="" class="form-control required">
</div>
</div>
</div>
you can hide whole input or you can use input type="hidden". Usually you have one input displayed for humans as a event trigger and input hidden for the value which is processed on the server side
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<label>Address *</label>
<div class="target"></div>
<input type="text" id="clientAdd" name="address" value="" class="form-control required">
<input type="hidden" id="clientAddCode" name="addressCode">
</div>
</div>
</div>
var stringList = [];
$("#clientAdd").keypress(function (e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag'>" +"<span class='removeAddress'>"+'+'+"</span>"+ this.value + "</a>");
stringList.push(this.value);
this.value = "";
console.log(stringList);
$("#clientAddCode").val(stringList);
$(document).on("click", ".removeAddress", function() {
var removeItem = $(this).parent().parent().val();
console.log(removeItem);
stringList.splice( $.inArray(removeItem, stringList ) ,1 );
$(this).parent().remove();
console.log(stringList);
$("#clientAddCode").val(stringList);
});
}
});