I am novice in jQuery but trying to learn something very basic. I am just trying to build up auto increment/decrement input fields name inside a 'div' when CLICK add/remove button. Here is my HTML:
<div class="add_new_agent" style="display:none;">
<div class="col-xs-12" id="add_agent_div">
<span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small></label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
</div>
Here i am trying to build when click #add_agent then new #add_agent_div will appear and the fields name will increase and decrease fields names when click #agent-remove as well.
So far, i managed to add/remove new #add_agent_div but i cant increase/decrease the input fields name's last digit :(
Here is my jQuery code:
$('#add_agent').click(function(e){
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('#add_agent_div').remove();
}
});
First of all, since you are cloning and appending the html elements, you should not use ids, since ids can not appear multiple times in a page. Instead you should use classes.
For your solution, you can do this:
$('#add_agent').click(function(e){
var $htmlTemplate = $('.add_new_agent').find('.add_agent_div:first').clone(true);
$htmlTemplate.find('.count_agent').text($('.add_new_agent').find('.add_agent_div').length+1);
$('.add_new_agent').append($htmlTemplate);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('.add_agent_div').remove();
$('.add_new_agent').find('.add_agent_div').each(function(e,i){
$(this).find('.count_agent').text($(this).index()+1);
});
}
});
Here is working demo:
http://jsfiddle.net/fk82uro5/3/
You could do something like this
$('#add_agent').click(function(e){
var currentNumber = /* parse this off the dom or keep track of the current number in your script */
var newDiv = '<div class="row">' +
'<div class="col-xs-6">' +
'<input type="text" placeholder="Agent Name" name="agent_name_' + currentNumber + '" class="string ..."' +
...;
$("#add_agent_div").append(newDiv);
})
$("#agent-remove").click(function() {
/* remove last div in add agent div */
})
You can go for something like this: http://jsfiddle.net/zo1r1s4f/1
HTML
<div class="add_new_agent">
<div class="col-xs-12" id="add_agent_div"> <span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small>
</label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
<button class="agent_remove" type="button" class="btn">Remove</button>
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
jQuery
$('#add_agent').click(function (e) {
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('.agent_remove').click(function () {
$(this).parent().remove();
});
Related
I have this code:
<div class="form-group">
<div class="form-group has-feedback">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick"></span>
</div>
</div>
Jquery
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
This code was created in bootstrap.
I need to show alert box after click showActionAfterClick class, but it's not working.
How can I repair it?
You have a space between your class identifier (.) and your classname showActionAfterClick:
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick">Text to see this button</span>
</div>
</div>
In this case, this happend because the span is an inline element and its width size depends of its content. So the span element have not width and you can't click it and trigger the alert (besides the bad syntax in your jquery query selector).
The #Jack Bashford example works because the span element has text inside and this provides the width to that element.
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span id ="showActionAfterClick" class="glyphicon glyphicon-search form-control-feedback glyphiconColor">Click ME!</span>
</div>
</div>
$(document).ready(function() {
$('#showActionAfterClick').click(function() {
alert('ok');
});
});
add id in your span tag instead of class and replace . with # and try now
Use this
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span onclick="test()" class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span>
</div>
</div>
<script>
function test(){
alert("ok");
}
</script>
I am working on a project where user can add records, on the add record page user has 1 html form with 10 fields in it. And a button to add more forms with all the 10 fields.
Now, 4 out of 10 fields has auto complete feature of bootstrap typeahead, and the typeahead suggestions works on the default 1st form.
The problem comes when user adds new form on a add-more button click, the form in actually prepared using jquery below:
var wrapper = '<div class="span6"><input type="hidden" name="count[]" value="' + count + '"/><div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add Parent - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div><div class="widget-content nopadding">';
wrapper += '<div class="control-group"> <label class="control-label">First Name</label> <div class="controls"> <input class="span10" type="text" name="firstname[]" id="firstname"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Last Name</label> <div class="controls"> <input class="span10" type="text" name="lastname[]" id="lastname"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Gender</label> <div class="controls"> <select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Email Address</label> <div class="controls"> <input class="span10" type="email" name="email[]" id="email"> </div></div>';
wrapper += '<div class="control-group"> <label class="control-label">Password</label> <div class="controls"> <input class="span10" type="password" name="password[]" id="password" autocomplete="new-password"> </div></div>';
//typeahead input comes here.......
wrapper += '</div></div></div>';
$current_row.append(wrapper);
the above code does not include the typeahead inputs which I had previously like below:
wrapper += '<div class="control-group">
<label class="control-label">Hobby</label>
<div class="controls">
<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead">
<input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>
</div>
</div>';
now, when users click on add more fields, then the form is actually get added with all the input fields, but here the bootstrap typeahead didn't worked.
so I tried the below code after reading and searching on GOOGLE.
var hobby_typeahead = $('<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead"> <input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>');
$current_row.append(hobby_typeahead);
after this, my dynamic fields started showing me the bootstrap typeahead suggestions..
But, the main problem I am getting is to render the input fields under the bootstrap div ex: control-group, control-label and controls div.
Actually I am looking something like below:
wrapper += '<div class="control-group">
<label class="control-label">Hobby</label>
<div class="controls">
'+ hobby_typeahead +'
<input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>
</div>
</div>';
I understand this will print object [Object] etc..
I would like to know, how I could attach it within the div's, I could do it by declaring something like this:
$control_group = $('<div class="control-group"></div>');
$control_label = $('<label class="control-label">Hobby</label>');
$controls = $('<div class="controls"></div>');
$controls.append($hobby_typeahead);
$control_group.append($control_label);
$control_group.append($controls);
$current_row.append($control_group);
But as I have 4 fields with typeahead suggestion and 6 normal fields, is there any smart way to do it, I don't want to go the long way above.
Thanks in advance, any help or suggestion would be really great help for me.
this is how I created it, to fit in my eyes, this is not the complete solution to fit in my requirement
I have a different and fully working copy with me, I thought posting it here, will add helpful resource for others.
var $span6 = $('<div class="span6"></div>');
var $hidden_count = $('<input type="hidden" name="count[]" value="' + count + '"/>');
var $widget_box = $('<div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add User - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div>');
var $widget_content = $('<div class="widget-content nopadding"></div>');
$span6.append($hidden_count);
$span6.append($widget_box);
var $inputs = {
'First Name':'<input class="span10" type="text" name="firstname[]" id="firstname">',
'Last Name':'<input class="span10" type="text" name="lastname[]" id="lastname">',
'Gender':'<select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select>',
'Email Address':'<input class="span10" type="email" name="email[]" id="email">',
'Password':'<input class="span10" type="password" name="password[]" id="password" autocomplete="new-password">',
'Hobbies':'<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead">'
};
for(var $k in $inputs){
var $control_group = $('<div class="control-group"></div>');
var $control_label = $('<label class="control-label">'+$k+'</label>');
var $controls = $('<div class="controls"></div>');
var $input = $($inputs[$k]);
$input.typeahead({
source: function (query, process) {
return $.get('get-hobbies?src=typeahead&q='+query, function (data) {
return process(JSON.parse(data));
});
}
});
$controls.append($input);
$control_group.append($control_label);
$control_group.append($controls);
$widget_content.append($control_group);
}
$span6.append($widget_content);
$current_row.append($span6);
I have written a code in jquery for displaying a particular <div> section multiple times which contains format for displaying names.
First I have a form for entering the names and age as shown below :
<form action="" method="post" name="person" id="addperson">
<div>
<div class="form-group col-md-12">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" name="fname" id="fnname" placeholder="First Name" required>
<div class="clearfix"></div>
</div>
<div class="form-group col-md-12">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" name="lname" id="lnname" placeholder="Last Name" required>
<div class="clearfix"></div>
</div>
<div class="form-group col-md-7">
<label for="exampleInputEmail1" class="ctred">Age only if under 18</label>
<input type="text" class="form-control" name="age" id="aage" placeholder="Age" required>
<div class="clearfix"></div>
</div>
<button type="submit" id="senddata" name="send" class="btn btn-primary mag_top2">Submit</button>
</div>
</form>
The above code is for entering the names and age when clicking the submit button , it should enter the values into the database. For each values of names and age, a <div> section is displayed with the corresponding names entered. The div section is shown below in the #pern appended:
$(document).ready(function(){
$("#senddata").click(function(e) {
$.ajax({
type : "POST",
url : "data2.php",
data : dataString,
cache : false,
success : function(result1){
var fname = firstname;
var lname = lastname;
var fullname = fname.concat(" ",lname);
document.getElementById("fullname").innerHTML = fullname;
//$("#fullname").html(fullname);
}
});
$('#addperson').trigger("reset");
$("#pern").append(
"<div class='pad pen col-xs-12 col-sm-12 col-md-12 pern alert' id='bloc_style'>\
<div class='pad col-xs-12 col-md-6'>\
<h4 id='fullname'></h4>\
</div>\
<div class='pad col-md-5'>\
<span class='next-step'>\
<button class='ret_but butt label label-primary' id='equipment' name='equipment' type='button'>Select Equipment</button>\
</span>\
<div class='status'>\
<b>Status</b><i class='open' id='open'>Open</i>\
</div>\
</div>\
<div class='pad col-md-1'>\
<button aria-hidden='true' data-dismiss='alert' class='closee' id='garbage' type='button'> \
<i class='fa fa-trash-o' aria-hidden='true'></i>\
</button>\
</div>\
</div>");
});
});
For each names which I have entered in the form, it should display in the div given in #pern with the name. But with this code, for each name entered and clicking the submit button a div section is created but the name entered will be displayed in the previous div section displayed replacing the previous name entered. How to avoid this ? I want to display the name in the corresponding box only not replacing the previous box with the previous name.
You cannot have the same id of an element over and over. That's why your value gets replaced. You should use a class to select your element and do like this :
$("div.pad:last").find('.fullname').html(fullname);
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});
"Sorry for my English as it is not my native language"
On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.
The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..
As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..
The question is how can I add a working ng-autocomplete for every created input field via the function?
Down below is the script.js file with the code for creating the input tag
$(document).ready(function(){
var i=1;
$("#add_city").click(function(){
$('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');
$('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
i++;
});
$("#delete_city").click(function(){
if(i>1){
$("#end_city"+(i-1)).html('');
i--;
}
});
});
And there is the index.php
<div class="page-header">
<h4>Create your trip</h4>
</div>
<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- START CITY -->
<div class="form-group col-md-6">
<input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
</div>
<!-- END CITY -->
<div class="form-group col-md-6" id="tab_logic">
<div id="end_city0">
<input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">
</div>
<div id="end_city1"></div>
</div>
<!-- START DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
</div>
<!-- END DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
</div>
<!-- COMMENT -->
<div class="form-group col-md-12">
<textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
</div>
<!-- Img -->
<div class="form-group col-md-12">
<input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
</div>
</form>
I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)
http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview
http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
Thanks!
/K.A.
You need to compile the element by using the $compile service:
...
$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>');
var element = angular.element(document.querySelector('#end_city' + i));
var scope = element.scope();
var $compile = element.injector().get('$compile');
$compile(element)(scope);
...
Good short explanation of how to work with Angular from the 'outside' can be found here.