I properly define everything in my back end file. When I try to use
the back end variables in Thymeleaf by using selection variable
expression it is not working. It show errors in every field:
cannot resolve field name
register.html
<!doctype html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments/head"></head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid mt-5">
<div class="row">
<div th:replace="/fragments/categories"></div>
<div class="col"></div>
<div class="col-6">
<h3 class="display-4">Register</h3>
<form method="post" th:object="${user}" th:action="#{/register}" >
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
There are errors
</div>
<div class="form-group">
<label for>Username:</label>
<input type="text" class="form-control" th:field="*{username}" placeholder="Username">
<span class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
</div>
<div class="form-group">
<label for>Password:</label>
<input type="password" class="form-control" th:field="*{password}">
<span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label for>Confirm Password:</label>
<input type="password" class="form-control" th:field="*{confirmPassword}">
<span class="error" th:if="${passwordMatchProblem}">Passwords do not match</span>
</div>
<div class="form-group">
<label for>E-mail:</label>
<input type="email" class="form-control" th:field="*{email}" placeholder="E-mail" required>
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label for>Phone number:</label>
<input type="text" class="form-control" th:field="*{phoneNumber}" placeholder="Phone number">
<span class="error" th:if="${#fields.hasErrors('phoneNumber')}" th:errors="*{phoneNumber}"></span>
</div>
<button class="btn btn-danger mb-5">Register</button>
</form>
</div>
<div class="col"></div>
</div>
</div>
<div th:replace="/fragments/footer"></div>
</body>
</html>
I get errors everywhere I use the selection expression field.
Are you adding "user" to your model in your controller?
You need to add it to your model so Thymeleaf can access it.
addAttribute method can be used like so: model.addAttribute("user", myUser);
Related
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
I am a beginner, and I want to show the value data into the input field related to the key but I am very confused that how can I show the value data into the input field so please if you have an idea please help me thanks.
Database table
Setting table https://ibb.co/jGFX4t2
I want to show a value data in this field, please see https://ibb.co/Mh08c9b
Settings Model
class Settings extends Model
{
protected $table="setting";
protected $fillable =['id','key','value'];
}
Controller
public function setting()
{
$setting=Settings::all();
return view('admin.setting.setting',compact('setting'));
}
HTML view
<form method="post" action="{{route('update.setting')}}" enctype="multipart/form-data" >
#csrf
<div class="card-box">
<div class="panel panel-heading">
<h3>Update Settings</h3>
</div>
<div class="col-lg-5">
<div class="mt-3">
<input type="file" name="logo_image" class="dropify" />
</div>
</div>
<div class="row">
<div class="col-lg-5 mt-3">
<div class="group-form">
<label>Contact Number*</label>
<input type="text" name="contact_number" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-3">
<div class="group-form">
<label>Contact Email *</label>
<input type="email" name="email" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-10 mt-3">
<div class="group-form">
<label>Location *</label>
<input type="text" name="location" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-3">
<h3> Social Links:</h3>
<div class="group-form">
<label>Facebook *</label>
<input type="text" name="facebook" value="{{ }}" class="form-control" >
</div>
</div>
<div class="col-lg-5 mt-5">
<div class="group-form">
<label>Twitter *</label>
<input type="text" name="twitter" value="{{}}" class="form-control" >
</div>
</div>
<div class="col-lg-6 mt-3">
<div class="group-form">
<label>Linkedin *</label>
<input type="text" name="linkedin" value="{{}}" class="form-control" >
</div>
</div>
<div class="col-lg-7 mt-3">
<div class="group-form ">
<button type="submit" id="btnsubmit" class="btn btn-danger waves-effect waves-light col-lg-2">Save</button>
</div>
</div>
</div>
</div> <!-- end card-box -->
</form>
please use this code.
{{ $setting->Where('key', 'Contact_Email')->first()->value }}
How about something like:
{{ $setting->firstWhere('key', 'Contact_Number')->value; }}
{{ $setting->firstWhere('key', 'Contact_Email')->value; }}
{{ $setting->firstWhere('key', 'Location')->value; }}
etc
When you use Eloquent Model::all(), it returns a collection to the blade view.
Therefore you can use firstWhere to find the key value.
I have a controller ( Laravel ) which will be dynamic create a form as below
<div class="row" style="margin-bottom:30px;margin-top:20px;">
<div class="col-2">
<form class="addform" id="newcheckform" role="form">
'.csrf_field().'
<label class="" for="cust_code">Cust Code</label>
<input type="text" class="form-control" id="cust_code" value="'.$row->cust_no.'">
</div>
<div class="col-2">
<label class="" for="cust_short">Cust Shortname</label>
<input type="text" class="form-control" id="cust_short">
</div>
<div class="col-4">
<label class="" for="cust_name">Cust Name</label>
<input type="text" class="form-control" id="cust_name" value="'.$row->cust.'">
</div>
<div class="col-2">
<label class="" for="region">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="col-2">
<label class="" for="region">Add Cust Data</label>
<button class="btn btn-sm btn-info" id="createnewcust" type="submit">Create</button>
</form>
</div>
</div>
if will be loaded by below script in the blade file
$("#custcheck").load("{{ url('/sales/admin/custcheck') }}");
The form displayed as its should to be.
However I when I submit button. Nothing happened. code as below. Appreciate anyone can help. this script resides in the same blade file.
$(function() {
$(document).on('submit', '#newcheckform', function(e){
alert("Hi");
});
});
You have wrong closing tags for <form> change something like this:
<div class="row" style="margin-bottom:30px;margin-top:20px;">
<form class="addform" id="newcheckform" role="form">
{{csrf_field()}}
<div class="col-2">
<label class="" for="cust_code">Cust Code</label>
<input type="text" class="form-control" id="cust_code" value="{{$row->cust_no}}">
</div>
<div class="col-2">
<label class="" for="cust_short">Cust Shortname</label>
<input type="text" class="form-control" id="cust_short">
</div>
<div class="col-4">
<label class="" for="cust_name">Cust Name</label>
<input type="text" class="form-control" id="cust_name" value="{{$row->cust}}">
</div>
<div class="col-2">
<label class="" for="region">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="col-2">
<label class="" for="region">Add Cust Data</label>
<button class="btn btn-sm btn-info" id="createnewcust" type="submit">Create</button>
</div>
</form>
</div>
This will work.
Hi I have this view.
#extends('layouts.app')
#section('title', 'Register')
#section('content')
<!--BEGIN CONTENT-->
<div id="content">
<div class="content">
<div class="breadcrumbs">
Home
<img src="images/marker_2.gif" alt=""/>
<span>Register</span>
</div>
<div class="main_wrapper">
<div class="sell_box sell_box_5">
<h2><strong>Customer</strong> details</h2>
<form name="register" method="post" action="{{ url('/register') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="input_wrapper">
<label><span>* </span><strong>Nama lengkap: </strong></label>
<input type="text" class="txb" value="" name="full_name"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Alamat lengkap: </strong></label>
<input type="text" class="txb" value="" name="address"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Telepon: </strong></label>
<input type="text" class="txb" value="" name="phone"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Upload Identitas (KTP/SIM):</strong></label>
<input type="file" class="txb" name="idcard"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>E-mail: </strong></label>
<input type="text" class="txb" value="" name="email"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Password:</strong></label>
<input type="password" class="txb" value="" name="password"/>
</div>
<div class="input_wrapper last">
<label><span>* </span><strong>Password Confirmation:</strong></label>
<input type="password" class="txb" name="password_confirmation"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Nama saudara tidak serumah: </strong></label>
<input type="text" class="txb" value="" name="family_name"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Alamat saudara tidak serumah: </strong></label>
<input type="text" class="txb" value="" name="family_address"/>
</div>
<div class="input_wrapper">
<label><span>* </span><strong>Telepon saudara tidak serumah: </strong></label>
<input type="text" class="txb" value="" name="family_phone"/>
</div>
<div class="clear"></div>
</div>
<div class="sell_submit_wrapper">
<!--
<span class="custom_chb_wrapper fL">
<span class="custom_chb">
<input type="checkbox" name=""/>
</span>
<label>I agree to the Terms and Conditions</label>
</span>
-->
<input type="submit" value="Submit" class="sell_submit"/>
<div class="clear"></div>
</div>
</form>
</div>
</div>
</div>
<!--EOF CONTENT-->
#endsection
This below test method, success pass unit test
public function testNewUserRegistration(){
$this->visit('/register')->see('Submit');
}
But with this below method, I get the following error 1) RegistrationTest::testNewUserRegistration
LogicException: The selected node does not have a form ancestor.
public function testNewUserRegistration(){
$this->visit('/register')->press('Submit');
}
Why this test fail? It can see Submit but can't press Submit.
I read some article it indicate something wrong with the HTML but I don't know which one is wrong because I think nothing wrong with my HTML code.
Any help appreciated.
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});