i have a register modal with vuejs and i need if user inserted the wrong information in the form and the information didn't validated in controller (using laravel) i could redirect user to the same page with modal open (i have "showRegister" in data and i need to make it open with "showRegister : true" after redirect)
new Vue({
el: '.LR-PC',
data: {
showRegister: false,
showLogin:false,
}
});
on default when we redirect to page showRegister is false
code:
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<i class="fa fa-window-close" #click="$emit('close')" style="margin : 0 0 0 100%;"></i>
<slot name="header">
create user
</slot>
</div>
<div class="modal-body">
<slot name="body">
<form method="POST" action="{{ route('register') }}">
#csrf
<input class="input-style-1" type="text" name="name" id="name" maxlength="9"/>
<input class="input-style-1" type="text" name="f-name" id="f-name" maxlength="10"/>
<input class="input-style-1" type="email" name="email" maxlength="50">
<input name="password" class="input-style-1" type="password" maxlength="18">
<input type="password" name="password_confirmation" class="input-style-1" maxlength="18" onchange="hi(sa)">
<div class="r-phone-number input-style-1">
<input type="tel" name="phone" style="margin: 0px; border-width: 0px; width: 323px; text-align: right; position: relative; right: auto; left: 15px;" class="input-style-1">
<i class="fas fa-info-circle"></i>
</div>
#if($errors->any())
<div class="alert alert-danger">
<ul>
#foreach($errors as $error)
{{$error}}
#endforeach
</ul>
</div>
#endif
<slot name="footer">
<div class="modal-footer">
<button type="submit" class="btn btn-primary center-block wid-100">register</button>
</div>
</slot>
</form>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<a id="show-modal" #click="showRegister = true" class="l-main">register</a>
<modal v-if="showRegister" #close="showRegister = false">
</modal>
When you redirect back, pass an extra paramenter in view like: view('yourRoute', ['registerError'=>true]).
In your vue component receive it like <lr-pc register-error="{{$registerError}}"></lr-pc>. So you could handle it inside vue element.
new Vue({
el: '.LR-PC',
props:{
registerError:{
type:Boolean,
default: false
}
},
data: {
showRegister: this.registerError,
showLogin:false,
}
});
Of course, if you wish an inverse logic, use !this.registerError.
Related
My code uses a modal for form display, and I want to make the modal unlock when validation is active.
but after i add some javascript function line, it still doesn't work.
My Modal
<div class="modal fade" id="passwordModal{{Auth::user()->id}}">
<div class="modal-dialog modal-lg-6">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="passwordModal">Update Password</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('password.update') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input name="current_password" type="password" id="current_password" placeholder="Curent Password" class="form-control #error('current_password') is-invalid #enderror">
<span class="text-danger" id="current_passwordError"></span>
<div class="invalid-feedback">
#error('current_password')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="password" id="password" type="password" placeholder="New Password" class="form-control #error('password') is-invalid #enderror">
<span class="text-danger" id="passwordError"></span>
<div class="invalid-feedback">
#error('password')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="password_confirmation" type="password" id="password_confirmation" placeholder="Confirm New Password" class="form-control #error('password_confirmation') is-invalid #enderror">
<span class="text-danger" id="password_confirmationError"></span>
<div class="invalid-feedback">
#error('password_confirmation')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
and my function js
<script>
function openModal() {
$('#passwordModal{{Auth::user()->id}}').modal('show')
}
function storeData() {
var CSRF_TOKEN = $('meta[name="csrf - token"]').sttr('content');
var current_password = $('#current_password').val();
var password = $('#password').val();
var password_confirmation = $('#password_confirmation').val();
$('#current_passwordError').addClass('d-none');
$('#passwordError').addClass('d-none');
$('#password_confirmationError').addClass('d-none');
$.ajax({
type: 'POST',
url: "{{ route('password.update') }}",
data: {
_token: CSRF_TOKEN,
current_password: current_password,
password: password,
password_confirmation: password_confirmation,
},
success: function(data) {
},
error: function(data) {
var errors = data.responseJSON;
if ($.isEmptyObject(errors) == false) {
$.each(errors.errors, function(key, value) {
var ErrorID = '#' + key + 'Error';
$(ErrorID).removeClass("d-none");
$(ErrorID).text(value)
})
}
}
});
}
is my script correct, or is there another way that is more effective.
before I could use ?
is my script correct, or is there another way that is more effective.
before i was able to handle this case in ci-3, but when i used that code in laravel it didn't work, that's why i tried another way and this is the result.
I want to show reply forms in my comment section based on comment reply button that has been clicked but currently it shows forms of all comments instead of specific comment. The question is
How do I get closest form in order to just show one form at the time?
Code
// this button exist in all comments with same class
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
//reply form DIV
<div class="blog-form mt-6 replyComment" style="display:none">// form here</div>
// New comment form DIV
<div class="blog-form mt-6 originalComment"> //form here </div>
$('.reply').click(function (e) {
e.preventDefault();
$('.replyComment').show();
$('.originalComment').hide();
});
Update
Full commenting code
<div class="blog-comments mt-4">
#include('errors.errors')
#if(isset($post))
#forelse($post->comments as $comment)
<div class="comments-1 w-100">
<div class="comments-photo">
#if(!empty($comment->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $comment->user->avatar }}" alt="{{$comment->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$comment->user->name}}">
#endif
</div>
<div class="comments-info">
<h6> {{$comment->user->name}} <span>{{$comment->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $comment->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $comment->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($comment->replies as $reply)
<div class="comments-1 comments-2 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply->user->avatar }}" alt="{{$reply->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply->user->name}}">
#endif
</div>
<div class="comments-info p-3 bg-light">
<h6> {{$reply->user->name}} <span>{{$reply->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-secondary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $reply->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $reply->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($reply->replies as $reply2)
<div class="comments-1 comments-2 ml-5 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply2->user->avatar }}" alt="{{$reply2->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply2->user->name}}">
#endif
</div>
<div class="comments-info bg-light p-3">
<h6> {{$reply2->user->name}} <span>{{$reply2->created_at->format('M d, Y')}}</span></h6>
<p class="mt-1">{!! $reply2->comment !!}</p>
</div>
</div>
#empty
#endforelse
#empty
#endforelse
#empty
<h3>Be the first to leave a comment.</h3>
#endforelse
#else
{{-- reserved for products reviews --}}
#endif
</div>
<div class="blog-form mt-6 originalComment">
<h4 class="mb-3">Post a Comment</h4>
<form method="post" action="{{ route('comments.store') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
Minimizing the forms above for better understanding
Structure
<comments>
-reply button
<reply form></reply form>
<comment reply>
-reply button
<reply form></reply form>
<comment reply replies>
<comment reply replies>
</comment reply>
</comments>
<comment form>
</comment form>
It seems that the <div> that you want to show is the element that follows the button's comments-1 ancestor.
Given this, I would use .closest('.comments-1') to select the ancestor, and .next('.replyComment') to select the element that follows.
$('.reply').click(function (e) {
e.preventDefault();
$(".replyComment, .originalComment").hide();
$(this).closest('.comments-1').next('.replyComment').show();
});
Depending on whether there is a form above the button (then it won't work):
function opens(arg) {
var closest = document.getElementsByClassName("blog-form");
closest[arg].style.display = "block";
for(var i = 1; i < closest.length; i++) {
if(i != arg) {
closest[i].style.display = "none";
}
}
}
<button onclick = "opens(0)">Reply</button>
<form class = "blog-form" style = "display: none">
<input>
</form>
<form class = "blog-form" style = "display: none">
<input>
</form>
<button onclick = "opens(1)">Another Reply</button>
In order for this to work, I'm manipulating the CSS display property.
I have an array of text fields (user interface) that created HTML, CSS, Javascript using inside of the user interfaces.
The problem is when input elements that don't print or send the whole array. I want to print the whole array. It prints one array element.
order.php (user interface):
<div class="row">
<form id="ex_order" action="includes/exchange-order.inc.php" method="POST">
<div id="main_div" class="main_sec_div">
<div class="col-lg-12 col-ml-12">
<button type="button" id="add" class="btn btn-primary"><i class="fas fa-plus"></i></button>
</div>
<div class="col-lg-12 col-ml-12 group">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem;">
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #1</span>
</div>
<!-- Add Ticket Information start -->
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="form-group">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="form-group">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
<!-- Jquery -->
<script>
$(document).ready(function() {
let i = 0;
let passCount = 1;
console.log('Default i : ', i);
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `
<div class="col-lg-12 col-ml-12 second-div" id="sec_div${i}">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem; display:flex; height:60px; align-items:center; align-content:center; justify-content:space-between;">
<div>
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #${++passCount}</span>
</div>
<div>
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="col-md-12 mb-3">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>`;
$('#main_div').append(html);
});
});
</script>
order.inc.php (php includes file) :
<?php
// Save Button
if (isset($_POST['submitOrder'])) {
// passenger
$p_name = $_POST['p_name'];
$ticket_no = $_POST['ticket_no'];
var_dump($p_name);
echo '<br/>';
var_dump($ticket_no);
echo '<br/>';
foreach ($p_name as $key => $value) {
echo $p_name[$key];
echo $ticket_no[$key];
echo "<br/>";
}
}
I solved my problem which returns whole array element to send to PHP includes file.
array(2) { [0]=> string(7) "6386868" [1]=> string(6) "868768" }
array(2) { [0]=> string(4) "6868" [1]=> string(4) "6868" }
The problem is the DOM element.
I don't put the <form> tag into currect place. When I click the add button, jquery is adding out of <form> tag.
Solution:
I changed the <form> tag outside of bootstrap <div> tag which works fine that returns whole array element.
I have a form within a prime ng dialogue control. I don't want to use ngSubmit method in form tag as I have two submit methods depends on some value for this form. I want to manually set this form's submit property on typescript class file. How can I get that form object in ts file to set its "submitted" or "valid" properties manually and take decision based on those? In a word how can I get control of this form in my class file to set or get its internal properties.
Html:
<p-dialog header="Create New Message" [(visible)]="IsShowNewMessageDialog"
modal="modal" width="800" height="auto" styleClass="modal-blue" appendTo="body">
<form #f="ngForm" name="newMessageForm" (ngSubmit)="f.form.valid" novalidate autocomplete="off">
<div *ngIf="model && IsShowNewMessageDialog">
<div class="ui-g">
<div class="ui-g-11">
<span style="color:red">{{ErrorMessage}}</span>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">To</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !emailTo.valid }">
<input type="text" [(ngModel)]="model.emailTo" #emailTo="ngModel"
class="text-field"
pInputText name="emailTo"
placeholder="Email To *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">CC</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.cC" #CC="ngModel"
class="text-field"
pInputText name="CC"
placeholder="CC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Bcc</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.bcc" #BCC="ngModel"
class="text-field"
pInputText name="BCC"
placeholder="BCC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Subject</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !subject.valid }">
<input type="text" [(ngModel)]="model.subject" #subject="ngModel"
class="text-field"
pInputText name="subject"
placeholder="Subject *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-12">
<p-editor name="emailBodyPlain" #emailBodyPlain="ngModel" [(ngModel)]="model.emailBodyPlain"
placeholder="Email Body *" [style]="{'height':'320px'}"
minlength="3"></p-editor>
</div>
</div>
</div>
<div class="text-right pr-5">
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="sendNewMail(false)" label="Send">
<i class="fa fa-paper-plane"></i> Send
</button>
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="saveNewMail(true)" label="Save">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</form>
</p-dialog>
Submit Method:
saveNewMail(isDraft) {
this.messageCenterService.saveNewMail(this.newMail)
.subscribe(
data => {
this.IsShowNewMessageDialog = false;
},
error => {
this.ErrorMessage = error.Message;
});
}
Instead of ng-submit you can use the (click) event on the submit button and can pass the form values to the component check the following syntax:
<button (click)="onSubmit(newMessageForm.value)"></button>
you can define onSubmit method in component with a parameter which will contain the form value.
You can also use the following to disable a button based on form validity:
<button [disabled]="newMessageForm.invalid"></button>
I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>