I am using AngularJs and have inputs with predefined value from ng-repeat. I want resend those data value via ng-click function to treat data.
The problem the data is not submitted
<label>Price</label>
<input type="text" class="form-group form-control" ng-value=s.prix required="required" ng-model="prix" >
</div>
<div class="modal-footer">
<button type="submit" id='submit' ng-click="edit()" class="btn btn-primary" data-dismiss="modal">Save</button>
s.prix is a value of column in the table prix (ng-repeat="s in produit") if you know what i mean.
Use ng-repeat instead as model
Like this
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
Then pass object in edit.
Try like this
ng-click="edit(s)"
JS
$scope.edit=function(s){
console.log(s);
}
html:
<body ng-controller="myCtrl">
<label>Price</label>
<div ng-repeat="s in produit">
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
<button type="submit" id='submit' ng-click="edit(s)" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</body>
controller:
myApp.controller('produitCtrl', ['$scope',function($scope){
$scope.produit = [{prix:'hello'}];
$scope.edit=function(s){
console.log(s);
}
}]);
Related
I am appending a new row which can dynamically add new elements:
$('body').on('click','#add',function() {
++i;
$("#dynamic_field").append('<tr><td>
<select class="form-control select2"
id="leavers_trax_id['+i+']" name="addmore['+i+'][trax_id]">
<option value="" data-rule-required="true" data-msg-required="Department is required">
Trax Id
</option>
#foreach($employee_trax_id as $employee)
<option value="{{$employee->trax_id}}">{{$employee->trax_id}}</option>
#endforeach
</select></td><td>
<input type="number" name="addmore['+i+'][salary]" placeholder="Last Gross Salary"
class="form-control name_list" data-rule-required="true"
data-msg-required="Department is required"/></td><td>
<input type="date" name="addmore['+i+'][date]" placeholder="Date"
class="form-control name_list" data-rule-required="true"
data-msg-required="Department is required"/></td><td>
<button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
And I'm opening a modal on a submit button click to take an input for the email so the type for that is button. I want to check if any of the dynamically added fields are empty and if so, it should show a appropriate message, it could be a toastar as well, i cannot call the validate method onClickEvent:
<div class="col-12 button_div">
<div class="form-group text-center mt-2">
<button type="button" class="btn btn-primary" id="form_btn">
Submit
</button>
</div>
</div>
I did some research and I wasn't able to find anything on it. I have an input where the person can input a location, but I also want them to be able to add another, alternate location. I basically need a button to open a form. Here is the code for the form:
<div class="form-group">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City"
width: 50%;>
</div>
Here is the code for the button:
<center>
<button id="locationAlternate" type="submit" class="btn btn-primary">
Alternate Location
</button>
</center>
Is this what are you looking for?
$('#locationAlternate').on('click',function() {
$('#location').append('<div class="form-group" id="altloc"><label for="">Alternate Location: </label> <input name = "AltcityForm" class="form-control" placeholder="Enter Alternate Location" width: 50%;></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="location">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City" width: 50%;>
</div>
<button id="locationAlternate" type="submit" class="btn btn-primary">Alternate Location</button>
im working with .Net and Vue and I cant really bind a value in a label
<li v-for="restaurant in vHolidays.data" >
<form id="1">
<div>
<label >{{restaurant.restaurantId}}</label>
<input type="text" class="form-control" value=HERE>
</div>
<button type="button" class="btn btn-danger btn-block" #click="test()">Modificar</button>
</form>
</li>
In "HERE" I want to put the same as {{restaurant.restaurantId}} that alredy works .
Thanks
You should use v-bind directive to bind tag attribute values to Vue expression:
<input type="text" class="form-control" v-bind:value="restaurant.restaurantId">
or its shorthand ::
<input type="text" class="form-control" :value="restaurant.restaurantId">
Read more about this directive here: link
I have some fields inside a form tag and submit button outside a form tag. If any of the fields inside a form is empty my form should not be submitted. For this I used the required attribute but it was not working since submit button was outside of the <form> and also used novalidate attribute. Nothing seems to work.
Below is my code:
<section id="profile" class="content-header">
<div class="thumbnail">
<button type="submit" class="btn btn-block btn-success" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
</div>
<div class="row">
<form name="profileForm" role="form">
<div class="form-group col-md-6">
<label for="firstName"> First Name </label>
<input type="text" class="form-control" id="firstName" ng- model="profileDetails.firstName" ng-disabled="viewProfile" required/>
</div>
<div class="form-group col-md-6" ng-if="userDetails.role==0">
<label for="firstName"> Middle Name </label>
<input type="text" class="form-control" id="middleName" ng- model="profileDetails.middleName" ng-disabled="viewProfile" />
</div>
</form>
</div>
</section>
like FirstName and MiddleName there are many other fields without filling any of those fields my form should not be submitted, can anyone suggest me the best approach for this. My angularController is:
(function() {
function profileController($scope, profileFactory, $loading) {
$scope.updateProfile = function() {
$loading.start("main");
profileFactory
.updateProfile($scope.profileDetails)
.then(function(response) {
var updatedUserDetails = response.user;
if (updatedUserDetails.imagePath !== null) {
$scope.profileDetails.imagePath = updatedUserDetails.imagePath;
$scope.profileDetails.profieImageBytes = updatedUserDetails.profieImageBytes;
}
angular.extend($scope.userDetails, $scope.profileDetails);
$scope.editProfile();
})
.catch(function() {
$loading.finish("main");
});
};
$loading.finish("main");
}
profileController.$inject = ["$scope", "profileFactory", "$loading"];
angular
.module("vResume.profile")
.controller("profileController", profileController);
})();
You typically use the .$invalid field on the form with ng-disabled for this.
<button type="submit" class="btn btn-block btn-success" ng-disabled="profileForm.$invalid" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
See the angularjs docs.
The view.html looks like this, what am I missing because of which the tables are populated with null values ?
<form class="form-inline form-fields" action="SubmitArticle" method="POST">
<fieldset>
<div class="control-group success">
<label class="control-label" for="input01"><a>Author Name</a></label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" name="${article?.author}">
</div>
</div>
<div class="form-actions">
<button class="btn btn-success btn-large span2" type="submit" name="commit"> Submit </button>
</div>
<div class="control-group right-area success">
<label class="control-label" for="input01"><a>Abstract</a></label>
<div class="controls">
<textarea id="textarea" class="input-xlarge" rows="3" style="width: 498px; height: 283px;" name="${article?.abstract}"></textarea>
</div>
</div>
</fieldset>
</form>
and the action in my controller looks like this:
public static void SubmitArticle(String article_name, User author, String article_abstract) {
Article article = new Article(article_name, author, article_abstract);
article.save();
}
<input type="text" class="input-xlarge" id="input01" name="${article?.author}">
The name field is incorrect, the name field should be the same as the attribute it will be mapped to in your object. What you have set as ${article?.author} should be value. Read a little more on Form to Object binding.