Cannot submit a form with Materialize css - html

I use Java EE with JSTL and Materialize css for my project.
When i try to submit a Materialize css form in a jsp file i get an error.
> com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException:
> Column 'name' cannot be null
Here is the form:
<div class="row">
<form class="col s12" action="update_comment" method="post">
<input type="hidden" name="comment_id" value="${comment.comment_id}" >
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input disabled value="${comment.name}" id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Имя комментатора</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea">${comment.text}</textarea>
<label for="icon_prefix2">Отредактируйте комментарий</label>
</div>
</div>
<div>
<button class="btn waves-effect waves-light" type="submit" name="submit-button" id="submit-button">Подтвердить
<i class="material-icons right">send</i>
</button>
<a id="buttonCancel" class="waves-effect waves-light red btn">
<i class="material-icons right">close</i>Отмена</a>
</div>
</form>
</div>
But when i use normal html code like this it works:
<div>
<form action="update_comment" method="post" id="commentForm">
<table class="form">
<input type="hidden" name="comment_id" value="${comment.comment_id}">
<tr>
<td align="right">Category name:</td>
<td align="left"><input type="text" id="name" name="name" size="20" value="${comment.name}" /></td>
</tr>
<tr>
<td align="right">text:</td>
<td align="left"><input type="text" id="text" name="text" size="20" value="${comment.text}" /></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Save</button>
<button id="buttonCancel" >Cancel</button>
</td>
</tr>
</table>
</form>
</div>
What is my mistake? Thanks

Related

how to get data from one of the table rows

