Need to multiply values according to the switch - javascript

In my web application, I created this view. Here it has columns Item Description, Qty and again I get some data from the model and generate the other columns with the model count.
So as an example if there is 2 records in the list, design created as
Item Description, Qty, Sup 01, Sup 02
Then I load the values to that columns from the model. Also there is a switch button to check that line is approved or not. There is for Ajax code in the script to pass that ID, and the switch value to the control.
Additionally I want to add another column at the end as "Total Value". User switch the value as true I want to get that sup value and multiply with the column and need to show the amount on that column.
This is what I have tried. But it doesn't work
<div class="card-body">
<div class="row">
<div class="col-md-3 col-sm-3">
<strong>Item Description</strong>
</div>
<div class="col-md-1 col-sm-1">
<strong>Quantity</strong>
</div>
#foreach (var item in Model.ToList().First().PurchasingDetailsSup) //new columns will be created with the supplier count that user added earlier
{
<div class="col-md-2 col-sm-2">
<strong> #Suppliers.Find(x => x.Value == item.Supp_Id.ToString()).Text</strong>
</div>
}
</div>
#foreach (Asp_PASMVC.Models.PurchasingDetails item in Model)
{
<div class="row">
<div class="col-md-3">
#item.Item_Description
</div>
<div class="col-md-1">
#item.Qty
</div>
#for (int i = 0; i < item.PurchasingDetailsSup.Count; i++)
{
<div class="col-md-2">
#item.PurchasingDetailsSup[i].Unit_Amount
<input type="checkbox" value="#item.PurchasingDetailsSup[i].IsApproved" class="bootstrap-switch bwitch" data-style="ios" data-id="#item.PurchasingDetailsSup[i].Id" data-onstyle="success" data-offstyle="danger" />
</div>
}
</div>
}
</div>
<script>
$(".bootstrap-switch").change(function () {
var Checked = this.checked;
var Id = $(this).data('id');
var Qty = document.getElementById('Qty').value;
var Amount = document.getElementById('Amount').value;
IsApproved(Id, Checked);
calculate(Qty, Amount);
});
function IsApproved(id, chkValue) {
//alert(chkValue);
$.ajax({
url: '../UpdateApproveStatus',
type: 'POST',
dataType: 'json',
cache: false,
async: false,
data: { Id: id, IsChecked: chkValue },
success: function (data) {
if (data.Success != true) {
console.log('Error In IsApprove');
}
}
});
function calculate(qty,amount) {
var myResult = qty * amount;
alert(myResult)
}
}
</script>

You must move the calculate function out of the IsApproved function
$(".bootstrap-switch").change(function () {
var Checked = this.checked;
var Id = $(this).data('id');
var Qty = document.getElementById('Qty').value;
var Amount = document.getElementById('Amount').value;
IsApproved(Id, Checked);
calculate(Qty, Amount);
});
function IsApproved(id, chkValue) {
//alert(chkValue);
$.ajax({
url: '../UpdateApproveStatus',
type: 'POST',
dataType: 'json',
cache: false,
async: false,
data: { Id: id, IsChecked: chkValue },
success: function (data) {
if (data.Success != true) {
console.log('Error In IsApprove');
}
}
});
}
function calculate(qty, amount) {
var myResult = qty * amount;
alert(myResult)
}

Related

Javascript function keeps retrieving data from last item in Model list in MVC

