I'm adding dynamically a selected box items.
I want when I check a check-box set the value or the selected option of all the additional selected-box to the selected option of the first selected box.
So I'm using the following code to add dynamically input fields.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want when I Add a multiple additional selected-box and I check the checked box all the additional selected-box get the same selected option of the first selected-box.
That means when I add the first row and I select option1 , all the additional rows should get the option1 as the first additional row.
I'm still a beginner in jQuery and JavaScript, is it possible to do this and is it possible to do it with jQuery or JavaScript?
First you need to set unique id for each select item: id="id_casting${index}".
Then you set selected option if your check box has checked:
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(document).ready(function () {
$("body").on("click", ".add_new_frm_field_btn", function () {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(
`<div class="col-12 outer" data-index="${index}_${random}">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[${index}][id_casting]" id="id_casting${index}" >
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div> </div></div> `);
var checked = $("#checkAll").is(':checked')
if (checked)
$("#id_casting" + index).val($("#id_casting").find(":selected").val());
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btn btn-primary btn-lg pl-4 pr-0 check-button">
<label class="custom-control custom-checkbox mb-0 d-inline-block">
<input type="checkbox" class="custom-control-input" id="checkAll">
<span class="custom-control-label"> </span>
</label>
</div>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputState">Casting</label>
<select class="form-control maintCostField" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
<button type="button" class="btn btn-primary btn-lg top-right-button mr-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</div>
<div class="casting_details">
<div class="casting_details2">
<div class="d-flex flex-row mb-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am trying to copy full form on click add button,
copying only label name.
below JS code: below is js code trying to add form dynamically.
how to add same form below last div onclick '+' button.
using js code below, only adding panel, but it's not working.
document.getElementById('add').onclick = duplicate;
var i = 0;
var original = document.getElementById('add-form');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "add-form" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div class="row mt-4">
<div class="row">
<div class="col-md-3 text-center mt-3 ml-3">
<button type="button" class="btn btn-light" id="add"><i class="fas fa-plus fa-xs"></i></button>
</div>
<div class="col-md-3 text-center mt-3 ml-4">
<button type="button" class="btn btn-light" id="minus"><i class="ri-delete-bin-line mr-0"></i></button>
</div>
</div>
<div class="col-md mt-1" id="add-form" style="width: 100%;">
<button class="accordion btn btn-primary">Product screen</button>
<div class="panel">
<div class="col-sm-12">
<div class="card mt-3">
<div class="col-md-12">
<!-- first row -->
<div class="row" style="margin-top: 9px;">
<div class="col-sm">
<label for="fname">product_name
</label>
<input type="text" id="fname" class="form-control" placeholder="product_name">
</div>
<div class="col-sm">
<label for="fname">price
</label>
<input type="text" id="fname" class="form-control" placeholder="price">
</div>
<div class="col-sm">
<label for="fname">pur_id
</label>
<input type="text" id="fname" class="form-control" placeholder="pur_id">
</div>
<div class="col-sm">
<label for="field2">type
</label>
<select name="field2" id="field2" class="selectpicker form-control" data-style="py-0" width="50">
<option selected>select one</option>
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
after click add button displayed only this panel.
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div class="col-md-2">
<label>Product Variants</label>
<a class="btn btn-primary" id="add_variant" onclick="add_variant()"><i class="fa fa-plus"></i> add Variant</a>
</div>
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</div>
<div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</template>
</div>
i am new to java script i am trying to add some validations on my add product form in which i am trying to perform some append function in whixh i want to append a div but if the previous row is empty then it should not add/append new row but while doing so it just check validation for the 1st row when i add 2 nd add try to add 3rd it shows error
will please anybody help me to solve this,here is my code
JS:
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<button class="btn btn-danger"><i class="fa fa-
trash"></i></button>
</div>
<!--further fields-->
</div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i>
</button>
<!--further fields->
</div>
</div>
</template>
`
Here is the code:
const addVariant = document.getElementById("add_variant");
const productDescription = document.getElementById("product_description");
const errorAlert = document.querySelector(".alert");
const template = `<div class="row my-4 p-3 rounded productTemp">
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger btnDelete">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
`;
function addAlert(message) {
errorAlert.classList.add("show");
errorAlert.innerHTML = message;
setTimeout(() => {
errorAlert.classList.remove("show");
}, 3000);
}
addVariant.addEventListener("click", function() {
const productTemp = document.querySelectorAll(".productTemp");
const lastElement = productTemp[productTemp.length - 1];
const thickness = lastElement.querySelector('[name="thickness"]');
const thicknessUnit = lastElement.querySelector('[name="thickness_unit"]');
const productQty = lastElement.querySelector('[name="product_qty"]');
const productPrice = lastElement.querySelector('[name="product_cost_price"]');
const productUnit = lastElement.querySelector('[name="product_unit"]');
const productColor = lastElement.querySelector('[name="product_color"]');
if (
thickness.value !== "" &&
thicknessUnit.value !== "" &&
productQty.value !== "" &&
productPrice.value !== "" &&
productUnit.value !== "" &&
productColor.value !== ""
) {
productDescription.insertAdjacentHTML("beforeend", template);
} else {
addAlert("Fields can not be empty! 😑");
}
});
.productTemp {
background-color: #2c3035;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<body class="bg-dark text-white">
<div class="container mt-5 bg-dark text-white">
<div class="alert alert-danger alert-dismissible fade mb-5" role="alert"></div>
<div class="col-md-2 mb-4">
<label class="mb-2">Product Variants</label>
<a class="btn btn-primary" id="add_variant">
<i class="fa fa-plus"></i> add Variant
</a>
</div>
<div id="product_description">
<div class="row my-4 p-3 rounded productTemp">
<div class="col-sm-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
Getting a HTML select value and and input value from form submit ,
in here i get only undefined for the select value, and gives error on
Cannot read property 'target' of undefined
at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit
rightcomponent.component.html
<!--Form start-->
<form >
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (ngModelChange)="onSelected($event)" id="sel1">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
formSubmit(e){
var stock = this.onSelected(e);
console.log(stock);
var quantity = e.target.elements[0].value;
console.log(quantity);
}
onSelected(e){
var stock_company_name = e;
return stock_company_name;
}
I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D
<!--Form start-->
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
// create an Object model with form fields as key
Model = {
stockname: '',
companyname: ''
}
formSubmit(){
console.log(this.Model);
}
I have a blade form which has a repeater input box and a select box, the repeater works fine but how do i pass the data from those fields to back-end controller in laravel?
add.balde.php
<!--begin::Add-Invoice-Form-->
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" action="{{route('store_invoice')}}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-4">
<label>
Customer Name:
</label>
<select class="form-control m-select2" id="m_select2_1" name="customerId">
#foreach($customer_list as $customer)
<option value=" {{ $customer->id }} ">
{{ $customer->fName }} {{ $customer->mName }} {{ $customer->lName }}
</option>
#endforeach
</select>
</div>
<div class="col-lg-4">
<label>
Invoice Type:
</label>
<div class="m-radio-inline">
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" checked value="billable">
Billable
<span></span>
</label>
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" value="nonbillable">
Non Billable
<span></span>
</label>
</div>
</div>
</div>
<div id="m_repeater_1">
<div class="form-group row" id="m_repeater_1">
<div data-repeater-list="" class="col-lg-12">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-lg-4">
<label>
Summary Number:
</label>
<select class="form-control m-select2" id="m_select2_2" name="certificateId[]">
#foreach($certificate_list as $certificate)
<option value=" {{ $certificate->id }} ">
{{ $certificate->summary_no }} ( {{ $certificate->certificateType() }} )
</option>
#endforeach
</select>
</div>
<div class="col-lg-3">
<label>
Rate:
</label>
<input type="number" class="form-control m-input" name="rate" placeholder="Enter rate">
</div>
<div class="col-lg-3">
<br/>
<div data-repeater-delete="" class="btn btn btn-danger m-btn m-btn--icon">
<span>
<i class="la la-trash-o"></i>
<span>
Remove
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="m-form__group form-group row">
<div class="col-lg-4">
<div data-repeater-create="" class="btn btn btn-warning m-btn m-btn--icon">
<span>
<i class="la la-plus"></i>
<span>
Add
</span>
</span>
</div>
</div>
</div></div>
</div>
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="reset" class="btn btn-secondary">
Cancel
</button>
</div>
</div>
</div>
</div>
</form>
<!--end::Add-Invoice-Form-->
How do I send the values in array format when multiple select box have been filed using repeater?This images shows the UI for the form
Thank you
you can try something like this
<input type="text" value="val" name="somename[]">
<select name="someSelectName[]">
<option value="value">select 1
</option>
</select>
on server side you will receive selected values as array with given name
Change your
<div data-repeater-list="" class="col-lg-12">
To
<div data-repeater-list="arrayName" class="col-lg-12">
and It should work.
This makes the all the input names to have an array format of arrayName[number][input] and the number increments for each input and finally in the request sent you will have all the inputs in the arrayName
Below is the attached picture of the form constructor. As you can see it has {{service.name}} in it instead o fthe name itself.
I have a form inside that I have two ng-repeats with custom filters on it and inside that I have an input field. I am trying to have a unique name for my input field by adding an index or by using a field from the html response. Regardless of that, when I have name="{{customitem.name}}" or name="{{$index}}" the form generates a constructor with {{customitem}} or {{$index}} instead of the value it self. Also this form turned on and off using ng-if.
<form name="selectServiceForm">
<div data-ng-show="showAddServices">
<section class="content-header">
<div class="row">
<div class="col-lg-5 col-sm-5">
<h1>
Services
<small>Add or Modify Services</small>
</h1>
</div>
<div class="col-lg-7 col-sm-7 text-right btn-container">
<button type="button" class="btn btn-primary btn-sm" data-ng-disabled="selectServiceForm.$invalid" data-ng-click="selectServiceForm.$valid && save(true)">
<i class=" fa fa-save"></i>
<span class="indent-xs">Save</span>
</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="backToAddServices()">
<i class=" fa fa-arrow-circle-left"></i>
<span class="indent-xs">BACK</span>
</button>
</div>
</div>
</section>
<section class="content group-container">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Industry<sup style="color: red">*</sup></label>
<select class="form-control" id="select1" name="" data-ng-model="selectedIndustry" data-ng-change="onChangeIndustry(selectedIndustry)"
data-ng-options="industry.CategoryName for industry in Industry">
<option value="">Select Industry</option>
</select>
</div>
<div data-ng-show="isSecondLevelCategory">
<div class="form-group">
<label for="">
Category<sup style="color: red">*</sup>
</label>
<select class="form-control" id="selectCategory" name="" data-ng-model="selectedService" data-ng-change="showServices(selectedService)"
data-ng-options="service.CategoryName for service in ServiceTypes">
<option value="">Select Category</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<div class="selectServ">
<div class="pad20B p-relative">
<div data-ng-repeat="item in innerCategoryList | orderBy: 'SortOrder'" class="">
<div class="form-row pad10B mrg0A pad0B mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="item.checked" data-ng-checked="item.checked" data-ng-click="categorySelected(item)" />
<strong class="float-left">{{item.CategoryName}}</strong>
</label>
</div>
<div data-ng-show="item.checked" style="padding-left: 25px" class="pad15L">
<div data-ng-repeat="service in serviceList | servicelistfilter:item.ShortName | orderBy: 'SortOrder' ">
<div class="form-row mrg0A pad10B">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-6">
<div class="service-amount-label pad5L mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="service.checked"
data-ng-checked="service.checked" data-ng-click="selectService(service)" />
<strong class="float-left">{{service.Name}}</strong>
</label>
</div>
</div>
<!--TAP-4394
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-amount float-right" data-ng-show="service.checked && !service.hideRange">
<input type="text" placeholder="$50" data-ng-model="featureDetail.minAmount" name="minAmount" data-ng-required="featureDetail.isSelected">
<span class="mrg5R mrg5T">$</span>
<decimal-text-box class="mrg5R" max-value="service.MaxAmount" min-value="'invalid'" min-max-error="service.minMaxError" input-placeholder="'$min'" input-class="'selectService'" input-value="service.MinAmount"></decimal-text-box>
<span class="dash mrg5R mrg5T">–</span>
<span class=" mrg5R mrg5T">$</span>
<decimal-text-box class=" " max-value="'invalid'" min-value='service.MinAmount' min-max-error="service.minMaxError" input-placeholder="'$max'" input-class="'selectService'" input-value="service.MaxAmount"></decimal-text-box>
<div data-ng-show="service.checked && !service.hideRange" class="new-error-style">
<span data-ng-show="service.minMaxError" class="font-white">min should not be greater than max</span>
</div>
</div>
</div>-->
<!-- <div class="col-lg-5">
<div data-ng-show="service.checked && !service.hideRange">
<span data-ng-show="service.minMaxError" class="font-red">min should not be greater than max</span>
</div>
</div>-->
</div>
</div>
<div class="form-row pad10B mrg0A service-custom-text"
data-ng-repeat="customitem in customServiceList | listfilter:service.ShortName "
data-ng-show="service.checked" data-ng-model="customServiceList" ng-init="">
<!--data-ng-click="showEditCustomService(customSvc.CustomText,customSvc.Amount)"-->
<div class="col-md-5 col-sm-5">
<span class="pad0L pointer" data-ng-click="removeCustomService(service,customitem.Id)"><i class="fa fa-fw fa-minus-circle"></i></span>
<input type="text" data-ng-model="customitem.CustomText" placeholder="Custom Service" class="selectService w40 mrg5Bxs" />
<span class="mrg20L">
<decimal-text-box min-value="'invalid'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Amount'" input-class="'selectService w40 '" input-value="customitem.Amount"></decimal-text-box>
</span>
<textarea class="selectDescription" cols='60' rows='8' data-ng-model="customitem.CustomDescription" placeholder="Description (Optional)"></textarea>
</div>
<div ng-hide="businessModel.name == 'Book Now'">
<div class="center-bor" style="height: 231px;"></div>
<div class="float-left col-md-5 col-sm-5 activate-bundle-container gray">
<div class="activate-bundle-button" ng-hide="customitem.CustomServiceBundle && !customitem.isDeleteBundle" ng-click="activateBundle(customitem)">Activate Bundle Rates</div>
<div ng-show="customitem.CustomServiceBundle && !customitem.isDeleteBundle">
<div class="cancel-bundle-button" ng-click="cancelBundle(customitem)">Cancel</div>
<input name="customBundleQuantity" type="number" class="selectService mrg70T" placeholder="# of Bundles" ng-model="customitem.CustomServiceBundle.BundleQuantity" ng-change="change(customitem.CustomServiceBundle.BundleQuantity, customitem)" />
<div class="font-red" ng-if="selectServiceForm.customBundleQuantity.$error.pattern">Quantiy must be more than 1.</div>
<input type="number" step="0.5" name="{{service.name}}"
class="selectService mrg20T" placeholder="Price (per Unit)"
ng-model="customitem.CustomServiceBundle.BundlePrice"
ng-change="change(customitem.CustomServiceBundle.BundlePrice, customitem)" compare-price price-to-compare="customitem.Amount" />
<div class="font-red" ng-if="selectServiceForm.customBundlePrice.$error.priceValid">Bundle Price must be less than Original Price..</div>
<!--<decimal-text-box min-value="'2'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'# of Bundles'" input-class="'selectService mrg70T'" input-value="customitem.CustomServiceBundle.BundleQuantity" change="Change"></decimal-text-box>-->
<!--<decimal-text-box min-value="'1'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Price'" input-class="'selectService mrg20T'" input-value="customitem.CustomServiceBundle.BundlePrice"></decimal-text-box>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="custom-service" data-ng-show="service.checked">
<div class="pad10B pad0T pad0L">
<i class="fa fa-fw fa-plus-circle"></i>Add a Service
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of selectServiceForm-->
</div>
</section>
</div>
</form>
My project is using Angular v1.3.15, I know its an old version but it will be too much to jump forward from this version.