I want to auto submit my form when value is inserted in the "Thumb_Print_Code" Field. below is my form. I want to do this without clicking on save nutton
Im working on Php Laravel Framework.
<form method="POST" action="{{ route('added') }}" id="myform">
#csrf
<div class="form-group row">
<label for="Thumb_Print_Code" class="col-md-4 col-form-label text-md-right">{{ __('Thumb Print Code') }}</label>
<div class="col-md-6">
<input id="Thumb_Print_Code" type="int" class="form-control #error('Thumb_Print_Code') is-invalid #enderror" name="Thumb_Print_Code" value="{{ old('Thumb_Print_Code') }}" required autocomplete="Thumb_Print_Code">
#error('Thumb_Print_Code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save Attendance ') }}
</button>
</div>
</div>
<br>
</div>
</form>
Please let me know how can I achieve my end goals ?
Related
I want to add a button inside my form. it will function as a switch that will hide the elements of 'Sales Price' and show the elements of 'Markup %' and vice versa whenever clicked. (I am planning on doing this in javascript).
however when I add the button, my form gets 422 unprocessable content error.
here is the form inside the modal
<form action="/items/all" enctype="multipart/form-data" method="post" id="add-modal-form">
#csrf
<div class="form-group row border pl-5 m-0">
<label for="item_name" class="col-md-12 col-form-label text-md border pl-0 pl-0 pb-0">Item Name</label>
<input id="item_name" type="text" class="form-control w-50 #error('item_name') is-invalid #enderror" name="item_name" value="{{ old('item_name') }}" required autocomplete="item_name" autofocus>
#error('item_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="item_net_price" class="col-md-12 col-form-label text-md border pl-0 pb-0">Net Price </label>
<input id="item_net_price" type="text" class="col-md-4 form-control #error('item_net_price') is-invalid #enderror" name="item_net_price" value="{{ old('item_net_price') }}" required autocomplete="item_net_price" autofocus>
#error('item_net_price')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
I want to insert the switch button here
<div class="form-group row border pl-5 m-0">
<label for="markup_percent" class="col-md-12 col-form-label text-md border pl-0 pb-0">Markup %</label>
<input id="markup_percent" type="text" class="col-md-3 form-control #error('markup_percent') is-invalid #enderror" name="markup_percent" value="{{ old('markup_percent') }}" autocomplete="markup_percent" autofocus>
#error('markup_percent')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="sales_price" class="col-md-12 col-form-label text-md border pl-0 pb-0">Sales Price </label>
<input id="sales_price" type="text" class="col-md-4 form-control #error('sales_price') is-invalid #enderror" name="sales_price" value="{{ old('sales_price') }}" autocomplete="sales_price" autofocus>
#error('sales_price')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group row border pl-5 m-0">
<label for="stocks_qty" class="col-md-12 col-form-label text-md border pl-0 pb-0">Stocks Qty</label>
<input id="stocks_qty" type="text" class="col-md-3 form-control #error('stocks_qty') is-invalid #enderror" name="stocks_qty" value="{{ old('stocks_qty') }}" required autocomplete="stocks_qty" autofocus>
#error('stocks_qty')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="modal-footer">
<button id="submit-btn" type="submit" class="btn btn-primary mr-auto">Add Item</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
here is my jquery
$(document).ready(function(){
$("#add-modal-form").submit(function(e) {
e.preventDefault();
var form = $(this);
var actionUrl = form.attr('action');
var formData = new FormData(this);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')
}
});
$.ajax({
type: "POST",
url: actionUrl,
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data)
{
$("#add-modal-form").trigger("reset");
alert(data);
}
});
});
})
I also tried submitting the form via 'submit-btn' (without the switch button) and it returns
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
$("#submit-btn").click(function(e) {
e.preventDefault();
var form = $('#add-modal-form');
var actionUrl = form.attr('action');
var formData = new FormData('#add-modal-form');//also tried using variable form here```
As I am new in ajax/jquery and javascript, what would be my best course of action?
laravel
I'm struggling to put the result of two concatme fields in another field input.
I would like to put the results of response in the email field input.
The thing I would like to achieve is to make it easier for the user to log in to the system without putting the whole email address john#box.domain.com.
here is the code so far.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
#include('auth/banner')
<div class="panel panel-default panel-shaded">
<div class="panel-body">
#action('login_form.before')
<form class="form-horizontal margin-top" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">{{ __('Email Address') }}</label>
<div class="col-md-6">
<!-- SCRIPT -->
<script type="text/javascript">
function concatme()
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById("response").innerText = num1 + '' +num2;
}
</script>
<!-- FIN SCRIPT -->
<!---- INICIO---->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER">
<input type="text" name="num2" class="form-control" id="num2" value="#box.domain.com" placeholder="Number 2">
<!---FIN-->
<!-- RESUTLADO PREVIEW -->
<p id="response"></p>
<!-- RESULDADO PREVIEW -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" onclick="concatme()" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Eventy::filter('auth.password_reset_available', true))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
<p>Hola</p>
#action('login_form.after')
</div>
</div>
</div>
</div>
</div>
#endsection
I think its working but you are not able to see it because you have use form and called javascript function on submit button.
What happens is its sending request to given route and refreshing page thats make paragraph tag to empty again. Remove type submit from submit button and then confirm if its working or not.
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'm using parsley js with blade to validate the form but I can not submit. Inputs are being validated normally but nothing happens. My code looks like this:
{{ Form::open(['method' => 'PUT', 'id' => 'form-cronoanalise-edit', 'data-parsley-validate']) }}
<input type="hidden" name="pro-id" id="hidden-id">
<div id="show-maquina">
<div class="form-group">
<label>Referência da Máquina</label>
<select class="form-control" name="ref-maquina" id="ref-maquina"></select>
</div>
<div class="form-group">
<label>Tempo</label>
<input class="form-control" type="text" name="tempo-maquina" id="tempo-maquina" data-parsley-required="true">
</div>
</div>
<div id="show-funcionario">
<div class="form-group">
<label>Setor</label>
<select class="form-control" name="setor" id="setor-edit"></select>
</div>
<div class="form-group">
<label>Funcionário</label>
<select class="form-control" name="funcionario" id="funcionario-edit"></select>
</div>
<div class="form-group">
<label>Tempo</label>
<input class="form-control" type="text" name="tempo-funcionario" id="tempo-funcionario" data-parsley-required="true" data-parsley-type="number">
</div>
</div>
<div class="btn-group">
{{ Form::submit('Alterar', ['class' => 'btn btn-warning', 'id' => 'btn-submeter']) }}
Cancelar
</div>
{{ Form::close() }}
This form is displayed within a modal bootstrap. Can anyone help?
As usual, without a working example, it's very hard to tell exactly what's going on.
I'd try removing the data-parsley-validate and binding it yourself with Javascript once the modal is open.
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>