I am trying to create functionality that will update a product's quantity in the users shop cart. I am able to populate the ViewModel with the relevant data and display it in a table in the View.
In the script tags, I have two functions, one to increase the quantity of the product and the other to decrease the quantity in increments of 1. Now all works well if there is one product in the list. I receive the correct values. As soon as there are two or more products in the list, whenever the increase or decrease functions are fired, the values (quantity and productId) of the last item in Model.Products are sent to the 'UpdateQuantity' ActionMethod, instead of the values from the inputs in the selected table row.
For example: If there are two products in the list. Product A (Id:1 and Quantity: 3) and Product B(ID:2 and quantity:5), If I click on either the increase or decrease buttons next to Product A's quantity input, the relevant function will pass Product B's values (2 and 5) to the Action Method instead of Product A's values (1 and 3).
I'm assuming that there is a naming convention issue, but I'm unable to figure out why this is happening. Any help would be highly appreciated.
Below is what I have so far:
ViewModel:
public class ShopCartViewModel : BaseViewModel
{
public List<OrderDetail> OrderDetailList { get; set; }
public List<Order> OrderList { get; set; }
public List<Product> Products { get; set; }
}
Controller:
public List<Order> orderList = new List<Order>();
public List<OrderDetail> orderDetailList = new List<OrderDetail>();
public List<Product> productList = new List<Product>();
public ActionResult Index()
{
ShopCartViewModel vm = new ShopCartViewModel();
ConnectToDatabase();
User u = Helpers.GetUser.GetUserDetails();
orderList = GetAllOrdersForCustomer(u.Id);
GetOrderDetails();
vm.OrderList = orderList;
vm.OrderDetailList = orderDetailList;
vm.Products = productList;
return View(vm);
}
[HttpPost]
public ActionResult UpdateQuantity(string quantity, string productId)
{
//do stuff here
}
View:
#foreach(var product in Model.Products)
{
string class_quantity = "quantity_" + product.Id;
string class_productId = "productId_" + product.Id;
<div class="quantity">
<button class="dec-btn p-0" type="submit"><i class="fas fa-caret-left" onclick="q_dec()"></i></button>
<input name="quantity" id="#class_quantity" class=" form-control" type="text" value="#product.Quantity" />
<button class="inc-btn p-0" type="submit"><i class="fas fa-caret-right" onclick="q_inc()"></i></button>
<input name="productId" id="#class_productId" class=" form-control" type="text" value="#product.Id" style="visibility:hidden" />
<script type="text/javascript">
function q_inc(e) {
var p_quantity = $("##class_quantity").val();
var final_quantity = parseInt(p_quantity) + 1;
var p_productId = $("##class_productId").val();
$.ajax({
url: '#Url.Action("UpdateQuantity","ShopCart")',
type: 'POST',
data: {quantity: final_quantity, productId: p_productId },
success: function () {
alert("Increase Success");
}
})
}
function q_dec(e) {
var p_quantity = $("##class_quantity").val();
if (p_quantity >= 2) {
var final_quantity = parseInt(p_quantity) - 1;
}
var p_productId = $("##class_productId").val();
$.ajax({
url: '#Url.Action("UpdateQuantity","ShopCart")',
type: 'POST',
data: {quantity: final_quantity, productId: p_productId },
success: function () {
alert("Decrease Success");
}
})
}
</script>
</div>
}
The problem with your code is that in your loop you are duplicating functions q_inc(e) and q_dec(e)
You should fix your code with something like this:
#foreach(var product in Model.Products)
{
string class_quantity = "quantity_" + product.Id;
string class_productId = "productId_" + product.Id;
<div class="quantity">
<button class="dec-btn p-0" type="button" onclick="q_dec('#class_productId', '#class_quantity")'><i class="fas fa-caret-left"></i></button>
<input name="quantity" id="#class_quantity" class=" form-control" type="text" value="#product.Quantity" />
<button class="inc-btn p-0" type="button" onclick="q_inc('#class_productId', '#class_quantity')"><i class="fas fa-caret-right"></i></button>
<input name="productId" id="#class_productId" class=" form-control" type="text" value="#product.Id" style="visibility:hidden" />
}
<script type="text/javascript">
function q_inc(id, quantity) {
var p_id = $("#" + id);
var p_quantity = $("#" + quantity);
var quantity_val = p_quantity.val()
var final_quantity = parseInt(quantity_val) + 1;
var p_productId = p_id.val();
$.ajax({
url: '#Url.Action("UpdateQuantity","ShopCart")',
type: 'POST',
data: {quantity: final_quantity, productId: p_productId },
success: function () {
alert("Increase Success");
p_quantity.val(final_quantity);
}
})
}
function q_dec(id, quantity) {
// change this function accordingly
</script>

Java script validation issues

I have a bug that I could not figure out in my validation method. I have a function that validate the "code" table in my database to make sure the user can not input duplicate data. It is all working as expected and here is the code:
function validateCode() {
$('#code-error').html('')
if ($('#code').val() != '') {
$.ajax({
url: '${createLink(action:'checkCode')}',
type: 'GET',
data: {
'code': $('#code').val(),
},
// dataType:'json',
success: function (data) {
if (data == 'true') {
$('#code-error').html('Code already exist')
$(':input[type="submit"]').prop('disabled', true);
} else {
// $('#code-error').html('Code not exist')
$(':input[type="submit"]').prop('disabled', false);
}
},
error: function (request, error) {
alert("Request: " + JSON.stringify(request));
}
});
}
}
But it is not stable.First the message and the button are disabled in the first couples of tried but if I continue to test it by re-enter the code that exist and the code that does not exist the button disabled however the error message is not showing under the input box.
Here is my html code :
<div class = "row" style = "margin-top:15px;">
<div class = "col-md-12">
<div class = "row">
<div class = "col-md-5 text-right" style = "font-weight: bold"><span class="placeholder">Code</span></div>
<div class = "col-md-7">
<div class="form-group">
<input style = "width: 50%"type="text" class="form-control" onkeyup="validateCode()" id="code" placeholder="Enter code" name="code">
<input type="hidden" name="current-code" id = "current-code">
<div class = "row">
<div id = "code-error" class = "col-md-12" style ="color:red"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my controller function for validating the code:
def checkCode() {
def allow
String compareCode = params?.code
def customer = Customer.findByCode(compareCode)
if (customer == null) {
allow = false //not exist
} else if (customer != null) {
allow = true //exist
}
render allow
}

AJAX send form with data and multiple image to asp.net mvc action

It has been like two days. I have been searching on the web, but I cant figure out the solution.
I have some input fields, where I can Insert text and select images. They are variable, that means if you want more fields to add more products you can click on "+" and I add another field set.
When I click on "Salva e Prosegui" and pass all the data to my ASP.MVC action in the controller.
I tried different ways but I'm not able to pass the images.
HTML:
<div class="fields-container">
<div class="row">
<div class="col-md-2">
<input type="text" name="nomecolore" placeholder="Nome Colore" class="form-control" />
</div>
<div class="col-md-1">
<input type="text" name="codicecolore" placeholder="Codice Colore" class="form-control" />
</div>
<div class="col-md-4">
<input type="file" name="filefronte" class="form-control filestyle" data-text="Foto Fronte" data-btnClass="btn-primary form-control" data-buttonBefore="true">
</div>
<div class="col-md-4">
<input type="file" name="fileretro" class="form-control filestyle" data-text="Foto Retro" data-btnClass="btn-primary form-control" data-buttonBefore="true">
</div>
<div class="col-md-1">
<button class="btn btn-success add-more form-control" type="button"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
JS:
$('#step-2-next').click(function () {
var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
var ID_Prodotto = "1";
for (i = 0; i < ListaNomiColori.length; i++) {
var formData = new FormData();
var nome = ListaNomiColori[i].value;
var codice = ListaCodiciColori[i].value;
var fronte = ListaImmaginiFronte[i].files[0];
var retro = ListaImmaginiRetro[i].files[0];
formData.append("NomeColore", nome);
formData.append("CodiceColore", codice);
formData.append("Foto", fronte);
formData.append("Foto", retro);
formData.append("ID_Prodotto", ID_Prodotto);
$.ajax({
url: _NuovoProdottoCaricaModelli,
data: formData,``
processData: false,
contentType: false,
success: function (res) {
alert('succes!!');
},
error: function (res) {
alert("errror");
}
})
}
});
Controller:
public JsonResult NuovoProdottoCaricaModelli(FormCollection form)
{
////code here
}
My logic is:
I get how many field sets I have and for each one I get the value and call the server for the upload. For each field set I have 2 text input, 2 file input. I also have to pass the ID to a third text field.
Thank you in advance.
Thanks to darloopkat. I found a way to do that.
Here below my edits:
js:
$('#step-2-next').click(function () {
var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
var ID_Prodotto = "1";
for (i = 0; i < ListaNomiColori.length; i++) {
var formData = new FormData();
var nome = ListaNomiColori[i].value;
var codice = ListaCodiciColori[i].value;
var fronte = ListaImmaginiFronte[i].files[0];
var retro = ListaImmaginiRetro[i].files[0];
formData.append("NomeColore", nome);
formData.append("CodiceColore", codice);
formData.append("Foto", fronte);
formData.append("Foto", retro);
formData.append("ID_Prodotto", ID_Prodotto);
$.ajax({
url: _NuovoProdottoCaricaModelli,
data: formData,
type: "POST",
processData: false,
contentType: false,
success: function (res) {
alert('succes!!');
},
error: function (res) {
alert("errror");
}
})
}
});
mvc action:
[HttpPost]
public ActionResult NuovoProdottoCaricaModelli()
{
string Nome = Request["NomeColore"];
string CodiceColore = Request["NomeColore"];
var Fronte = Request.Files[0];
var NomeFronte = Path.GetFileName(Fronte.FileName);
var Retro = Request.Files[1];
var NomeRetro = Path.GetFileName(Retro.FileName);
return Json("");
}

Populating MVC 5 View ComboBox using Javascript based on another ComboBox selection

I'm working on an ASP.NET Core MVC web project and I want to populate values of ComboBox B (Churches) based on selection of ComboBox A (Stations) using JavaScript (Json). I have tried to research with no success.
Here are my codes:
MVC View Code:
<div class="form-group">
<label asp-for="RSTATIONID" class="col-sm-4 control-label">Station:</label>
<div id="station" class="col-sm-8">
<select asp-for="RSTATIONID" class="form-control" asp-items="ViewBag.RSTATIONID"
onchange="LoadChurches(this)"></select>
<span asp-validation-for="RSTATIONID" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="RCHURCHID" class="col-sm-4 control-label">Church:</label>
<div id="church" class="col-sm-8">
<select asp-for="RCHURCHID" class="form-control" asp-items="ViewBag.RCHURCHID"></select>
<span asp-validation-for="RCHURCHID" class="text-danger" />
</div>
</div>
JavaScript Code:
function LoadChurches(e) {
var stationID = e.value;
//alert(stationID);
$.ajax
({
url: '/CaptureReceipts/LoadChurches',
type: 'POST',
datatype: 'application/json',
contentType: 'application/json',
data: JSON.stringify({
stationID: +stationID
}),
success: function (result) {
var res = result.value;
alert(JSON.stringify(res));
/*$("#church").html("");
$.each($.parseJSON(result), function (i, church) {
SetSel(this);
}); */
},
error: function () {
alert("Churches can not load");
}
});
}
Controller Code:
public JsonResult LoadChurches(string statID)
{
int stationID = Convert.ToInt32(statID);
var churches = new SelectList(_context.v_Church.Where(m => m.StationID == stationID), "ID", "churchName");
return Json(ViewData);
}
The Controller name is CaptureReceiptsController. Please help me know what may be wrong.
In controller return simple json array:
var churches = _context.v_Church
.Where(m => m.StationID == stationID)
.Select(x => new {id = x.ID, name = x.churchName })
.ToArray();
return JSON(churches);
In success callback:
success: function (data) {
var churchSelect = $("#church > select")
churchSelect.html(""); //clear select
for (var i =0;i<data.length;i++){
var opt = document.createElement('option');
opt.innerHTML = data[i].name;
opt.value = data[i].id;
churchSelect.append(opt);
}
}

Dynamic form input fields and autocomplete using AJAX

I have a working code where I can dynamically add input fields which can be used for auto-completion using AJAX. Though working, there are limitations. After adding more fields, placement of the autofill is incorrect, as demonstrated in this image:
The results are not showing under the current input field but rather under the last one. Lastly, once the user adds too many input fields and starts removing them, the autocomplete feature stops working altogether.
HTML Code:
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Case Category <button style="margin-top: 5px;" id = "add_field" class="add_field btn btn-primary btn-xs">+</button></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="search_keyword_idd" class="search_keywordd form-control col-md-5 col-xs-12" name="category[]" required="required" type="text">
<input type="hidden" name="catID[]" id="catID"/>
<div id="resultd"></div>
</div>
</div>
<div class = "t"></div>
Javascript/jQuery Pt. 1: (on the first input field)
<script type="text/javascript">
$(function(){
$(".search_keywordd").keyup(function()
{
var search_keyword_value = $(this).val();
var dataString = 'search_keyword='+ search_keyword_value;
if(search_keyword_value!='')
{
$.ajax({
type: "POST",
url: "../resources/ajax-search/case_category.php",
data: dataString,
cache: false,
success: function(html)
{
$("#resultd").html(html).show();
}
});
}
return false;
});
jQuery("#resultd").on("click", ".show", function(e){
var showName = $('.returnName',this).text();
var showId = $('.returnID',this).text();
$('#search_keyword_idd').val(showName);
$('#catID').val(showId);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keywordd")){
jQuery("#resultd").hide();
}
});
$('#search_keyword_idd').click(function(){
jQuery("#resultd").show();
});
});
</script>
Javascript/jQuery Pt. 2: (on the input fields that the user want to add)
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper3 = $(".t"); //Fields wrapper
var add_button3 = $("#add_field"); //Add button ID
var z = 1; //initlal text box count
$(add_button3).click(function(e){ //on add input button click
e.preventDefault();
if(z < max_fields){ //max input box allowed
z++; //text box increment
$(wrapper3).append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12"></label><div class="col-md-6 col-sm-6 col-xs-12"><input id="search_keyword_idd'+z+'" class="search_keywordd'+z+' form-control col-md-5 col-xs-12" name="category['+z+']" required="required" type="text"><input type="hidden" name="catID['+z+']" id="catID'+z+'"/><div id="resultd'+z+'"></div><button class="remove btn btn-dark">Remove</button></div></div>'); //add input box
$("#resultd"+z+"").css({"margin-top": "40px", "position": "absolute", "display": "none", "border-top": "0px", "overflow": "visible", "border": "1px #F0F0F0 solid", "float": "left", "padding": "0"});
//$(".show"+z+"").css("cursor:", "default", "margin:", "0", "display:", "none", "background:", "#F7F7F7", "width:", "548px", "border-bottom:", "#F0F0F0 1px solid", "position:", "relative", "z-index:", "10");
}
$(".search_keywordd"+z+"").keyup(function() {
var search_keyword_value = $(this).val();
var dataString = 'search_keyword='+ search_keyword_value;
if(search_keyword_value!='') {
$.ajax({
type: "POST",
url: "../resources/ajax-search/case_category.php",
data: dataString,
cache: false,
success: function(html)
{
$("#resultd"+z+"").html(html).show();
}
});
}
return false;
});
jQuery("#resultd"+z+"").on("click", ".show", function(e){
var showName = $('.returnName',this).text();
var showId = $('.returnID',this).text();
$('#search_keyword_idd'+z+'').val(showName);
$('#catID'+z+'').val(showId);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keyword"+z+"")){
jQuery("#resultd"+z+"").hide();
}
});
$('#search_keyword_idd'+z+'').click(function(){
jQuery("#resultd"+z+"").show();
});
$(wrapper3).on("click",".remove", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').parent('div').remove(); y--;
});
});
});
PHP:
<?php
include('config.php'); //working just fine
if($_POST)
{
if($_POST['search_keyword']) // returns an error from answer 1
{
$similar = mysql_real_escape_string($_POST['search_keyword']);
$result=mysqli_query($conn, "SELECT * FROM casecategory WHERE (caseCategoryName like '" . $_POST["search_keyword"] . "%')");
if (mysqli_num_rows($result) > 0) {
while($row=mysqli_fetch_array($result))
{
?>
<div class="show" align="left">
<span class="returnName"><?php echo $row["caseCategoryName"] ?></span>
<span class="returnID" style="display:none"><?php echo $row['idCaseCategory'];?></span>
</div>
<?php
}
}
else {
?>
<div class="show" align="left">
<span class="returnMessage">No matching records found.</span>
</div>
<?php
}
}
mysqli_close($conn);
}
?>
I am at a loss as to which part(s) are not working and how to fix it so that:
The auto-complete box displays under the current onfocus input
When max-amount of inputs are added and then removed, that the auto-complete feature still works
See if this is what you are looking for. The HTML appears to be correct when looking at the console, but I don't have your css, so it's hard to say. The changes:
1) I have removed all the id values in favor of using just classes. That way you don't have to worry about id values...what works for a static block of html, will work for a dynamic block so note all the changes in the html
2) I have consolidated all js to just what I have pasted below
3) There is only one instance of ajax
4) All clicks are relegated to one if/else/else if condition:
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Case Category <button style="margin-top: 5px;" class="add_field btn btn-primary btn-xs">+</button></label>
<div class="col-md-6 col-sm-6 col-xs-12 search_wrap">
<input class="search_keyword form-control col-md-5 col-xs-12" name="category[]" required="required" type="text">
<input type="text" name="catID[]" />
<div class="resultd"></div>
</div>
</div>
<div class = "t"></div>
Javascript
<script type="text/javascript">
// I have created an ajax instance incase you want to use ajax else where
// You just make a new instance instead of copy/pasting same scripts
var AjaxEngine = function()
{
$ = arguments[0];
var url = '../resources/ajax-search/case_category.php';
// Allows you to use a different destination for the call
this.useUrl = function()
{
if(arguments.length === 1) {
url = arguments[0];
}
return this;
};
this.ajax = function(data,userFunc)
{
$.ajax({
type: "POST",
url: url,
// Send data object instead of string
data: data,
cache: false,
// Not hardcoding a response will allow
// for flexibility
success: function(response) {
userFunc(response);
}
});
}
}
// I just created a php-like empty function
function empty(val)
{
return (val !== null && val !== false && val !== '')? false : true;
}
// Group everything into one document ready
$(function(){
// Hide dropdown
$(this).click(function(e) {
var target = $(e.target);
if(!target.hasClass('resultd')) {
$('.resultd').hide();
}
});
// Create ajax engine
var Remote = new AjaxEngine(jQuery);
// run the keyword search, I would use this here so you can
// get all instances of keyup, both dynamic and static instances
$(this).on('keyup',".search_keyword",function(e){
var sTerm = $(this).val();
var thisWrap = $(this).parents('.form-group').find('.resultd');
if(!empty(sTerm)) {
Remote.ajax({ search_word:sTerm },function(response) {
thisWrap.html(response).show();
});
}
});
// Create the copy-to function
function copyTo(thisShow)
{
var showName = thisShow.find('.returnName').text();
var showId = thisShow.find('.returnID').text();
var thisWrap = thisShow.parents('.search_wrap').find('input[name=category\\[\\]]');
thisWrap.val(showName);
thisWrap.next().val(showId);
};
// Create the add field function
function addNewField(obj,max_fields,z)
{
if(z < max_fields){
obj.append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12"></label><div class="col-md-6 col-sm-6 col-xs-12 search_wrap"><input class="search_keyword search_keywordd form-control col-md-5 col-xs-12" name="category[]" required="required" type="text"><input type="text" name="catID[]" /><div class="resultd"></div><button class="remove btn btn-dark">Remove</button></div></div>'); //add input box
var lastRes = obj.find(".resultd");
lastRes.last().css({"margin-top": "40px", "position": "absolute", "display": "none", "border-top": "0px", "overflow": "visible", "border": "1px #F0F0F0 solid", "float": "left", "padding": "0"});
z++;
// return the auto-increment count
return z;
}
// return the max count
return max_fields;
}
var settings = {
z: 1,
max_fields: 10
}
$(this).on("click", '.show,.search_keyword,.add_field,.remove', function(e) {
// Target the click
var clicked = $(this);
// Hide by default
$(".resultd").hide();
// Run the copyto
if(clicked.hasClass("show")) {
copyTo(clicked);
}
// Show the search window
else if(clicked.hasClass("search_keyword")) {
clicked.parents('.search_wrap').find('.resultd').show();
}
// Add fields
else if(clicked.hasClass("add_field")) {
settings.z = addNewField($(".t"),settings.max_fields,settings.z);
}
// remove fields
else if(clicked.hasClass("remove")) {
e.preventDefault();
clicked.parent('div').parent('div').remove();
settings.z--;
}
});
});
</script>

Categories