Adding multiple text-box using j-query
HTML
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"></span></div>
<div class="contents"></div>
</div>
And script like
<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
});
</script>
The above query is used to add multiple text box that properly working and i try to remove added items in remove button but that only remove one text box only i am using this script
<script>
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
</script>
any way to remove the clicked full row only ?
enter image description here
You can rewrite code like this. You are removing the container, that was the issue
$(document).ready(function() {
$(".add").click(function() {
var container= $('<div>');
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(container);
$('.childControl').after($(container).clone());
});
$('.contents').on('click', '.rem', function() {
$(this).parent("div").parent("div").empty();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"></span>Add</div>
<div class="contents"><div class="childControl"></div>
</div>
Updated answer: Use prevUntil() to achieve this:
$('.contents').on('click', '.rem', function() {
$(this).parent().prevUntil(".col-md-1").remove();
$(this).parent().remove();
});
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span><hr></div>').appendTo(".contents");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name="" /></div>
<div class="col-md-1" style="margin-top:30px;">
<span class="glyphicon glyphicon-plus">Add this</span>
</div>
<div class="contents"></div>
</div>
The parent should be grand parent, try below code
replace $(this).parent("div").remove();
with
$(this).parent().parent().remove();
so final code is:
<script>
$('.contents').on('click', '.rem', function() {
$(this).parent().parent().remove();
});
</script>
Related
I am facing an
"Uncaught SyntaxError: Unexpected string" error while using jquery.
MY function is when I click on the plus icon, a few HTML added.
My code here
var content_div = '<br/><div class="row input_fields_wrap testclass"><input type="hidden" id="t_id_'+sb_index+'" name="t_id[]" value='' ><div class="col-md-4"><label>Postcode <span style="color:red;">*</span></label><input type="text" required name="t_postcode[]" id="t_postcode_'+sb_index+'" value="" class="form-control" value="" oninput="" maxlength="8" placeholder="Postcode"><span id="matchCodeResponse"></span></div><div class="col-md-3"><label>Price <span style="color:red;">*</span></label><input type="text" required name="t_price[]" id="t_price_'+sb_index+'" value="" oninput="" maxlength="4" class="form-control" placeholder="Price"><span id="matchCodeResponse"></span></div><div class="col-md-4"><label>Area Name <span style="color:red;">*</span></label> <input type="text" required name="t_location_name[]" id="t_location_name_'+sb_index+'" value="" class="form-control" placeholder="Area Name"></div><div class="col-md-1 remove_div"><label> </label><br/><i class="fa fa-minus-square" style="font-size: 30px;"></i></div></div>';
$(".testclass").last().after(content_div);
use string literale to prevent getting error , your var would be embeded using sitring expression like : ${your_var} ,
See working snipet below :
$(function() {
$("#btn").on("click", function() {
var sb_index = Math.random().toString(36).substr(2, 9);
var content_div = `<br/><div class="row input_fields_wrap testclass"><input type="hidden" id="t_id_${sb_index}" name="t_id[]" value='
' ><div class="col-md-4"><label>Postcode <span style="color:red;">*</span></label><input type="text" required name="t_postcode[]" id="t_postcode_${sb_index}" value="" class="form-control" value="" oninput="" maxlength="8" placeholder="Postcode"><span id="matchCodeResponse"></span></div><div class="col-md-3"><label>Price <span style="color:red;">*</span></label><input type="text" required name="t_price[]" id="t_price_${sb_index}" value="" oninput="" maxlength="4" class="form-control" placeholder="Price"><span id="matchCodeResponse"></span></div><div class="col-md-4"><label>Area Name <span style="color:red;">*</span></label> <input type="text" required name="t_location_name[]" id="t_location_name_${sb_index}" value="" class="form-control" placeholder="Area Name"></div><div class="col-md-1 remove_div"><label> </label><br/><i class="fa fa-minus-square" style="font-size: 30px;"></i></div></div>`;
$(".testclass").last().after(content_div);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btn">click to add div</button>
<div class="testclass">
<div>First test</div>
</div>
I have div with multiple tags in it. I want to add the with so i can convert my existing to bootstrap grid view. Here is my html as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
And I want the output as below:
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<div class="col-md-3">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
</div>
<div class="col-md-5">
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<div class="col-md-3">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
</div>
<div class="col-md-3">
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
</div>
I have tried to iterate through div using customdiv css but don't know how to append the div.
$('.customdiv').children().each(function () {
if ($(this).prop("tagName").toLowerCase() == "label") {
$(this).prepend('<div class="col-md-3">');
$(this).append("</div>");
} else {
$(this).prepend('<div class="col-md-5">');
$(this).append("</div>");
}
});
Somebody help me out to achieve this in best way.
Create a div and append the child and then add the new element into the parent, so that you can achieve your result html
$(document).ready(function() {
$(".form-group").each(function(i, obj) {
var tt = $('<div class="col-md-3"></div>');
$(tt).append($(obj).find("label"));
$(obj).append(tt);
var tt = $('<div class="col-md-5"></div>');
$(tt).append($(obj).find("input, select, textarea"));
$(obj).append(tt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
Have a look:
$('.customdiv').children().each(function () {
if ($(this).is('label')) {
$(this).wrap('<div class="col-md-3"></div>');
} else {
$(this).wrap('<div class="col-md-5"></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="render-wrap" id="fb-render-wrap">
<div class="fb-text form-group customdiv col-md-12 field-text-1505825076921">
<label for="text-1505825076921" class="fb-text-label">Name<span class="fb-required">*</span></label>
<input type="text" name="text-1505825076921" id="text-1505825076921" required="required" aria-required="true" data-msg="Name is requird.">
</div>
<div class="fb-date form-group customdiv col-md-12 field-date-1505825086301">
<label for="date-1505825086301" class="fb-date-label">From Date<span class="fb-required">*</span></label>
<input type="date" name="date-1505825086301" id="date-1505825086301" required="required" aria-required="true" data-msg="From Date is requird.">
</div>
</div>
Suppose that I've this <div>:
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name"> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>
As you can see I've two <input>s, what I need to do is get all the <input> to have operators as datatype, I did this:
$('#input-containers :input').each(function()
{
console.log($(this).attr('datatype'));
});
but this returns undefined, why?
This will work:
$('#input-containers .form-group').each(function(){
console.log($(this).attr('datatype'));
});
Or if you want to use your code, you should place the datatype attribute on the input tag.
You should target the parent div having class name .form-group and get the attribute
check the below snippet
$(document).ready(function () {
$('#input-containers :input').each(function()
{
console.log($(this).parent('.form-group').attr('datatype'));
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name"> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>
You need to use .closest() to traverse up to parent div as this refers to input which doesn't the said attribute
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('datatype'));
});
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('datatype'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-containers">
<div class="form-group" datatype="admins operators">
<label for="first-name">*</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group" datatype="admins operators">
<label for="last-name"></label>
<input type="text" id="last-name" class="form-control required" />
</div>
</div>
However I would recommend you to use data-* prefixed attribute
<div class="form-group" data-type="admins operators">
Then use
$('#input-containers form-group[datatype] :input').each(function() {
console.log($(this).closest('.form-group').attr('data-type'));
});
.data() can also be used. However it should be used judiciously.
Try this way it will also work,
JS:
$('#input-containers :input').each(function()
{
console.log(this.parentElement.getAttribute('datatype'));
});
$(documnet).ready(function(){
$('#more_finance').click(function(){
var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstName" class="control-label">Finance Contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="Finance Contact" class="form-control" autofocus></div>\n\
<img src="/img/deleted-box.png"></div>';
$(add_new).insertAfter( "#finance_1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group finance-contact" id="finance_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Finance Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="finance1" name="finance[]" placeholder="Finance Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_finance" value="Add More">
</div>
I want This Code insert multiple when click Add More Button And Also remove repeated fields
I Find Answer
jQuery(document).ready(function(){
jQuery('#more_senior').click(function(){
var finance_cont1=jQuery('.senior-contact').length;
var finance_cont=finance_cont1+1;
var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstName" class="control-label">Senior Mgmt. Contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="Senior Mgmt. Contact" class="form-control" autofocus></div>\n\
Remove</div>';
jQuery(add_new).insertAfter( "#senior_"+finance_cont1 );
delete_fields();
});
function delete_fields(){
$('.delete_png').on("click",function(){
var class_name=jQuery(this).parent().attr('class');
class_name=class_name.split(' ');
var id_name=jQuery(this).parent().attr('id');
var finance_cont2=jQuery('.'+class_name[1]).length;
var finance_cont3=finance_cont2-1;
var id_first=id_name.split('_');
$('#'+id_name).remove();
delete_fields();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<h4><strong>Senior Mgmt. Contacts</strong></h4>
<div class="form-group senior-contact" id="senior_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Senior Mgmt. Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="Senior Mgmt. Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_senior" value="Add More">
</div>
</div>
I have to create 3 input text boxes for getting user input about names and email addresses.
I have to create it dynamically, i.e. as the user clicks on the email input field a new line of all the three element supposed to be created.
This is the code for one line with the 3 inputs:
<div class='row' id="inputcontainer">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
How to create it dynamically ?
I'm using the following code for cloning and it's clone it several times instead 1
maxIndex = 0;
$('form').on('input','.email',function(){
$(this).parent().find('.common-sprite').removeClass('disNone');
var lastmail = $(this); if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
var count = $('.row.inputcontainer').length;
console.log(count);
maxIndex++;
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
$('.inputcontainer').append(clone);
}
something like this? i used .blur() to trigger the dynamic adding so that if you type something in the email input and you click outside of it, then the next 3 lines of information will show up. i also added some classes to help jquery find elements faster and more reliably. i used clone() to recreate the same structure of the 3 lines every time.
$(document).ready(function() {
$('.email').on('blur', function() {
if($(this).val().length > 0) {
var count = $('.row').length;
console.log(count);
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName').attr('id', 'firstName' + count).val('');
clone.find('.lastName').attr('id', 'lastName' + count).val('');
clone.find('.email').attr('id', 'inputMail' + count).val('');
$('body').append(clone);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
hope this helps!
Is this something similar to what you would like?
$(document).on("blur",".add",function()
{
$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example#url.com' /><br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
Type into the email textbox then leave to create the new textboxes.