How to clear form fields after a submit in laravel - html

<div class="form-group">
<label>Class</label>
<input type="text" class="form-control text-capitalize" name="user_class" value="{{Input::old('user_class')}}" placeholder="Class">
<div class="col-sm-12">
#foreach($errors->get('user_class') as $user_class)
<div class="alert alert-danger error">{{$user_class}}</div>
#endforeach
</div>
</div>

Related

Html elements shrinking after add FORM tag

I don't really understand the elements changes after add FORM.
Any suggestion?
BEFORE
AFTER add
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
Full codes here:(
#include('Navigation.navbarhome')
<div class="container">
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
#if ($message = Session::get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</div>
#endif
#if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="/uploads/avatars/{{ Auth::user()->profImage }}" class="avatar img-circle" alt="avatar">
<h6>Upload your photo...</h6>
<input type="file" name="profImage">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
</div>
<!-- edit form column -->
<div class="col-md-7 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" name="fname" type="text" value="{{$user->fname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" name="lname" type="text" value="{{$user->lname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Staff ID:</label>
<div class="col-lg-8">
<input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" name="email" type="text" value="{{$user->email}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department:</label>
<div class="col-lg-8">
<input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Position:</label>
<div class="col-lg-8">
<input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="submit" class="btn btn-primary" value="Save Changes">
<span></span>
<a href="/home2"> <input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
{!! Form::close() !!}
</div>
</div>
</div>
<hr>

This is occurring because there's already an existing <form> element within your code, and nesting these elements is causing issues within the styling.
You should be able to address it by simply changing your inner <form> element into a <div> since it isn't doing much except for handling styling (via the form-horizontal class).
Just change the following line from:
<form class="form-horizontal" role="form">
to:
<div class="form-horizontal" role="form">
Example (with changes applied)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- This element is added by Laravel -->
<form>
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="" class="avatar img-circle" alt="avatar">
<h6>Upload your photo...</h6>
<input type="file" name="profImage">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
</div>
<!-- edit form column -->
<div class="col-md-7 personal-info">
<h3>Personal info</h3>
<!-- Change this to a <form> to reproduce your original issue -->
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" name="fname" type="text" value="{{$user->fname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" name="lname" type="text" value="{{$user->lname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Staff ID:</label>
<div class="col-lg-8">
<input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" name="email" type="text" value="{{$user->email}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department:</label>
<div class="col-lg-8">
<input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Position:</label>
<div class="col-lg-8">
<input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="submit" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</div>
</div>
</div>
<hr>
</form>
</div>

Laravel: How To Print Ticket Using Laravel After Adding Data?

Good day pips. I am struggling on printing after I click create.
the ui for creating and printing
When I click the create button, it will add to the database and print a number or ticket. All I know is dompdf but that one is downloading pdf
<div class="modal fade" id="callModal" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="callModalLabel">New Call</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!--start of the form-->
<form id="form-data" class="form-horizontal" method="POST" action="{{ route('call.store') }}">
{{ csrf_field() }}
<div class="row form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="trans-id" name="trans_id" readonly>
</div>
<div class="col-md-12">
<label>Transaction Type:</label>
<input type="text" class="form-control" id="trans-name" readonly>
</div>
<div class="col-md-12">
<input type="hidden" id="called" name="called" value="NO">
</div>
<div class="col-md-12">
<label>Department:</label>
<select class="form-control" id="dept_id" name="dept_id" required>
<option value="" data-hidden="true"
selected="selected">-- Select Department --
</option>
#foreach($departments as $department)
<option value= "{{ $department->id }}">
{{ $department->dept_name }}
</option>
#endforeach
</select>
</div>
<div class="col-md-12">
<label>RFID</label>
<input type="text" id="rfid" class="form-control" name="rfid" required>
</div>
<div class="col-md-12">
<label>Student First Name</label>
<input type="text" id="firstname" class="form-control" name="firstname" required="">
</div>
<div class="col-md-12">
<label>Student Last Name</label>
<input type="text" id="lastname" class="form-control" name="lastname" required>
</div>
<div class="col-md-12">
<label>Amount</label>
<input type="number" id="amount" class="form-control" name="amount" step=".01" required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-fill pull-right" id="form-button-add" name="form-button-add" onclick="window.print()">
CREATE <!--CREATE, SAVE AND PRINT THE TICKET-->
</button>
<button data-dismiss="modal" aria-hidden="true" class="btn btn-basic pull-right" style="margin-right: 2%">
CANCEL
</button>
<div class="clearfix"></div>
</form>
<!-- end of the form -->
</div>
</div>
</div>
</div>
I already code the javascript onclick in my create button. My problem is it prints the current page of the ui. I just want to print the details such as C-1, counter 1. Another problem is that is show the preview but it doesn't add on the database.

How to remove the line from html page of an angular application with multiple forms

I have got this page but for some reason, I see a line in my page.
Here is the code
<div class="tab-pane" id="advanced" ng-hide="sync model">
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="" *ngFor="let options of syncOptionsList">
<div class="col-md-12">
<div class="checkbox abc-checkbox abc-checkbox-info">
<input type="checkbox" name="{{options.value}}" formControlName="{{options.value}}" [value]="options.value" (change)="options.value == 'inplace' ? inplaceCheckBoxHandler($event) : ''"
/>
<label>{{ options.title }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<p>Include/Exclude Options</p>
<div class="form-group">
<label class="col-md-4 text-right" for="datacopy_file_in">Datacopy File In</label>
<div class="col-md-6">
<input class="form-control" formControlName="datacopy_file_in" placeholder="" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-4 text-right" for="sync_exclude_file">Sync Exclude File</label>
<div class="col-md-6">
<input class="form-control" formControlName="sync_exclude_file" placeholder="" type="text">
</div>
</div>
</div>
</div>
What can I do to make the line go away? I am taking the options using ngfor I used legend and fieldset but its of no avail.

Two of my pages have a small gap under the footer

All of my other pages do not have this gap, I am using Bootstrap but am a beginner. What do you think it could be? Is the whole page coded wrong because the contact form works fine, just when I am on a mobile device I can see a very thin white line under the footer.
<div class="section-md">
<div class="container container-normal">
<div class="row">
<div class="col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<?php if (isset($_SESSION[ 'contact_success'])): ?>
<h2>Message Sent</h2>
<div class="alert alert-success">
Your information has been received. We will contact you within 1 business day.
</div>
Back to Homepage
<?php unset($_SESSION[ 'contact_success']) ?>
<?php else: ?>
<h1>Contact Us</h1>
<p class="text-muted">This is our contact page...</p>
<hr>
<div class="error-msg alert alert-danger cnt-error">
<p>Please fill in all required fields.</p>
</div>
<form id="contact_form" action="<?= site_url() ?>contact/save" method="post">
<div class="form-group">
<label for="name" class="form-label">Your Name*</label>
<input id="cnt_name" type="text" class="form-control" name="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email" class="form-label">Your Email*</label>
<input id="cnt_email" type="text" class="form-control" name="email" placeholder="user#example.com">
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject*</label>
<input id="cnt_subject" type="text" class="form-control" name="subject" placeholder="This website rocks">
</div>
<div class="form-group">
<label for="message" class="form-label">Comments*</label>
<textarea id="cnt_message" class="form-control" name="message" rows="10" placeholder="Enter a few questions in here..."></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
Cancel
</div>
<!-- /.form-group -->
</form>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.section-md -->

I think you had margin in your
Let's try this code
body{
margin: 0;
}

html inputs in a form doesn't match in the width

i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>

Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example