I am building a registration form. It contains a button which opens a Bootstrap 5 modal over the top of the form. I intent to use it to allow the potential user to verify their account ownership.
However, the Modal it doesn't display at all.
Troubleshooting performed so far
I have added a console.log to the openmodal method and it's logging correctly.
I have also attempted to load the modal on mount, however this also did not work.
Code
<template>
<!-- Modal -->
<div
class="modal fade"
tabindex="-1"
role="dialog"
id="verificationModal"
ref="verificationModal"
v-if="showModal"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Verify Summoner Account</h5>
<button
type="button"
class="btn-close"
data-dismiss="modal"
aria-label="Close"
#click="closeModal"
></button>
</div>
<div class="modal-body">
<p>
Please change your summoner account icon to the following image:
</p>
<div class="summoner-icon-container">
<img
:src="randomSummonerIcon"
alt="Random Summoner Icon"
class="summoner-icon"
/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" #click="verifySummoner">
Verify
</button>
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
#click="closeModal"
>
Close
</button>
</div>
</div>
</div>
</div>
<!-- Form -->
<div>
<form #submit.prevent="submitForm">
<div class="form-group">
<label for="username">Username</label>
<input
v-model="form.username"
type="text"
class="form-control"
id="username"
aria-describedby="usernameHelp"
placeholder="Enter username"
/>
<div v-if="errors.username" class="invalid-feedback">
{{ errors.username[0] }}
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
v-model="form.password"
type="password"
class="form-control"
id="password"
placeholder="Enter password"
/>
<div v-if="errors.password" class="invalid-feedback">
{{ errors.password[0] }}
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
v-model="form.email"
type="email"
class="form-control"
id="email"
aria-describedby="emailHelp"
placeholder="Enter email"
/>
<div v-if="errors.email" class="invalid-feedback">
{{ errors.email[0] }}
</div>
</div>
<div class="form-group">
<label for="summoner_name">Summoner Name</label>
<input
v-model="form.summoner_name"
type="text"
class="form-control"
id="summoner_name"
placeholder="Enter summoner name"
/>
<div v-if="errors.summoner_name" class="invalid-feedback">
{{ errors.summoner_name[0] }}
</div>
</div>
<button
type="submit"
v-if="form.summoner_verified"
class="btn btn-primary"
>
Submit
</button>
</form>
<button
v-if="!form.summoner_verified"
#click="openModal"
class="btn btn-secondary"
>
Verify Summoner
</button>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
form: {
username: "",
password: "",
email: "",
summoner_name: "",
summoner_verified: false,
},
errors: {},
showModal: false,
}
},
mounted() {
$(this.$refs.verificationModal).modal()
},
methods: {
openModal() {
this.showModal = true
console.log("Model Opened")
},
closeModal() {
this.showModal = false
console.log("Model Closed")
},
submitForm() {
axios
.post("/api/register", this.form)
.then((response) => {
// redirect to dashboard or display success message
})
.catch((error) => {
this.errors = error.response.data.errors
})
},
verifySummoner() {
axios
.post("/api/verify-summoner", {
summoner_name: this.form.summoner_name,
})
.then((response) => {
this.form.summoner_verified = response.data.summoner_verified
this.form.rank = response.data.rank
if (this.form.summoner_verified) {
this.closeModal()
}
})
.catch((error) => {
console.log(error)
})
},
},
}
</script>
Related
I have a reusable modal where i call in some places. Every thing work perfect except the bootstap atributs data-bs-backdrop="static" data-bs-keyboard="true".
I want to make this modal static so where user click outside modal does not hoide but he make a small animation by this atribut data-bs-backdrop="static" also when press esc button modal will hide data-bs-keyboard="true".
The problem is the backdrop atribute work only after second call of modal, it mean if i call modal first time the backdrop does not work if i close modal and call again now backdrop work. And keyboard atribute does not work at all in any case
modal
export default {
template: `
<div class="modal fade show" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel"
:class="{ show: value }"
:style="{ display: value ? 'block' : '' }"
aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="true">
<div class="modal-dialog" :class="modalLg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<slot name="modalTitle" />
</h5>
<button #click="closeModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<slot />
</div>
<div v-if="$slots.modalFooterBtn" class="modal-footer">
<button #click.prevent="submit()" type="button" data-bs-dismiss="modal" class="btn btn-primary">
<slot name="modalFooterBtn" />
</button>
</div>
</div>
</div>
</div>
`,
props: [
"value",
"modalLg"
],
methods: {
submit() {
this.$emit("submit_changers");
},
closeModal() {
this.$emit("input", false);
},
},
}
Parent Component
<v-modal v-model="addModalVisibility" #submit_changers="addUser">
<template #modalTitle>
Add User
</template>
<form id="" class="form-horizontal validate-form">
<div class="form-group mb-2">
<input v-model="user_id" id="user_id" type="number" class="form-control" placeholder="user_id">
</div>
<div class="form-group mb-2">
<input v-model="name" id="name" type="text" class="form-control" placeholder="name">
</div>
<div class="form-group mb-2">
<input v-model="email" id="email" type="email" class="form-control" placeholder="email">
</div>
<div class="form-group mb-2">
<input v-model="password" id="password" type="password" class="form-control" placeholder="password">
</div>
</form>
<template #modalFooterBtn>
Save
</template>
</v-modal>
data(){
return {
addModalVisibility: false,
...
showModal() {
this.addModalVisibility = !this.addModalVisibility
},
I want to protect my login/register modals before closing if I click outside modal content, and next problem is if I fill the form bad, the modal will close, and after click on link, the error will be writen on this modal - I want to not closing if is error in filled forms and error will be wroten in opened modal, too I want if I click outside the modal content, that modal will not be closed.
This is the links to modals in header.blade.php:
<div id="app">
<div class="container">
<a class="menu-link" data-toggle="modal" data-target="#loginModal">Přihlásit se</a>
<a class="menu-link" data-toggle="modal" data-target="#registerModal">Registrace</a>
</div>
</div>
#include('auth.login')
#include('auth.register')
Here is the auth/login.blade.php code:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" id="loginModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="loginModalLabel">Přihlášení do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.login.send') }}" data-remote="true" method="post">
#csrf
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Přihlásit">
</section>
#if ($errors->has('email'))
{{ $errors->first('email') }}
#endif
#if ($errors->has('password'))
{{ $errors->first('password') }}
#endif
</form>
</div>
<div class="modal-footer">
<div style="ml-auto">
#if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.reset') }}">Zapomněl jsem heslo</a>
#endif
</div>
<div style="mr-auto">
#if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.register') }}">Ještě nemám účet</a>
#endif
</div>
</div>
</div>
</div>
</div>
#section('scripts')
#parent
#if($errors->has('email') || $errors->has('password'))
<script>
$(document).ready(function(){
$('.launch-modal').click(function(){
$('#loginModal').modal({
show: true
backdrop: 'static'
});
});
});
</script>
#endif
<script src="https://www.google.com/recaptcha/api.js?render=6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL', {action: 'auth.login.send'}).then(function(token) {
...
});
});
</script>
#endsection
And here is the auth/register.blade.php:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" id="registerModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="registerModalLabel">Registrace do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.register.send') }}" method="post">
#csrf
<section class="field-container">
<input class="form-field" type="text" id="name" class="form-control" name="name" placeholder="Nick" required>
</section>
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Registrovat">
</section>
#if ($errors->has('name'))
{{ $errors->first('name') }}
#endif
#if ($errors->has('email'))
{{ $errors->first('email') }}
#endif
#if ($errors->has('password'))
{{ $errors->first('password') }}
#endif
</form>
</div>
<div class="modal-footer">
<div style="mx-auto">
#if (Route::has('auth.login'))
<a class="btn btn-primary" href="{{ route('auth.login') }}">Již mám účet</a>
#endif
</div>
</div>
</div>
</div>
</div>
#section('scripts')
#parent
<script>
$(function () {
$('#registerForm').submit(function (e) {
e.preventDefault();
let formData = $(this).serializeArray();
$(".invalid-feedback").children("strong").text("");
$("#registerForm input").removeClass("is-invalid");
$.ajax({
method: "POST",
headers: {
Accept: "application/json"
},
url: "{{ route('auth.register') }}",
data: formData,
success: () => window.location.assign("{{ route('auth.account') }}"),
error: (response) => {
if(response.status === 422) {
let errors = response.responseJSON.errors;
Object.keys(errors).forEach(function (key) {
$("#" + key + "Input").addClass("is-invalid");
$("#" + key + "Error").children("strong").text(errors[key][0]);
});
} else {
window.location.reload();
}
}
})
});
})
You should use ajax to prevent modal closing as it will not refresh your page but if you dont want to use ajax you can achieve this by saving variable in session and after page resfresh check if variable exists then show modal with errors
I have added a menu in my database in firebase and now I want to edit the menu in the database. But whenever I send a request to update the menu it only updates the first menu. No matter which menu I choose, it always updates the first menu in the database.
This is my part of an editMenu component which has a button that links to EditmenuForm.
`
contentMenuKeys.map(t=>{
// if (t === this.state.Appetizer)`
return(
<div className="text-center">
<h4>{t}</h4>
<div className="row">
{Object.keys(this.props.menu[t]).map(menu=>{
return(
[this.props.menu[t][menu]].map(item=>{
return(
<div className="col-md-6 menuItems" >
<div className="textM d-flex">
<div className="one-half">
<h3>{item.Name}</h3>
<p><span>{item.Description}</span></p>
</div>
<div className="one-forth">
<span className="price">${item.Price}</span>
<p><span>
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#MenuEditModal">Edit</button ><MenuEditForm Menu_Type={t} Name={item.Name}Description={item.Description} Price={item.Price}iID={menu} rID={queryString.parse(this.props.location.search).id }/>{" "}
<button type="submit" onClick={()=>{this.props.deleteMenu({rID:queryString.parse(this.props.location.search).id,Menu_Type:t,iID:menu})}} className="btn btn-danger ml-2">Remove</button>
</span></p>
</div>
</div>
</div>
)
})
)
})
}`
And below is MenuEditForm component which has edit menu form.
`import React,{Component} from 'react'
import {connect} from "react-redux"
import propTypes from "prop-types"
import { editMenu } from "../../actions/addMenu"
export class MenuEditForm extends Component {
state={
Name:"",
Description: "",
Price:"",
Menu_Type:"",
rID:""
}static propTypes={
editMenu: propTypes.func.isRequired
}`
onChange=e=> this.setState({[e.target.name]:e.target.value});
onSubmit=e=>{
console.log("reached");
e.preventDefault();
const { Name, Description, Price, rID, Menu_Type } = this.state;
const menu = { Name, Description, Price, Menu_Type, rID, iID:this.props.iID };
this.props.editMenu(menu);
this.setState({
Name:"",
Description: "",
Price:"",
Menu_Type:"",
});
}
componentDidMount(){
this.setState({rID:this.props.rID})
}
render(){const {Name, Description, Price, Menu_Type}=this.state;
return(
<div>
<form onSubmit={this.onSubmit}>
<div className="modal fade" id="MenuEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Edit Items</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div>
<div className="modal-body">
<div className="ml-4 mr-4 mt-4 mb-4">
<div className="form-group">
<label>Menu_Type</label>
<select name="Item Type" id="Item-Type" value={Menu_Type} onChange={this.onChange} name="Menu_Type">
<option value="None">None</option>
<option value="Appetizers">Appetizers</option>
<option value="Entrees">Entrees</option>
</select>
</div>
<div className="form-group">
<label>Name</label>
<input
className="form-control"
type="text"
name="Name"
onChange={this.onChange}
value={Name}
required
/>
</div>
<div className="form-group">
<label>Description</label>
<input
className="form-control"
type="text"
name="Description"
onChange={this.onChange}
value={Description}
required
/>
</div>
<div className="form-group">
<label>Price</label>
<input
className="form-control"
type="text"
name="Price"
onChange={this.onChange}
value={Price}
required
/>
</div>
</div>
<div className="modal-footer">
<button type="button" id="cancel" className="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" className="btn btn-primary" >Change Items</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
)
}}export default connect(null,{editMenu})(MenuEditForm)
This is my editMenu action
export const editMenu =(item) =>(dispatch)=>{
axios
.post("/api/database/editMenu", item)
.then(res => {
dispatch({
type:EDIT_MENU,
payload:res.data
});
})
.catch(err=>
dispatch(returnErrors(err.response.date,err.response.status)));
My editMenuAPI
class editMenuAPI(generics.GenericAPIView):
permission_classes=[
permissions.AllowAny
]
def post(self, request):
try:
print(request.data)
db = firebase.editMenu(request.data)
return Response({
"status": "success"
})
except:
return Response({
"status":"Disconnected",
"msg": 'There was a problem'
})
This is editMenu function in firebase.
def editMenu(request):
db=credentials().database()
mType = request['Menu_Type']
rID=request['rID']
iID =request['iID']
print(request)
request.pop("Menu_Type")
request.pop('rID')
request.pop('iID')
return db.child('Restaurants').child(rID).child("Menu").child(mType).child(iID).update(request)
I am trying to Check weather email exist or not to send reset password link.
For that am using ajax function but its showing 500 internal server error before runing ajax.
I knw 500 is for token miss match error but do i need token to check email existing or not.
But I think so, with the form tag token is auto generated and then also am using {{ csrf_field() }}
But it showing same error 500 Internal server. Just Help how can resolve this issue and do i need to generate token manually.
Views : login.blade.php
{!! Form::open(array('url' => '/auth/login', 'class' => 'form- login')) !!}
<div class="form-title"> <span class="form-title">Login</span> </div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix required" type="text" autocomplete="off" placeholder="Email" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix passwordclass required" type="password" autocomplete="off" placeholder="Password" name="password" />
</div>
<div class="form-actions">
<button type="submit" class="btn red btn-block uppercase clicklogin" style="background-color:#d5ed31 !important;border-radius:4px !important;border:1px solid #ddd;">Login</button>
</div>
<div class="form-actions">
<div class="pull-left">
<label class="rememberme mt-checkbox mt-checkbox-outline">
<input type="checkbox" name="remember" value="1" />
Remember me <span></span> </label>
</div>
<div class="pull-right forget-password-block"> <a class="btn-link" data-target="#modalforget" data-toggle="modal">Forgot Password? </a></div>
</div>
{!! Form::close() !!}
<!-- END LOGIN FORM -->
<!-- BEGIN FORGOT PASSWORD FORM-->
{!! Form::open(array('url'=>'password/reset','class' => 'form-horizontal create_forget_form','method'=>'POST', 'id' =>'forgetdata', 'files' => true)) !!}
{{ csrf_field() }}
<div class="modal fade" id="modalforget" tabindex="-1" data-width="760px" >
<div class="modal-dialog" style="width:760px !important;">
<div class="modal-content" style="background-color:#26344b;padding:20px;border-radius:12px !important;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div class="form-title"> <span class="form-title">Forget Password</span> </div>
</div>
<div class="modal-body" style="height:auto !important;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong style="color: #ffffec; font-size: large; "> Please enter your email. A password reset link will be sent to this email.</strong>
</div>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<div class="col-md-2"></div>
<div class="col-md-10">
<input class="form-control required" type="email" autocomplete="off" placeholder="Email" id="forget_email" name="forget_email"style="font-size: large;" />
<span class="my-error-class" id="email_status"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value="Submit" id="submitButton" class="btn green">Submit</button>
<button type="button" value="Cancel" class="btn default red" data-dismiss="modal">Cancel</button>
<button type="reset" value="Clear" class="btn blue">Clear</button>
</div>
</div>
</div>
</div>
</div>
</form>
Ajax function in login.blade.php
<script type="text/javascript">
$('#submitButton').click(function(){
var formdata=new FormData($(this)[0]);
$.ajax({
url:"{{ URL::to('password/reset') }}",
type: 'POST',
data: formdata,
async: false,
cache: false,
contentType: false,
processData: false,
context:this,
dataType: "json",
success: function (returndata)
{
if(returndata == 0)
{
$( '#email_status' ).html('This Email does not Exists');
return false;
}
else
{
$( '#email_status' ).html("");
return false;
}
},
error: function(data)
{
console.log(data);
}
});
});
</script>
Route file:
Route::group(['middleware' => 'auth'], function()
{
Route::post('password/reset','Auth\AuthController#resetPassword');
}
Controller Auth\AuthController#resetPassword:
public function resetPassword()
{
$email =Input::get('forget_email');
$user_email = DB::table('users')->where('email', $email)->whereNull('deleted_at')->first();
if($user_email)
{
return '1';
}
else
{
return '0';
}
}
Screen Shot Of Error
I think you have to write your route outside auth group.
Route::post('password/reset','Auth\AuthController#resetPassword');
The issue is you are using POST request with ajax and for every post request you have to pass the csrf-token with the request like:
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
Put this in your ajax code and everything will be fine.
Or if you want to exclude the specific URI from CSRF verification, go to project/app/Http/Middleware, there is a file VerifyCsrfToken.php in which put the routes list in:
protected $except = [
// route list here
];
All the routes defined here excludes from csrf-token check.
I am new in meteor framework. Now i am practice in my local server. I have added my all data by meteor but now i want to edit my data. I have tried to edit my data but unable to get all values. below is my all code.
<head>
<title>Login page</title>
</head>
<body>
{{> facebooktest}}
{{> usersDetails}}
</body>
<template name="usersDetails">
<table class="userdetailstable">
<tr>
<th>#Id</th>
<th>Email Address</th>
<th>Name</th>
<th>Username</th>
<th>Password</th>
<th>Created</th>
<th>Edit</th>
<th>Delete</th>
</tr>
{{#each returnRegistrationData}}
<tr>
<td>{{_id}}</td>
<td>{{email}}</td>
<td>{{name}}</td>
<td>{{username}}</td>
<td>{{created}}</td>
<td>{{password}}</td>
<td><button class="delete-entry btn btn-primary" id="edit-entry">Edit</button></td>
<td><button class="delete-entry btn btn-danger" id="delete-entry">Delete</button></td>
</tr>
{{/each}}
</table>
</template>
<template name="facebooktest">
<div class="container">
<button class="login-button">Login From here</button>
<button class="registration"> Registration </button>
</div>
<div class="modal fade" id="login-page">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<form class="login-form" id="login-form">
<div class="modal-body">
<label for="name">Username</label>
<input type="text" id="username" class="username" placeholder="Username" value="" />
<label for="name">Password</label>
<input type="password" id="password" class="password" placeholder="Password" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="save">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="registration-page">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
</div>
<form class="login-form" id="login-form">
<div class="modal-body">
<label for="name">Email</label>
<input type="email" id="email" class="email" placeholder="email#example.com" value="{{email}}" required />
<label for="name">Your Name</label>
<input type="text" id="name" class="name" placeholder="Your Name" value="{{name}}" required/>
<label for="name">Username</label>
<input type="text" id="username" class="username" placeholder="Username" value="{{username}}" required/>
<label for="name">Password</label>
<input type="password" id="password" class="password" placeholder="Password" value="{{password}}" required/>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="registration-added">Add</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</template>
Below my JS file code
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Registration } from '../db/database.js';
import './main.html';
Template.body.events({
'click .login-button' : function(event)
{
event.preventDefault();
$('#login-page').modal('show');
},
'click .registration' : function(event)
{
event.preventDefault();
$('#registration-page').modal('show');
}
});
Template.usersDetails.helpers({
returnRegistrationData : function()
{
return Registration.find({});
}
});
Template.usersDetails.events({
'click #delete-entry' : function(event)
{ //console.log(event.target);
Registration.remove(this._id);
},
'click #edit-entry' : function(event)
{
$('#registration-page').modal('show');
var editdata = Registration.find(this._id);
console.log(editdata.target);
}
});
I am using modal box when we click on buttons. I just want to get edit button row values.
http://i.imgur.com/cz79YN9.png
Template.facebooktest.events({
'submit #login-form' : function(event)
{
event.preventDefault();
const target = event.target;
var username = target.username.value;
var password = target.password.value;
if(username == '')
{
alert('Please enter your username.');
return false;
}
else if(password == '')
{
alert('Please enter your password.');
return false;
}
else
{
var selectmethod = Registration.find({
"name" : username,
"password" : password
});
console.log(selectmethod);
$('#login-page').modal('hide');
}
},
'submit #registration-page' : function(event)
{
event.preventDefault();
const target = event.target;
const email = event.target.email.value;
const name = event.target.name.value;
const username = event.target.username.value;
const password = event.target.password.value;
Registration.insert({
email,
name,
username,
password,
created : new Date(),
});
event.target.email.value = '';
event.target.name.value = '';
event.target.username.value = '';
event.target.password.value = '';
$('#registration-page').modal('hide');
}
});
// db.registration.insert({ email: "test#sad.com",name: "test#sad.com",username: "test#sad.com",password: "123456", createdAt: new Date() });