I have this html markup:
<div data-ng-controller="VehicleProfileController">
<modal title="Add Vehicle Info" visible="showVehicleInfo">
<div class="container">
<div class="col-xs-4">
<div class="row">
Title <input type="text" ng-model="NewVMPTitle" class="form-control"/>
Miles <input type="text" ng-model="NewVMPMiles" class="form-control"/>
</div>
<div class="row">
<button ng-click="addVehicleData()" class="btn btn-success pull-right">Save</button>
</div>
</div>
</div>
</modal>
</div>
Then in the controller I have this:
$scope.addVehicleData = function () {
alert($scope.NewVMPTitle + ' ' + $scope.NewVMPMiles);
};
Both NEWVMPTitle and NewVPMMiles are empty, am I missing something?
I think it is better to parsing parameter with ng-model to controller instead of using scope to catch a value from ng-model
Title <input type="text" ng-model="item.title" class="form-control"/>
Miles <input type="text" ng-model="item.miles" class="form-control"/>
<button ng-click="addVehicleData(item)" class="btn btn-success pull-right">Save</button>
and this is for the js
$scope.addVehicleData = function (item) {
alert(item.title + ' ' + item.miles);
};
Related
I'm creating a clone of a div along with all the elements it contains. For the new div I'm changing the IDs, I'm able to change all of them but the div one, any idea what I'm doing wrong?
HTML
<form class="form-horizontal" action="${pageContext.request.contextPath}/search" method="post">
<div class="card" id="criteriaContainer_0">
<div class="card-body">
<div class="row">
<div class="col-sm-12" id="andOr_0">And</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="input-group mb-3">
<input type="text" class="form-control" id="leftParenthesis_0" readonly>
<div class="input-group-append">
<button class="btn btn-outline-success" id="addLeftParenthesis_0" title="Add left parenthesis" onclick="addLeftParenthesis(this)" type="button">+</button>
<button class="btn btn-outline-danger" id="delLeftParenthesis_0" title="Remove left parenthesis" onclick="delLeftParenthesis(this)" type="button">-</button>
</div>
</div>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" id="criteria_0" placeholder="Enter search term" name="criteria_0" required>
</div>
<div class="col-sm-2">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-danger" id="delRightParenthesis_0" title="Remove right parenthesis" onclick="delRightParenthesis(this)" type="button">-</button>
<button class="btn btn-outline-success" id="addRightParenthesis_0" title="Add right parenthesis" onclick="addRightParenthesis(this)" type="button">+</button>
</div>
<input type="text" class="form-control" id="rightParenthesis_0" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-10">
<button class="btn" id="addCriteria" title="Add (Up to 5 criteria)" onclick="addSearchTerm()" type="button"><i class="fas fa-plus-circle" style="font-size:48px;color:green"></i></button>
<button class="btn" id="delCriteria" title="Delete search term" onclick="delSearchTerm()" type="button"><i class="fas fa-minus-circle" style="font-size:48px;color:red"></i></button>
</div>
</div>
</form>
JQuery
var current_id = 0;
function addSearchTerm() {
current_id++;
var newCriteria = $("#criteriaContainer_0").clone(true);
// Setting Ids for new elements
// NOT WORKING (Always shows as criteriaContainer_0 in the new ones)
$(newCriteria).find("#criteriaContainer_0").attr("id", "criteriaContainer_" + current_id);
// Beyond this point everything works as expected (andOr_1, andOr_2, ...)
$(newCriteria).find("#andOr_0").attr("id", "andOr_" + current_id);
$(newCriteria).find("#leftParenthesis_0").attr("id", "leftParenthesis_" + current_id);
$(newCriteria).find("#addLeftParenthesis_0").attr("id", "addLeftParenthesis_" + current_id);
$(newCriteria).find("#delLeftParenthesis_0").attr("id", "delLeftParenthesis_" + current_id);
$(newCriteria).find("#criteria_0").attr("id", "criteria_" + current_id);
$(newCriteria).find("#delRightParenthesis_0").attr("id", "delRightParenthesis_" + current_id);
$(newCriteria).find("#addRightParenthesis_0").attr("id", "addRightParenthesis_" + current_id);
$(newCriteria).find("#rightParenthesis_0").attr("id", "rightParenthesis_" + current_id);
// Cleaning values
$(newCriteria).find("#leftParenthesis_" + current_id).val("");
$(newCriteria).find("#criteria_" + current_id).val("");
$(newCriteria).find("#rightParenthesis_" + current_id).val("");
// Insert new criteria
$(newCriteria).insertAfter(".card:last");
if (current_id > 4) {
$("#addCriteria").prop("disabled",true);
} else {
$("#addCriteria").prop("disabled",false);
}
};
Please try to change
var newCriteria = $("#criteriaContainer_0").clone(true);
to
var newCriteria = $("#criteriaContainer_0").clone(true).attr("id", "criteriaContainer_" + current_id);
Note: Newbie to javascript and PHP
Requirement:
User has the option to add multiple forms and multiple levels as shown in the image.
structure:
idnum = 0
next = 1;
dimandlevels = [{}];
$(document).on('click', '.addlevel', function() {
clickedIdnum = $(this).data('idnum');
//console.log(idnum+'\n');
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + clickedIdnum + next);
newTextBoxDiv.after().html('<input class="input form-control textboxclass" id="textbox' + next + '" name="dimdetail[' + idnum + '][2][' + next + ']" type="text" placeholder="Enter Level ' + (next + 1) + ' value ">');
newTextBoxDiv.appendTo(".TextBoxesGroup" + idnum);
next++;
});
$(document).on('click', '.removelevel', function() {
if (next == 1) {
alert("No more textbox to remove");
return false;
}
next--;
$("#TextBoxDiv" + next).remove();
});
<h3><b>Create Texts</b></h3> <br>
<form class="form-horizontal" name="add_form" id="add_form">
<fieldset>
<form class="form-horizontal" role="form">
<fieldset>
<legend>Enter Dimension Details</legend>
<form class="form-horizontal" role="form">
<div class="controls" id="vignetteform">
<div id="dimensionform0">
<div class="well">
<div class="row">
<label class="col-lg-3 control-label">Dimension Text:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclassdim" type="text" name="dimdetail[0][0]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Dimension Description:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclass" type="text" name="dimdetail[0][1]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Enter Level:</label>
<div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1">
<div class="controls TextBoxesGroup0">
<div id="TextBoxDiv00">
<input class="form-control textboxclass" id="textbox" type="text" name="dimdetail[0][2][0]" placeholder="Enter Level 1 Value" />
</div>
</div>
<button class="btn btn-info addlevel" type="button">Add Level</button>
<button class="btn btn-info removelevel" type="button">Remove level</button>
<span id="error_message" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</form>
</fieldset>
</form>
<div class="row">
<div class="col-md-8">
<button class="btn btn-info adddimension" type="button">Add Dimension</button>
<button class="btn btn-info removedimension" type="button">Remove Dimension</button>
<input type="button" name="submit" id="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</fieldset>
</form>
<script src="includes/js/addlevelform.js"></script>
<script src="includes/js/adddimensionform.js"></script>
$(document).ready(function(){
var next = 1;
$(".adddimension").click(function(){
var newDimensionFormDiv = $(document.createElement('div'))
.attr("id",'dimensionform' + next);
newDimensionFormDiv.after().html(
'<div class="well"><div class="row"><label class="col-lg-3 control-label">Dimension Text:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div> <input class="form-control textboxclassdim" type="text" name="dimdetail['+ next +'][0]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Dimension Description:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div><input class="form-control textboxclass" type="text" name="dimdetail['+ next +'][1]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Enter Level:</label><div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1"><div class="controls TextBoxesGroup'+ next +'" ><div id="TextBoxDiv'+ next +'0"><input class="form-control textboxclass" id="textbox'+ next +'" type="text" name="dimdetail['+ next +'][2][0]" placeholder="Enter Level '+ next +' Value" /></div></div><button data-idnum="'+idnum+'" class="btn btn-info addlevel" type="button">Add Level</button><button class="btn btn-info removelevel" type="button">Remove level</button><span id="error_message'+ next +'" class="text-danger"></span></div></div></div></div>'
);
newDimensionFormDiv.appendTo("#vignetteform");
next++;
idnum++;
var jsonObj = {idnum:1};
dimandlevels.data.push(idnum:1);
console.log(dimandlevels);
});
$(".removedimension").click(function(){
if(next==1){
alert("No more dimension to remove");
return false;
}
next --;
idnum--;
$("#dimensionform" + next).remove();
});
});
Issue: 1. The add level works only on first form
2. And the array indexes should be proper
So i need a way such that i can create multiple dimensions with levels with proper level ids.
Thank you and sorry for my bad code !!!! I am very new to programming :/
when i click on id save_newsection i need value of class school_name means school name
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
</div>
If there is only one input with the class .school_name, use this
$("#save_newsection").click(function() {
var value = $("input.school_name").val();
// use value
});
If there could be more of them throughout the document use this:
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
// use value
});
$("#save_newsection").click(function() {
var value = $(".school_form_submit .school_name").val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school_form_submit">
<div class="form-group">
<label class="control-label col-md-3">School Name
<span class="required"> * </span>
</label>
<div class="col-md-9">
<input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
I would like to create dynamically some input fields, that I used ng-repeat with ng-model. I meet some problems. ng-model without ng-repeat works correctly (transitPointStart). transits should work exactly the same, but they don't. What am I missing?
(link to plunker on the bottom)
transitPointStart:
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start">Start Point</label>
<input type="text" class="form-control" name="field_start" id="field_start"
ng-model="transitPointStart.city" placeholder="e.g. London"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start_date">Date</label>
<div class="input-group">
<input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
name="field_start_date"
datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
is-open="datePickerOpenStatus.field_start_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalendar('field_start_date')"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
transits:
<div class="row" ng-repeat="transit in transits">
<!--TEST-->
<!--<div> Model: {{transit.modelName}} </div>-->
<!--<div> dateModel: {{transit.dateModelName}} </div>-->
<!--<div> datePicker: {{transit.datePickerName}} </div>-->
<!--<div> fieldName: {{transit.fieldName}} </div>-->
<!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
<!--<div> button: {{transit.buttonDateName}} </div>-->
<!--/TEST-->
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
<input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
ng-model="transit.modelName" placeholder="transit"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
<div class="input-group">
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
name="transit.fieldDateName"
datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
is-open="transit.datePickerName"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="transit.buttonDateName"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
</div>
<div class="col-lg-2"></div>
</div>
controller:
$scope.transits = [];
$scope.addTransit = function () {
var tempId = $scope.transits.length + 1;
var tempName = "transitPoint_" + tempId;
var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
var tempDateName = tempName + ".date"; // as above (transitPoint.date)
var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
var tempFieldName = "field_transit_" + tempId;
var tempFieldDateName = "field_transit_date_" + tempId;
var tempButton = "openCalendar('" + tempFieldDateName + "')";
$scope.transits.push({
modelName: tempModelName,
dateModelName: tempDateName,
datePickerName: tempDate,
fieldName: tempFieldName,
fieldDateName: tempFieldDateName,
buttonDateName: tempButton
});
}
/*
{...} - rest of code, sending queries (vm.save() ect.)
*/
$scope.datePickerOpenStatus = {};
$scope.datePickerOpenStatus.field_start_date = false;
$scope.datePickerOpenStatus.field_end_date = false;
// I should've used loop here
$scope.datePickerOpenStatus.field_transit_date_1 = false;
$scope.datePickerOpenStatus.field_transit_date_2 = false;
$scope.datePickerOpenStatus.field_transit_date_3 = false;
$scope.openCalendar = function (date) {
$scope.datePickerOpenStatus[date] = true;
};
Demo: Plunker
Some of the bindings in your HTML are not correct. You need to use interpolation (the {{ }} format) whenever you need to emit data from the model into the HTML.
For example, when assigning IDs, you have:
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...
This should be:
<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...
Second, your ng-click syntax is not correct. You should not create the openCalendar expression in JavaScript, but in your HTML, like so:
<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">
I think your Plnkr is missing some scripts and/or steps to make the calendar work, but these changes will at least cause your openCalendar function to get called.