Create Repeated Fields in jQuery - javascript

$(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>

Related

Adding new input fields using the button

I'm a novice at Laravel. How can I add new text input fields with the button and add data in each field separately? Add or plus button or whatever.
Below my code, which allows you to enter the sledge, but only in one field, in addition you have to separate the words with a comma.
<div class="card-body">
<form method="post" action="{{route('randomizeTeam.store')}}">
{{ csrf_field() }}
<div class="form-group">
<label for="players">Add player names</label>
<input type="text" class="form-control" name="players">
</div>
<div class="form-group">
<label for="teams">Add team names</label>
<input type="text" class="form-control" name="teams">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>

This is how you can do it in a simple way
$(function(){
var more_fields = `
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
`;
$('#add-more-field').on('click', (function (e) {
e.preventDefault();
$(".input-fields").append(more_fields);
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
<form method="post" action="">
{{ csrf_field() }}
<div class="input-fields">
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
</div>
<div class="form-group">
<button id="add-more-field" class="btn btn-secondary btn-sm">add more</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>
And in your controller, you will do something like this
foreach($request->get('players') as $i => $player) {
YourModel::create([
'player' => $player,
'team' => $request->get('teams')[$i]
]);
}

I have to give some dependent fields in html,php,javascript

I need to give some dependency in the fields. Ex:
first i have two option that is Branch/Staff so, if i am selecting branch it should display the branches to select if he is selecting staff then i should be able to select the employee id and if am selecting employee id employee name should display and more over all these things user needs to feed the data. That is main category branch/staff should be standard but there after branches,employee number and name al these things user needs to feed
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("product_price").value;
var gstPrice = document.getElementById("cgst").value;
// Get the GST price
gstPrice = exPrice * 0.09;
var TPrice = parseInt(gstPrice) + parseInt(exPrice) + parseInt(gstPrice);
// Set the GST price in its form element
document.getElementById("cgst").value = gstPrice;
document.getElementById("igst").value = gstPrice;
document.getElementById("sgst").value = 0;
document.getElementById("total").value = TPrice;
}
</script>
</head>
<body>
<?php
public function addProduct($pro_name,$price,$stock,$date,$loc,$in_no,$gst_no,$cgst,$sgst,$igst,$total,$depre,$pur_from){
$pre_stmt = $this->con->prepare("INSERT INTO `products`( `product_name`, `product_price`, `product_stock`, `added_date`, `p_status`, `loc`, `in_no`, `gst_no`, `cgst`, `sgst`, `igst`, `total`, `depre`, `pur_from`)
VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
$status = 1;
$pre_stmt->bind_param("sdisisiiddddis",$cid,$bid,$pro_name,$price,$stock,$date,$status,$loc,$in_no,$gst_no,$cgst,$sgst,$igst,$total,$depre,$pur_from);
$result = $pre_stmt->execute() or die($this->con->error);
if ($result) {
return "NEW_PRODUCT_ADDED";
}else{
return 0;
}
}
if (isset($_POST["added_date"]) AND isset($_POST["product_name"]) ) {
$obj = new DBOperation();
$result = $obj->addProduct($_POST["select_cat"],
$_POST["select_brand"],
$_POST["product_name"],
$_POST["product_price"],
$_POST["product_qty"],
$_POST["added_date"],
$_POST["loc"],
$_POST["in_no"],
$_POST["gst_no"],
$_POST["cgst"],
$_POST["sgst"],
$_POST["igst"],
$_POST["total"],
$_POST["depre"],
$_POST["pur_from"]);
echo $result;
exit();
}
?>
<div class="modal fade" id="form_products" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add new products</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="product_form" onsubmit="return false">
<div class="form-group">
<label>Category</label>
<select class="form-control" id="select_cat" name="select_cat" required/>
</select>
</div>
<div class="form-group">
<label>Brand</label>
<select class="form-control" id="select_brand" name="select_brand" required/>
</select>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>RHFL ID</label>
<input type="text" class="form-control" name="product_name" id="product_name" placeholder="Enter RHFL ID" required>
</div>
<div class="form-group col-md-6">
<label>Invoice No</label>
<input type="text" class="form-control" name="in_no" id="in_no" placeholder="Enter Invoice No" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Location</label>
<input type="text" class="form-control" id="loc" name="loc" placeholder="Enter Location" required/>
</div>
<div class="form-group col-md-6">
<label>Purchase Date</label>
<input type="text" class="form-control" id="added_date" name="added_date" value="<?php echo date("Y-m-d"); ?>" readonly/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Product Price</label>
<input type="text" class="form-control" id="product_price" name="product_price" onChange="updatePrice()" />
</div>
<div class="form-group col-md-6">
<label>GST No</label>
<input type="text" class="form-control" id="gst_no" name="gst_no" placeholder="Enter GST No" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Purchased From</label>
<input type="text" class="form-control" id="pur_from" name="pur_from" placeholder="Enter From Where you purchased" required/>
</div>
<div class="form-group col-md-6">
<label>IGST</label>
<input type="text" class="form-control" id="igst" name="igst" onChange="updatePrice()" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="cgst">CGST</label>
<input type="text" class="form-control" id="cgst" name="cgst" readonly name="cgst" onChange="updatePrice()" />
</div>
<div class="form-group col-md-6">
<label>SGST</label>
<input type="text" class="form-control" id="sgst" name="sgst" onChange="updatePrice()" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Quantity</label>
<input type="text" class="form-control" id="product_qty" name="product_qty" placeholder="Enter Quantity" required/>
</div>
<div class="form-group col-md-6">
<label>Depreciation</label>
<input type="text" class="form-control" id="depre" name="depre" placeholder="Enter Price of SGST" required/>
</div>
</div>
<div class="form-group">
<label>Total</label>
<input type="text" class="form-control" id="total" name="total" onChange="updatePrice(this.form)" />
</div>
<button type="submit" class="btn btn-success">Add Product</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
//add product
$("#product_form").on("submit",function(){
$.ajax({
url : DOMAIN+"/includes/process.php",
method : "POST",
data : $("#product_form").serialize(),
success : function(data){
if (data == "NEW_PRODUCT_ADDED") {
alert("New Product Added Successfully..!");
$("#product_name").val("");
$("#select_cat").val("");
$("#select_brand").val("");
$("#product_price").val("");
$("#product_qty").val("");
calculate();
}else{
console.log(data);
alert(data);
}
}
})
})

Dynamic multiselect feature

I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.

Error: ng:area Bad Argument in angularjs

Here I am trying to insert data from form attendance-form.blade.php in table attendance on button click using angularJS.
Now the problem when I click button data is not inserted in table instead it gives
Argument 'AttendanceFormController' is not a function, got undefined.
Below are my form and AttendanceController.js.
In attendance-form.blade.php
<div ui-view="attendanceForm">
<div class="mdl-grid demo-content" ng-controller='AttendanceFormController'>
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<form>
<div class="form-group label-static is-empty">
<h3>Create Attendance</h3>
<div class="form-group label-static is-empty">
<input type="text" name="user_id" class="signup form-control"
id="i2" placeholder="user_id" ng-model="attendance.user_id">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="in_or_out" class="signup form-control"
id="i2" placeholder="in_or_out" ng-model="attendance.in_or_out">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="comment" class="signup form-control"
id="i2" placeholder="comment" ng-model="attendance.comment">
</div>
<div class="signup form-group label-static is-empty ripple-container signup">
<input type="button" value="Create Attendance" class="btn btn-raised btn-primary" ng-click="createattendance()">
</div>
</div>
</form>
</div>
</div>
</div>
In AttendanceController.js
app.controller('AttendanceFormController', function ($scope, AttendanceService) {
$scope.attendance = {};
$scope.attendance.user_id;
$scope.attendance.in_or_out;
$scope.attendance.comment;
$scope.loadAttendance = function () {
$scope.attendance = AttendanceService.get({id:$scope.params.id});
}
$scope.createattendance = function () {
attendance = {user_id:$scope.attendance.user_id,
in_or_out:$scope.attendance.in_or_out,
comment:$scope.attendance.comment
}
AttendanceService.post(attendance).then(function(response){
alert('User successfully added in the system.'+'\n'+'Check console.log for response.');
console.log(response.data);
});
}
});

JavaScript- how to create dynamically multiple divs with inputs field

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.

Categories

Resources