I just take a simple array and there is add more button in which i just push one more object to that array.
The array is ng-repeat which renders all the fields. My code are given below.
<div ng-init="core.iv=[{email:'',name:''}];">
<div ng-repeat="n in core.iv track by $index">
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="email" class="form-control mIn" ng-model="n.email" placeholder="Email id" />
<span class="bar"></span>
</div>
</div>
<div class="col-sm-6 pad0">
<div class="form-group">
<input type="text" class="form-control mIn" ng-model="n.name" placeholder="Name" />
<span class="bar"></span>
</div>
</div>
</div>
<div class="col-xs-12 pad0 text-right">
<button class="btn btn-t-primary btn-sm" ng- click="core.iv.push({email:'',name:''});">add more</button>
</div>
</div>
Related
I am dynamically generating modals with form that look like described at the bottom. I searched and found How to handle multiple forms in one page but I unfortunately can't find out how I can handle posting one of the form if exactly that one has been clicked/submitted. Any help will be greatly appreciated.
<td class="actions">
<a href="#modalForm-1" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
<td class="actions">
<a href="#modalForm-2" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
The other modals bear the ids "modalForm-3", "modalForm-4" and so on and can randomly be clicked/submitted.
D.
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>
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.
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>
I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?
This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}
jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"