Passing data using array from View (Blade) to Controller in laravel

Passing data using array from View (Blade) to Controller in laravel - javascript

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

Related

Multistep form won't move to the next form fields

This is my liveire component for handling logic. I am unable to move to the next step as the next button is not showing or is hidden. I tried using switch statement but to no avail.
I can't seem to figure our where the error is plus i am new to livewire.
Any help is greatly appreciated.
Thank You
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class CpdApplicationForm extends Component
{
use WithFileUploads;
// Forms Components Go Here
public int $totalSteps = 5;
public int $currentStep = 1;
public function mount()
{
$this->currentStep = 1;
}
public function render()
{
return view('livewire.cpd-application-form');
}
public function increaseStep()
{
// $this->resetErrorBag();
$this->validateData();
$this->currentStep++;
if ($this->currentStep > $this->totalSteps) {
$this->currentStep = $this->totalSteps;
}
}
public function decreaseStep()
{
$this->resetErrorBag();
$this->currentStep--;
if ($this->currentStep < 1) {
$this->currentStep = 1;
}
}
}
This is the livewire blade component.
<form wire:submit.prevent="register">
#if ($currentStep == 1)
#endif
#if ($currentStep == 2)
<div class="step-two">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 2/5 - Personal Details</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Full Name</label>
<input type="text" class="form-control" placeholder="Name Of Personnel "
wire:model="full_name" required>
<span class="text-danger">#error('full_name'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Phone</label>
<input type="text" class="form-control" placeholder="Phone Number"
wire:model="phone">
<span class="text-danger">#error('phone'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Email</label>
<input type="text" class="form-control"
placeholder="Your Organization Issued Email Address"
wire:model="email">
<span class="text-danger">#error('email'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Service Type</label>
<select class="form-control" wire:model="service_type" required>
<option value="" selected>Select Service Type</option>
<option value="United States">Accreditation Only</option>
<option value="India">Accreditation & Venue</option>
<option value="Rwanda">Accreditation, Venue & Facilitation</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">MSSI Liaison</label>
<select class="form-control" wire:model="liaison">
<option value="" selected>Select Your Point Of Contact At MSSI</option>
<option value="United States">Miss Victoria Koomson</option>
<option value="India">Mr. Emmanuel Addo Charwetey</option>
<option value="Rwanda"></option>
<option value="Nigeria">Nigeria</option>
<option value="Phillipines">Phillipines</option>
<option value="Canada">Canada</option>
<option value="Bangladesh">Bangladesh</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
{{-- <div class="col-md-6">--}}
{{-- <div class="form-group">--}}
{{-- <label for="">City</label>--}}
{{-- <input type="text" class="form-control" placeholder="Enter city" wire:model="city">--}}
{{-- <span class="text-danger">#error('city'){{ $message }}#enderror</span>--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 3)
<div class="step-three">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 3/5 - Education | Training</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-12">
<div class="form-group mt-15">
<label class="input-label"> Please enter your learning objectives for this
course (a maximum of five and a
minimum
3) <br><b>- Should reflect measurable outcomes of the topic.</b></br>
</label>
<textarea id="summernote" name="description"
class="form-control #error('description') is-invalid #enderror"
placeholder="{{ trans('forms.webinar_description_placeholder') }}">{!! !empty($webinar) ? $webinar->description : old('description') !!}</textarea>
#error('description')
<div class="invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
<b>Target audience (Professional roles)</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks">
Consultants
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Training Grades
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Other
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
<b>Teaching Methods</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Lectures
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Discussion Group
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Quizzes
MCQs
etc
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="card-body">
<b>Possible Date(s)</b> of training programme.
</div>
<div class="col-md-6">
<div id="date-fields">
<label>Select Date</label>
<input type="date" class="btn btn-primary btn-sm mt-3" id="date-picker"
name="dates[]" multiple
value="{{ old('dates.*') }}">
#error('dates.*')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
</div>
</div>
<div class="col-md-4">
Tap 'Add Date'
<button id="add-date-btn" type="button"
class="btn btn-primary btn-sm mt-3">Add Date
</button>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 4)
<div class="step-four">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 4/5 - Facilitators | Speakers | Test Questions
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ updated Curriculum Vitae</b>. Note that the acceptable
format is PDF.
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ electronic photograph </b>. Note that the acceptable
format is PDF. <br>- Should be professionally inclined </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ E-Signature or of person co-signing </b> the certificate.
Note that the
acceptable
formats are jpg and png. <br>- Lead speaker signs in the case of multiple
facilitators </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card-body">
Please upload your <b>pretest questions</b>. Note that the acceptable formats
are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
Please upload your <b>post questions</b>. Note that the acceptable formats are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 5)
<div class="step-five">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 5/5 - Facility | Platform</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>conference hall</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Arrangement of <b>catering services</b> .ie food, drinks etc.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online webinar platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online on-demand platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
#endif
<div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">
#if ($currentStep == 1)
<div></div>
#endif
{{----}}
#if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4 || $currentStep == 5)
<button type="button" class="btn btn-md btn-secondary">Back</button>
#endif
{{----}}
#if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3 || $currentStep == 4)
<button type="button" class="btn btn-md btn-success">Next</button>
#endif
#if ($currentStep == 5)
<button type="submit" class="btn btn-md btn-primary">Submit</button>
#endif
</div>
</form>

Getting a HTML select value and and input value from submit angular 6

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);
}

Serialize data in AJax

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>

Input name is not getting interpolated from {{}} to the value

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.

Get selected text from drop down list using name attribute jQuery

I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>

Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.

Develop Reference

JavaScript is the programming language of the Web.

Passing data using array from View (Blade) to Controller in laravel - javascript

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

Related

Multistep form won't move to the next form fields

Getting a HTML select value and and input value from submit angular 6

Serialize data in AJax

Input name is not getting interpolated from {{}} to the value

Get selected text from drop down list using name attribute jQuery

Categories

Resources