I tried to make a crud application, and stuck in the data update section, I don't know how to get data values ​​from one row of the table and bring them up in the input form to be edited.
This is my code
#model Web.Cifo.Cms.Models.AccountModel
<h2>Account</h2>
<hr />
<div class="row m-1">
<div class="col-md-push-4 mt-2 mr-5 ml-4">
<form method="post" asp-controller="home" asp-action="account">
<label for="uname">Username</label>
<input type="text" id="uname" asp-for="username" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="pass">Password</label>
<input type="password" asp-for="password" required="required" id="pass" class="form-control" style="width:250px">
<label class="mt-2" for="name">Name</label>
<input type="text" id="name" asp-for="nama" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="contact">Phone Number</label>
<input type="number" id="contact" asp-for="hp" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="email">Email</label>
<input type="email" id="email" asp-for="email" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="url">Profil Image Url</label>
<input type="text" id="url" asp-for="profil_image" required="required" class="form-control" style="width:250px">
<div class="row mt-2 pl-3">
<button type="submit" class="btn btn-dark">Add</button>
</div>
</form>
</div>
<div class="col-md-pull-8 m-1">
<h6>Select Table For Edit Or Delete</h6>
<!-- Editable table -->
<div class="card" style="overflow-x:scroll; overflow-y:scroll; height:50rem; width:70rem">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Account</h3>
<div class="card-body mr-2">
<div id="table" class="table-editable">
<table class="table table-bordered table-responsive-md table-striped text-center" style="table-layout:fixed">
<thead>
<tr>
<th class="text-center" style="width:15rem">Action</th>
<th class="text-center" style="width:10rem">User Name</th>
<th class="text-center" style="width:10rem">Password</th>
<th class="text-center" style="width:10rem">Name</th>
<th class="text-center" style="width:15rem">Phone</th>
<th class="text-center" style="width:10rem">Email</th>
<th class="text-center" style="width:15rem">Profile Image Url</th>
</tr>
</thead>
<tbody>
#foreach (var acc in ViewBag.account)
{
<tr>
<td>
<a class="btn btn-danger btn-rounded btn-sm my-0" asp-controller="home" asp-action="deleteaccount" asp-route-id="#acc.username" onclick="return confirm ('Are You Sure ?')">Remove</a>
<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0">Edit</a>
</td>
<td class="pt-3-half">#acc.username</td>
<td class="pt-3-half">#acc.password</td>
<td class="pt-3-half">#acc.nama</td>
<td class="pt-3-half">#acc.hp</td>
<td class="pt-3-half">#acc.email</td>
<td class="pt-3-half">#acc.profil_image</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
<!-- Default input with help text-->
</div>
</div>
So, what I want is, when I press this edit button
<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0">Edit</a>
data from the selected row can be displayed here.
label for="uname">Username</label>
<input type="text" id="uname" asp-for="username" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="pass">Password</label>
<input type="password" asp-for="password" required="required" id="pass" class="form-control" style="width:250px">
<label class="mt-2" for="name">Name</label>
<input type="text" id="name" asp-for="nama" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="contact">Phone Number</label>
<input type="number" id="contact" asp-for="hp" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="email">Email</label>
<input type="email" id="email" asp-for="email" required="required" class="form-control" style="width:250px">
<label class="mt-2" for="url">Profil Image Url</label>
<input type="text" id="url" asp-for="profil_image" required="required" class="form-control" style="width:250px">
I am totally new to this, please explain in a way that is easy to understand. thank you
Please refer to the following code snippet to dynamically populate tags with selected row data.
Html code
<a id="edtbtn" class="btn btn-danger btn-rounded btn-sm my-0" onclick="return edit_func(this);">Edit</a>
JavaScript code
<script>
//pass current row to function
function edit_func(row) {
//console.log($($(row).parent().siblings()[0]).text());
//get expected data from selected row
var username = $($(row).parent().siblings()[0]).text();
var password = $($(row).parent().siblings()[1]).text();
var nama = $($(row).parent().siblings()[2]).text();
var hp = $($(row).parent().siblings()[3]).text();
var email = $($(row).parent().siblings()[4]).text();
var profil_image = $($(row).parent().siblings()[5]).text();
//populate input(s) with selected row data
$("#uname").val(username);
$("#pass").val(password);
$("#name").val(nama);
$("#contact").val(hp);
$("#email").val(email);
$("#url").val(profil_image);
return false;
}
</script>
In account action
public IActionResult Account(AccountModel account)
{
//code logic here
//insert new record or update the existing one
//...
return View(model);
}

Placing button next to input in table row

This is what my table looks right now
Table:
I'm trying to place the small x button aligned next to the input textbox. Here's my code so far.
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
here is what you're looking for
td .btn {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td input {
float: left;
}
.spacer {
padding-left: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
Have you tried:
<td nowrap></td>
There is a CSS version of this:
th {
white-space: nowrap;
}

Laravel Model Not Saving

Model is saving but all is null values excepts dates
There is not thrown error.
$fillable are directly copied from the field at my migrations.
I cant find why is that it is saving null values on the database
Here is my Code
My Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Disbursement_Information extends Model
{
use SoftDeletes;
protected $table = 'disbursement';
protected $fillable = [
'cv_number',
'payee_id',
'amount',
'check_number',
'release_date',
'first_collection_date',
'last_collection_date',
'maturity_date'
];
protected $dates = [
'created_at',
'updated_at',
'deleted_at'
];
}
My Controller
public function postDisbursement(Request $request, $id){
$loans = new Disbursement_Information;
$input = $request->all();
$loans->save($input);
}
HTML FORM
<div id="step-1">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> List of All Clients</h1>
<h2>Total Clients: <b>3</b></h2>
<div class="row">
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<hr>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="cv_number"> Check Voucher # </label>
<input type="text" class="form-control" name="cv_number" id="cv_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="check_number"> Check # </label>
<input type="text" class="form-control" name="check_number" id="check_number" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="first_collection_date"> First Payment </label>
<input type="date" class="form-control" name="first_collection_date" id="first_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="last_collection_date"> Last Payment </label>
<input type="date" class="form-control" name="last_collection_date" id="last_collection_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="maturity_date"> Maturity Date </label>
<input type="date" class="form-control" name="maturity_date" id="maturity_date" required>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label for="payee_name"> Payee </label>
<input type="text" class="form-control" name="payee_name" id="payee_name" readonly>
<input type="hidden" class="form-control" name="payee_id" id="payee_id" required>
</div>
</div>
<input type="hidden" name="_token" value="JvvXJbloRAzQnj4oz4ve6Z8OLLia270Fs6utSO5a">
<table class="table table-striped">
<thead>
<th>Name</th>
<th style="">Loan Amount</th>
<th style="text-align:center">Action</th>
</thead>
<tbody>
<tr >
<td class="">
Morgado, Ashbee, Allego
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[1]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[1]" p_id = "1 "p_name="Morgado, Ashbee, Allego" target-rdb="rdb1"> Not re-loaning/loaning </label>
<label id="rdb1"><input type="radio" class="rdbPayee" name="payee_id" value="1" p_name="Morgado, Ashbee, Allego">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Melton, Barbara, None
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[2]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[2]" p_id = "2 "p_name="Melton, Barbara, None" target-rdb="rdb2"> Not re-loaning/loaning </label>
<label id="rdb2"><input type="radio" class="rdbPayee" name="payee_id" value="2" p_name="Melton, Barbara, None">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
<tr >
<td class="">
Bonyton, Ester, Jaxis
</td>
<td>
<input type="number" min="2000" max="99000" name="loan_amount[3]" class="form-control loan-amount">
</td>
<td style="text-align:center">
<div class="radio">
<label><input type="checkbox" class="reloan" name="reloan[3]" p_id = "3 "p_name="Bonyton, Ester, Jaxis" target-rdb="rdb3"> Not re-loaning/loaning </label>
<label id="rdb3"><input type="radio" class="rdbPayee" name="payee_id" value="3" p_name="Bonyton, Ester, Jaxis">Mark As Payee</label>
<button type="button" class="btn btn-sm btn-default loan-summary"><i class="fa fa-info-circle fa-5" aria-hidden="true"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>

html table with bootstrap textfield

Hi I need to add textfield in html table using bootstrap, but when using the bootstrap class in html table cell teh textfield is too small.
In the following code example the problem is in textfield id="Winvnetv".
<table class="table table-bordered table-striped">
<tr>
<form id="formSuppliestrn" method="post" class="form-horizontal" >
<td>
<input type="text" name="Wsupplyid" id="Wsupplyid" >
</td>
<td><input type="text" name="Wsupplydesc" id="Wsupplydesc"></td>
<td><input type="text" name="Wquantity" id="Wquantity"></td>
<td>
<div class="form-group">
<label class="col-xs-3 control-label">Ποσό τιμολογίου</label>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" name="Winvnetv" id="Winvnetv"/>
</div>
</div>
</div>
</td>
<td>
<input type="text" name="Wtotv" id="Wtotv">
</td>
<td> <button type="submit" class="btn btn-sm btn-primary" id="trnadd">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>
</td>
</form>
</tr>
</tbody>
</table>
any idea?
You can add the input-lg or input-sm class to the textbox. It will increase its size.
<input type="text" class="form-control input-lg" name="Winvnetv" id="Winvnetv"/>

In my coding bootstrap works on a part of the page but not for the whole. Why this happens?

I tried to use bootstrapping to my whole project. But, the bootstrap works for the heading tag and not for the others. My codes are as follows.
<div class="container">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<center><em><h2>New Cumulative Deposit Account</h2></em></center>
<div id="cum_app_info">
<center> <h3> Personal Information </h3></center>
<table class="table table-striped">
<tr>
<td> <label for="cumfirstapp" class="control-label">First Applicant</label> </td>
<td> <input type="text" name="first_app" id="first_app" required class="form-control" value=""> </td>
<td> <label for="cumfirstappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="first_cum_app_id" id="first_cum_app_id" required class="form-control" value=""> </td>
</tr>
<tr>
<td> <label for="cumsecondapp" class="control-label">Second Applicant</label> </td>
<td> <input type="text" name="second_app" id="second_app" class="form-control" value=""> </td>
<td> <label for="cumsecondappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""> </td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next" />
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
I've made some minor changes like replacing the "center" elements with .text-center classes but it was working fine for me.
http://jsfiddle.net/c6b2trmw/1/
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<h2 class="text-center">
<em>New Cumulative Deposit Account</em>
</h2>
<div id="cum_app_info">
<h3 class="text-center">
Personal Information
</h3>
<table class="table table-striped">
<tr>
<td>
<label for="first_app" class="control-label">First Applicant</label>
</td>
<td>
<input type="text" name="first_app" id="first_app" required="" class="form-control" value=""/>
</td>
<td>
<label for="first_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="first_cum_app_id" id="first_cum_app_id" required="" class="form-control" value=""/>
</td>
</tr>
<tr>
<td>
<label for="second_app" class="control-label">Second Applicant</label>
</td>
<td>
<input type="text" name="second_app" id="second_app" class="form-control" value=""/>
</td>
<td>
<label for="second_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</div>