I create code for add new input with custom style but i need to change id number and "for" Tag value OnClick.
I need to add id="input-2" and for="input-2"
and in on click i need to add new html with id="input-3" and for="input-3"
This Code:
var maxSocial = 10,
socialWrapper = $("#socialWrapper"),
addSocial = $("#add-social"),
socialX = 1;
$(addSocial).click(function (e) {
e.preventDefault();
if (socialX < maxSocial) {
socialX++;
$(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="input-1" type="text" required /><label for="input-1">Social Link</label><span class="underline"></span></div></div>');
}
});
$(socialWrapper).on("click", ".remove-social", function (e) {
e.preventDefault();
$(this).parent('div').remove(); socialX--;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="socialWrapper">
<div class="inputbox">
<div class="inputbox-content">
<input id="input-1" type="text" required />
<label for="input-1">Social Link</label>
<span class="underline"></span>
</div>
</div>
</div>
<div class="social-add">
<a href id="add-social"><i class="fas fa-plus"></i> Add Social</a>
</div>
You want to create the id based off of the common string "input-" and append socialX.
$(addSocial).click(function (e) {
e.preventDefault();
if (socialX < maxSocial) {
socialX++;
var thisId = "input-" + socialX;
$(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="' + thisId + '" type="text" required /><label for="' + thisId + '">Social Link</label><span class="underline"></span></div></div>');
}
});
Working JSFiddle: https://jsfiddle.net/jennifergoncalves/7rLjf5b8/6/
Related
I have to implement the logic when add button is clicked,it will add the input field and when remove button is clicked it removes the fields, For this requirement code is working fien,but when i add checkbox ,if checkbox is clicked the requirement is that input field should be disabled and all new input fields will be removed,in my case only one input filed removes,i have to remove all fields.
var maxField = 5; //Input fields increment limitation
var add_button = $('#add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div id="fieldhtml"><input type="text" name="socials[]" value="" />
<img src="{{ 'remove-icon.png' | asset_url }}"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<i class="plus"></i>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure" data-input-type="text" name="socials[]" value="" id="socials" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
$(function(){
//Once add button is clicked
$(add_button).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
$("#add_button").attr("disabled", "disabled");
$("#socials").attr("disabled", "disabled");
$("#fieldhtml").remove();
} else {
$("#socials").removeAttr("disabled");
$("#fieldHTML").removeAttr("disabled");
$("#add_button").removeAttr("disabled");
//$("#fieldhtml").parent('div').show();
$("#socials").focus();
}
});
You need to define the fieldHTML based on the Jquery Documentation.
// HTML
<div class="col-lg-6 col-sm-12">
<div class="input-icons pt-2">
<label for="socials">Socials <span class='req'>*</span></label>
<div class="input-icon">
<a href="" class="add-button" title="Add field" id="add_button">
ADD
</a>
<div class="icon"></div>
<div class="field_wrapper">
<input type="text" class="validate input-field validate-input-structure socials" data-input-type="text" name="socials[]" value="" required />
</div>
<label for="chksocials">
<input type="checkbox" id="chksocials" name="chksocials" />
My business doesn’t have social media
</label>
</div>
</div>
</div>
// JS
const add_button = $('#add_button');
const wrapper = $('.field_wrapper');
$(function(){
const maxField = 5;
let x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < maxField){
x++;
// This is to create element in JQUERY
const fieldHTML = $('<div class="fieldhtml"><input type="text" name="socials[]" value="" />REMOVE</div>');
$(wrapper).append(fieldHTML);
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
$("#chksocials").click(function () {
if ($(this).is(":checked")) {
wrapper.hide();
} else {
wrapper.show();
$(".socials").focus();
}
});
});
Note : do not use the same HTML ID multiple times, see here.
I have managed to come up with the following JavaScript and HTML but now I am stuck. I want to be able to add an id="" attribute to the fields and have them numbered as I add more fields with the '+ Add' button.
I've been playing around with this but have not had any success yet. Could someone give me some suggestions or offer some solutions to this issue?
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><table width="100%"><tr><td><input type="text"
name="field_name[]" value="" class="form-control" style="width:98%;"
placeholder="Role"/></td><td><input type="text" name="field_name[]" value=""
class="form-control" style="width:100%;" placeholder="Name"/></td></tr></table>
<a href="javascript:void(0);" class="remove_button"><button type="button"
class="btn btn-danger btn-sm" style="margin-top:10px; margin-bottom: 18px;"> -
Remove </button></a></div>';
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
<label style="margin-top:70px;">Credits</label>
<div class="field_wrapper">
<div class="form-group">
<table width='100%'>
<tr>
<td>
<input type="text" name="field_name[]" value="" placeholder="Role" class='form-control' style="width:98%"/>
</td>
<td>
<input type="text" name="field_name[]" value="" placeholder="Name" class='form-control' style="width:100%"/>
</td>
</table>
<a href="javascript:void(0);" class="add_button" title="Add field">
<button style='margin-top:10px; margin-bottom: 10px;' type="button" class="btn btn-success btn-sm"> + Add Role </button>
</a>
</div>
</div>
You can try this snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function () {
var x = 1; //Initial field counter is 1
var idCounter = 0;
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
function fieldHTML(id) {
return '<div><table width="100%"><tr><td>id:' + id + '<input type="text"' +
'id="role-' + id + '" name = "field_name[]" value = "" class="form-control" style = "width:98%;"' +
'placeholder = "Role" /></td > <td><input type="text" id="name-' + id + '" name="field_name[]" value=""' +
'class="form-control" style="width:100%;" placeholder="Name" /></td></tr ></table >' +
'<a href="javascript:void(0);" class="remove_button"><button type="button"' +
'class="btn btn-danger btn-sm" style="margin-top:10px; margin-bottom: 18px;"> - Remove </button></a></div >';
}
//Once add button is clicked
$(addButton).click(function () {
//Check maximum number of input fields
if (x < maxField) {
$(wrapper).append(fieldHTML(idCounter++)); //Add field html
x++; //Increment field counter
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
<label style="margin-top:70px;">Credits</label>
<div class="field_wrapper">
<div class="form-group">
<table width='100%'>
<tr>
<td>
<input type="text" name="field_name[]" value="" placeholder="Role" class='form-control' style="width:98%" />
</td>
<td>
<input type="text" name="field_name[]" value="" placeholder="Name" class='form-control' style="width:100%" />
</td>
</table>
<a href="javascript:void(0);" class="add_button" title="Add field"><button
style='margin-top:10px; margin-bottom: 10px;' type="button" class="btn btn-success btn-sm"> + Add Role
</button></a>
</div>
</div>
Note, I have created a new variable idCounter to keep the id unique even when you remove a row. Otherwise, it might create elements with duplicate ids.
This is just one quick way, but there are many other ways this can be achieved. The code can be made mode tidy and readable.
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);
});
}
});
<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete"></span>
</label>
</div>
When i click the span item , i want the id value of the checkbox . How can i get it?
Traverse to a known parent that also contains the checkbox, find the checkbox then get the ID attribute.
$('span.todo-remove').on('click', function() {
var id = $(this).closest('.todo-task').find('input:checkbox').attr('id');
// do something with id
});
jQuery:
$('.todo-remove').closest('.todo-task').find('input').attr('id')
Navigate up then search
$('span').click(function() {
var parent = $(this).closest('.todo-task');//navigate up
var input = parent.find('input[type="checkbox"]');//search
var id = input.attr('id');
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '>hellooooo <span class="todo-remove mdi-action-delete">in span</span>
</label>
</div>
jQuery's .parent()-method navigates to the label-level and then the .siblings()-method selects the siblings that match the selector. Finally you can use attr() to get the actual value.
$(".todo-remove").on('click', function() {
var id = $(this).parent().siblings("input[type='checkbox']").attr("id");
});
JSFiddle: http://jsfiddle.net/d0cekb6p/
$(function() {
$('.todo-remove').on('click', function() {
var checkID = $(this).closest('div.todo-task').find(':checkbox').prop('id');
console.log( checkID );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="todo-task">
<input type="checkbox" id=' checkbox1' />
<label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete">X</span>
</label>
</div>
I am using this code to generate dynamically ADD More input fields and then plan on using Save button to save their values in database. The challenge is that on Save button, I want to keep displaying the User Generated Input fields. However they are being refreshed on Save button clicked.
javascript:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
</script>
HTML:
<form method="post">
<div id="itemRows">Item quantity:
<input type="text" name="add_qty" size="4" />Item name:
<input type="text" name="add_name" />
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
<p>
<button id="_save">Save by grabbing html</button>
<br>
</p>
</form>
One approach is to define a template to add it dynamically via jQuery
Template
<script type="text/html" id="form_tpl">
<div class = "control-group" >
<label class = "control-label"for = 'emp_name' > Employer Name </label>
<div class="controls">
<input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
value="" />
</div>
</div>
Button click event
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
});
The main thing is to call e.preventDefault(); to prevent the page from reload.
You might want to check this working example
http://jsfiddle.net/hatemalimam/EpM7W/
along with what Hatem Alimam wrote,
have your form call an upate.php file, targeting an iframe of 1px.