I'm building a contact book app and i made modal in child component with from with few input fields. I'm trying use that values and add them to parent component. I have passed data with $emit but cant figure out how to use it in parent component - to add it in that table row.
Here is child component code:
<form #submit.prevent="addContact">
<div class="form-group">
<label for="exampleInputName1">First Name</label>
<input type="text" v-model="contacts.fname" class="form-control" id="exampleInputName1"
placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="exampleInputLastName1">Last Name</label>
<input type="text" v-model="contacts.lname" class="form-control" id="exampleInputLastName1"
placeholder="Enter Last Name"
required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email Address</label>
<input type="email" v-model="contacts.email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputAdress1">Adress</label>
<input type="text" v-model="contacts.adress" class="form-control" id="exampleInputAdress1" placeholder="Enter Adress" required>
</div>
<div class="form-group">
<label for="exampleInputPhone1">Phone Number</label>
<input type="number" v-model="contacts.phone" class="form-control" id="exampleInputPhone1" placeholder="Enter Phone Number"
required>
</div>
<div class="form-group">
<label for="exampleInputCompany1">Company</label>
<input type="text" v-model="contacts.company" class="form-control" id="exampleInputCompany1" placeholder="Enter Company" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" #submit="addContact">Save</button>
</div>
<script>
export default {
data() {
return {
contacts: [{
fname: '',
lname: '',
email: '',
adress: '',
phone: '',
company: ''
}]
}
},
methods: {
addContact() {
this.$emit('passArr', this.contacts);
}
},
}
</script>
Here is parent component:
<tbody>
<tr class="d-flex">
<td class="user col-3"></td>
<td class="col-3"></td>
<td class="col-2">}</td>
<td class="col-2"></td>
<td class="col-2"></td>
</tr>
</tbody>
<script>
import modal from './AddContactModal.vue'
export default {
data() {
return {
}
},
components: {
modal
},
methods: {
}
}
</script>
You can listen for the passArr event in your parent component like this:
<parent-comp #passarr="myMethod" />
...
methods: {
myMethod(arg)
{
console.log(arg)
//arg will contain what you passed in the child method when you
// emit the event with `this.contacts` as arguments
}
}
Related
I am doing a simple register form, using the existing register logic of AuthController#register
The request hits the controller successfully, but when I viewed validation errors in console log,showed
"[Vue warn]: Error in v-on handler: "ReferenceError: errors is not defined"
this is my vue code
<script>
export default {
props:{errors:Object},
name:"Register",
data(){
return {
name:"",
email:"",
password:"",
image:"",
};
},
methods:{
selectimage(e){
this.image=e.target.files[0];
},
register(){
var data=new FormData();
data.append('name',this.name);
data.append('email',this.email);
data.append('password',this.password);
data.append('image',this.image);
this.$inertia.post('/register',data);
console.log(errors.name);
},
},
};
</script>
And this is html form
<form #submit.prevent="register">
{{form}}
<div class="form-group">
<label for="name">Enter Name</label>
<input type="text" class="form-control border border-danger" id="name" v-model="name">
<small class="text text-danger">Please Enter</small>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" v-model="email">
</div>
<div class="form-group">
<label for="password">password</label>
<input type="text" class="form-control" id="password" v-model="password">
</div>
<div class="form-group">
<label for="image">choose image</label>
<input type="file" class="form-control" id="image" #change="selectimage">
</div>
<button class="btn btn-sm btn-danger float-right">submit</button>
</form>
this is controller
public function postRegister(Request $request)
{
$request->validate([
'name'=>'required',
'email'=>'required',
'password'=>'required|min:8',
'image'=>'image|mimes:jpg,jpeg,png',
]);
}
Following HTML:
<div class="form-inline">
<span>Name:</span>
<input id="name" type="text" class="form-control" placeholder="Name eingeben..." required/>
</div>
<div class="form-inline">
<span>Tierart:</span>
<input id="species" type="text" class="form-control" placeholder="Tierart eingeben..." required/>
</div>
<div class="form-inline">
<span>Rasse:</span>
<input id="breed" type="text" class="form-control" placeholder="Rasse eingeben..." required/>
</div>
<div class="form-inline">
<span>Chip-Nummer:</span>
<input id="chipnr" type="text" class="form-control" placeholder="Chip-Nummer eingeben..."/>
</div>
In the script-tag I put the values in a dictionary:
var data = {
name: $("#name").val(),
species: species.value,
breed: breed.value,
chipnr: chipnr.value
}
The way of attending works for the other fields, but not for the name-field, in the dictionary name is "undefined", why and how could I change this?
Change source of values to the jquery select by id of element:
var data = {
name: $("#name").val(),
species: $("#species").val(),
breed: $("#breed").val(),
chipnr: $("#chipnr").val()
}
I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
I have a problem which I dont seem to find a solution for. The problem is this: I have some jQuery which will keep the button disabled until all the form's fields are filled up. When all the fields are filled up the button is being enabled, but the javascript onSubmit event used for the google recaptcha is not being trigerred. Anyone can help in this, please
Code is the one below:
//jquery to disable button until all fields are filled up
$().ready(function() {
// validate signup form on keyup and submit
$("#fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
<form id="fbForm"class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
You are missing a } at the last line to close the ready function. Fix that first.
$().ready(function() {
$('#num').validate();
// validate signup form on keyup and submit
$("fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<form name="formSend" id="fbForm" class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<fieldset>
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Okay, Missing jquery validtor and syntax errors were causing the problem. The snippet works fine.You should use visual code as editor and please resolve syntax errors before posting here.
I'm having trouble resetting form fields after submitting in AngularJS (v1.1.3). Here's a snippet of what I'm trying to do:
HTML
<form name="addMemberForm">
<input name="name" type="text" placeholder="Jon Doe" ng-model="member.name" required/></td>
<a class="btn btn-primary" ng-click="createMember(member)" ng-disabled="addMemberForm.$invalid"><i class="icon-plus"></i></a>
</form>
JS
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.addMemberForm.reset(); //TypeError: Object #<FormController> has no method 'reset'
});
};
Is there another way to reset form elements?
Figured it out thanks to #tschiela's comment. I had to do this:
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.member = '';
});
};
Just Take default value of the form .
HTML form
<form novalidate id="paperForm" class="form-horizontal" name="formPaper">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">
Name
</label>
<div class="col-sm-8">
<input type="text" id="name" placeholder="Please Enter Name" class="form-control" ng-model="paper.name" ng-name="name" required>
</div>
<label class="col-sm-3 control-label" for="name">
Department
</label>
<div class="col-sm-8">
<input type="text" id="department" placeholder="Please Enter Department" class="form-control" ng-model="paper.department" ng-name="department" required>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="reset(paper)">Reset</button>
</form>
set reset code inside controller
var deafualtForm = {
name : '',
department : ''
}
$scope.reset= function(paper) {
$scope.paper = angular.copy(deafualtForm);
}