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 :/
Related
I am trying to create inputs with jquery when user click on specific button as i create the inputs i want them to stop creating if the number of inputs exceeds 10
and here is the code
<script>
$(document).ready(function(){
var inputs = $('.product-options').length;
var max_inputs = 15;
var i=inputs;
var number = inputs;
if(inputs < 2){
$('.add_field_button').click(function(e){
e.preventDefault();
number++
i++;
$('.form-product').append('<span id="row'+i+'" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen'+number+'"'+'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice'+number+'"'+ 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb'+number+'"'+'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
});
}
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
number--
i--;
});
});
</script>
html code
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
You can use an if statement to check whether i is smaller than 11:
$(document).ready(function() {
var inputs = $('.product-options').length;
var max_inputs = 15;
var i = inputs;
var number = inputs;
if (inputs < 2) {
$('.add_field_button').click(function(e) {
e.preventDefault();
number++
i++;
if (i < 11) {
$('.form-product').append('<span id="row' + i + '" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen' + number + '"' + 'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice' + number + '"' + 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb' + number + '"' + 'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
}
});
}
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
number--
i--;
});
});
<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" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
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);
I'm still very new to jQuery, and would need help to how to increment 3 elements in this code.
name, id & for.
The name consist of products[0]category, id consist of checkbox[0], for consist of checkbox[0] which is for labels on the checkbox that id use.
I've tried searching for examples. But all them haven't found any good results that i could learn from unfortunately. So in the codes below, they're not there to increase increment as i have totally no idea what else i can do to increase increment numbering.
$(document).ready(function() {
let $append = $('#append');
// append location's data listing
$append.on('change', '.location', function(){
var value = $(this).val();
$('.location_id').val($('#locations [value="'+value+'"]').data('locationid'));
$('.loc_desc').val($('#locations [value="'+value+'"]').data('locdesc'));
});
// enable checkbox for serialnumbers
$append.on('change','.enable-serial', function(){
let $item = $(this).closest('.product-item');
let $checkbox = $item.find('.enable');
$checkbox.prop('disabled', !this.checked);
});
// ctrl for key in checkbox
$append.on('click', '.keyin-ctrl', function() {
let $container = $(this).closest('.product-item');
let $serial = $container.find('.serial');
$container.find('.display').val(function(i, v) {
return v + $serial.val() + ';\n';
});
$serial.val('').focus();
});
// ctrl for del textarea
$append.on('click', '.undo-ctrl', function() {
let $container = $(this).closest('.product-item');
$container.find('.display').val('');
});
// clone product, increment products[x]var
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var index = $('.product-item').length;
var regex = /^(.+?)(\d+)$/i;
let $product = $append.find('.product-item.template')
.clone()
.show()
.removeClass('template')
.insertAfter('.product-item:last');;
$product.find('span').text('#' + itemNo);
$product.find(':checkbox').prop('checked', false);
$product.find('.enable').prop('disabled', true);
$product.find('input, textarea').val('');
$('#append').append($product);
});
// delete product, but remain original template intact
$('#delete_product').on('click', function(){
var itemNo = $('.product-item').length + 1;
let $product = $append.find('.product-item:last:not(".template")');
$product.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>{{ __('Product Details') }}</h4>
<hr>
<form method="post" action="">
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Product Setting') }}</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">{{ __('Add Product') }} <i class="fas fa-plus-square"></i></button>
<button type="button" id="delete_product" class="btn btn-dark ml-3">{{ __('Delete Last Product') }} <i class="fas fa-minus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item template">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __("Location") }}</label>
<div class="col-sm-2">
<input class="form-control location" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Description") }}</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Seial Number(s)') }}</label>
<div class="col-sm-5">
<input class="form-control enable serial" maxlength="25" placeholder="Key in Serial Number and hit button 'Key In'" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable keyin-ctrl" type="button" disabled>{{ __('Key In') }}</button>
<button class="btn btn-dark enable undo-ctrl" type="button" disabled>{{ __('Del') }}</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial" id="checkbox[0]" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox[0]">{{ __('tick to enable serialnumber')}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<div class="form-group row">
<div class="col-sm-12 ">
#csrf
<button type="submit" class="btn btn-dark float-right ml-4">Next <i class="fas fa-caret-right"></i></button>
<!--<button type="button" class="btn btn-secondary float-right" onclick="history.back()">Previous</button>-->
</div>
</div>
<datalist id="locations">
#foreach($locations as $location)
<option value="{{ $location->loc_name}}" data-locationid="{{ $location->location_id }}" data-locdesc="{{ $location->loc_desc }}"></option>
#endforeach
</datalist>
</form>
</div>
</main>
So how do I actually achieve this to add increment to the NAME, ID and FOR my clones?
From the original template of products[0]variable to products[1]variable, checkbox[0] to checkbox[1]
If you want to increment either an ID, class, etc. you can't use .clone(), like the documentation warns:
Using .clone() has the side-effect of producing elements with
duplicate id attributes, which are supposed to be unique. Where
possible, it is recommended to avoid cloning elements with this
attribute or using class attributes as identifiers instead.
You'll have to do it "manually", following a very simple example below:
$( "#addrow" ).click(function() {
var count = $("#product").children().length;
$("#product").append("<input id='field[" + count + "]' type='text'>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
</div>
<input id="addrow" type="button" value="Add field">
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.
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);
};