I am new to SpringBoot thymeleaf , I simple just make a registration
page ,but when I fill the registration details and hit the register
button in my registration page it throw below error
SignUpPage.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" th:href="#{/../css/SignUp.css}">
<title>SIGN UP</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/16e8cf656f.js"></script>
<script type="text/javascript" th:src="#{/js/SignUp.js}"></script>
</head>
<body>
<div class="container">
<div class="row py-5 mt-4 align-items-center">
<!-- For Demo Purpose -->
<div class="col-md-5 pr-lg-5 mb-5 mb-md-0">
<img src="https://bootstrapious.com/i/snippets/sn-registeration/illustration.svg" alt="" class="img-fluid mb-3 d-none d-md-block">
<h1>Create an Account</h1>
<p class="font-italic text-muted mb-0">Create an account to enjoy some services freely.</p>
</p>
</div>
<!-- Registeration Form -->
<div class="col-md-7 col-lg-6 ml-auto">
<form action="#" th:action="#{/saveUser}" th:object="${player}">
<div class="row">
<!-- First Name -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-user text-muted"></i>
</span>
</div>
<label for="firstName"></label><input id="firstName" type="text" th:field="*{firstName}" name="firstname" placeholder="First Name" class="form-control bg-white border-left-0 border-md">
</div>
<!-- Last Name -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-user text-muted"></i>
</span>
</div>
<label for="lastName"></label><input id="lastName" type="text" name="lastname" th:field="*{lastName}" placeholder="Last Name" class="form-control bg-white border-left-0 border-md">
</div>
<!-- Phone Number -->
<div class="input-group col-lg-12 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-phone-square text-muted"></i>
</span>
</div>
<label for="countryCode"></label><select id="countryCode" name="countryCode" style="max-width: 80px" class="custom-select form-control bg-white border-left-0 border-md h-100 font-weight-bold text-muted">
<option value="">+91</option>
<option value="">+972</option>
<option value="">+353</option>
<option value="">+39</option>
<option value="">+254</option>
<option value="">+852</option>
<option value="">+49</option>
</select>
<label for="phoneNumber"></label><input id="phoneNumber" type="tel" name="phone" th:field="*{phoneNumber}" placeholder="Phone Number" class="form-control bg-white border-md border-left-0 pl-3">
</div>.
<!-- Email Address -->
<div class="input-group col-lg-12 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-envelope text-muted"></i>
</span>
</div>
<label for="email"></label><input id="email" type="email" name="email" th:field="*{email}" placeholder="Email Address" class="form-control bg-white border-left-0 border-md">
</div>
<!-- Password -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-lock text-muted"></i>
</span>
</div>
<label for="password"></label><input id="password" type="password" name="password" th:field="*{password}" placeholder="Password" class="form-control bg-white border-left-0 border-md">
</div>
<!-- Submit Button -->
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<input class="btn btn-primary btn-lg" type="submit" value="Create Account" />
</div>
<!-- Divider Text -->
<div class="form-group col-lg-12 mx-auto d-flex align-items-center my-4">
<div class="border-bottom w-100 ml-5"></div>
<span class="px-2 small text-muted font-weight-bold text-muted">OR</span>
<div class="border-bottom w-100 mr-5"></div>
</div>
<!-- Social Login -->
<div class="form-group col-lg-12 mx-auto">
<a href="#" class="btn btn-primary btn-block py-2 btn-facebook">
<i class="fa fa-facebook-f mr-2"></i>
<span class="font-weight-bold">Continue with Facebook</span>
</a>
<a href="#" class="btn btn-primary btn-block py-2 btn-twitter">
<i class="fa fa-twitter mr-2"></i>
<span class="font-weight-bold">Continue with Twitter</span>
</a>
</div>
<!-- Already Registered -->
<div class="text-center w-100">
<p class="text-muted font-weight-bold">Already Registered? <a th:href="#{/login}" href="#" class="text-primary ml-2">Login</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Controller class
package com.nilmani.herokudemoapplication.controller
import com.nilmani.herokudemoapplication.entity.Player
import com.nilmani.herokudemoapplication.repository.PlayerRepository
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.*
#Controller
class PlayerController {
#Autowired
private lateinit var playerRepository: PlayerRepository
#GetMapping("/getSignUp")
fun getRegistrationPage(model: Model,player: Player):String{
model.addAttribute("player",Player())
return "SIgnUpPage"
}
/**end point to register the user*/
#PostMapping("/saveUser")
fun registerUser(#ModelAttribute("player")player: Player,model: Model):String{
model.addAttribute("player",Player())
playerRepository.save(player)
return "successPage"
}
}
what is the reason for getting this type of issue
I know error 405 means it not supporting the function,But I define
everything properly ,why my code is not working I do not understand. I
am not able to find my mistakes.
The "/saveUser" endpoint has method POST. The same needs to be reflected in the form element in SignUpPage.html.
<form action="#" th:action="#{/saveUser}" th:object="${player}" th:method="POST">
For more help refer to https://spring.io/guides/gs/handling-form-submission/
Use th:method="POST" while submitting the form to the controller
Related
so.. I have a registration page and there are a lot of validations in there but my binding result is always false. After a few tries I found the problem but I don't know the solution. When I pass a parameter in the /processRegistrationForm method it doesn't work but when I delete the #RequestParam it works. Why the passed parameter is influencing the binding result and how can I resolve this?
registration-form.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Register New User Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.error {color:red}
</style>
</head>
<body>
<div>
<div id="loginbox" style="margin-top: 50px;"
class="mainbox col-md-3 col-md-offset-2 col-sm-6 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Register New User</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Registration Form -->
<form th:action="#{/processRegistrationForm(flag=${flag})}"
th:object="${crmUser}" method="POST"
class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for registration error -->
<div th:if="${registrationError}" class="alert alert-danger col-xs-offset-1 col-xs-10">
<span th:text="${registrationError}"></span>
</div>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{userName}" placeholder="username (*)" class="form-control" />
</div>
<div th:if="${#fields.hasErrors('userName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('userName')}" th:text="'User name ' + ${err}" />
</ul>
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" th:field="*{password}" placeholder="password (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('password')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('password')}" th:text="'Password ' + ${err}" />
</ul>
</div>
<!-- Confirm Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" th:field="*{matchingPassword}" placeholder="confirm password (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('matchingPassword')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('matchingPassword')}" th:text="'Password ' + ${err}" />
</ul>
</div>
<!-- First name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{firstName}" placeholder="first name (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('firstName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('firstName')}" th:text="'First name ' + ${err}" />
</ul>
</div>
<!-- Last name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{lastName}" placeholder="last name (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('lastName')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('lastName')}" th:text="'Last name ' + ${err}" />
</ul>
</div>
<!-- Email -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" th:field="*{email}" placeholder="email (*)" class="form-control" th:errorclass="fieldError" />
</div>
<div th:if="${#fields.hasErrors('email')}"
style="margin-bottom: 25px" class="text-danger">
<ul>
<li th:each="err : ${#fields.errors('email')}" th:text="'Email ' + ${err}" />
</ul>
</div>
<!-- Register Button -->
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
controller:
#PostMapping("/processRegistrationForm")
public String processRegistrationForm(
#Valid #ModelAttribute("crmUser") CrmUser theCrmUser,#RequestParam(name="flag") Integer flag,
Model theModel,BindingResult theBindingResult) {
String userName = theCrmUser.getUserName();
// form validation
if (theBindingResult.hasErrors()){
return "registration-form";
}
// check the database if user already exists
User existing = userService.findByUserName(userName);
if (existing != null){
theModel.addAttribute("crmUser", new CrmUser());
theModel.addAttribute("registrationError", "User name already exists.");
return "registration-form";
}
// create user account
userService.save(theCrmUser);
if(flag==0)
return "redirect:/user";
else return "redirect:/list";
}
The problems are here:
/register-form:
<!-- Registration Form -->
<form th:action="#{/processRegistrationForm(flag=${flag})}"
th:object="${crmUser}" method="POST"
class="form-horizontal">
/processRegisterForm:
PostMapping("/processRegistrationForm")
public String processRegistrationForm(
#Valid #ModelAttribute("crmUser") CrmUser theCrmUser,#RequestParam(value = "flag",required = false) Integer flag,
BindingResult theBindingResult,
Model theModel) {...
I installed Laravel 8 and set up a blade file.
I moved resources folders css, js, and bootstrap files to public folder and loaded from blade file.
This is master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script src="{{asset('js/app.js')}}"><script/>
<script src="{{asset('js/bootstrap.js')}}"><script/>
</head>
<body>
#yield('content')
</body>
</html>
This is welcome.blade.php
#extends('layouts.master')
#section('content')
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
</div>
<div class="panel-body" >
<form id="signupform" class="form-horizontal" role="form">
<div id="signupalert" style="display:none" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="passwd" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="icode" class="col-md-3 control-label">Invitation Code</label>
<div class="col-md-9">
<input type="text" class="form-control" name="icode" placeholder="">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i>   Sign Up</button>
<span style="margin-left:8px;">or</span>
</div>
</div>
<div style="border-top: 1px solid #999; padding-top:20px" class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i> Sign Up with Facebook</button>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
route is default
Route::get('/', function () {
return view('welcome');
});
Console is not showing any errors and view is not showing anything.
Although the blade files are coded correctly, it is not working
when I remove asset files from , it show view .
So what wrong in asset file
Can someone explain this to me?
I want to show the data of table in a form for updating it.
So I'm using this code :
#foreach($castings as $cast)
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal"
class="list-thumbnail responsive border-0 card-img-left"/>
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div
class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_email }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_gender }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_address }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_city }}</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
</label>
</div>
</div>
#endforeach
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate
enctype="multipart/form-data">
{{ csrf_field() }}
{{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id"/>
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.editbtn').on('click', function (e) {
$('#castingmodeledit').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#casting_name').val(data[1]);
$('#casting_cin').val(data[2]);
$('#casting_email').val(data[3]);
$('#casting_phone').val(data[4]);
$('#casting_gender').val(data[5]);
$('#casting_address').val(data[6]);
$('#casting_city').val(data[7]);
});
});
</script>
But it does not display anything in the modal form
since I don't have the <td> and <tr> in my form I didn't know how to use them later in the ajax script
I tried to add the tr and td balise in my form but the same problem
please if you have any idea help me
Edit
I tried that
<script type="text/javascript">
$(document).ready(function(){
$('.editbtn').on('click', function(e) {
$('#castingmodeledit').modal('show');
var selector = $(this).closest('.card-body'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".casting_name").text());
$('#casting_cin').val(selector.find(".casting_cin").text());
$('#casting_phone').val(selector.find(".casting_phone").text());
});
</scipt>
But doesn't work
Edit2
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
</div>
You can give classes to your p tags inside your card .Then , whenever user click on edit simply use .closest and .find() to get values from p tags and show them inside modal inputs .
Demo Code :
$('.editbtn').on('click', function(e) {
var selector = $(this).closest('.card'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".name").text());
$('#casting_cin').val(selector.find(".cin").text());
$('#casting_email').val(selector.find(".email").text());
$('#casting_phone').val(selector.find(".phone").text());
$('#castingmodeledit input[value=' + selector.find(".gender").text().trim() + ']').prop('checked', true);
$('#casting_address').val(selector.find(".address").text());
$('#casting_city').val(selector.find(".city").text());
$('#castingmodeledit').modal('show');
});
.invalid-tooltip {
display: none
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<!--added classes-->
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw22</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">2</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmaile.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">13456</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">1</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmail.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">134536</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal">×</button>
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate enctype="multipart/form-data">
{{ csrf_field() }} {{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender" class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender" class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>
I need a help please
My question is : How can I display image after uploaded it in the same Page
I'm trying a lot of code , but nothing is worked for me
Here is blade code
<form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
enctype="multipart/form-data" id ="upload_form">
#csrf
<div class="row justify-content-center">
<div class="col-xl-9">
<!--begin::Wizard Step 1-->
<div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
<h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
<!--begin::Group-->
<div class="form-group row">
<label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
<div class="col-lg-9 col-xl-9">
<div class="image-input image-input-outline" id="kt_user_add_avatar">
<div class="image-input-wrapper" >
<img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
</div>
<!--end::Group-->
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
Cancel
</div>
</div>
</div>
</div>
</div>
</form>
Try this: (For Preview)
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
I am trying to make a cascaded login and registration model using bootstrap.
when I click on sign in button the model pop up which is fine but login field is not working. Registration button is working. Again click on Login button the fields appear. Here is the screenshots and code
<a href="#" class="nav-link" data-toggle="modal" data-target="#exampleModal">
<img src="public/img/sign-in-icon.png" class="img-sign-in img-responsive"></a></li>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2">
<li class="active">
<a class="nav-link active" data-toggle="tab" href="#login-form" role="tab"><i class="fas fa-user mr-1"></i>
Login</a>
</li>
<li>
<a class="nav-link" data-toggle="tab" href="#registration-form" role="tab"><i class="fas fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<!--
<li class="nav-item">
Register
</li> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="tab-content">
<div id="login-form" class="tab-pane fade in active">
<form method="POST" action="{{ route('login') }}">
#csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" required autocomplete="current-password">
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
</div>
<div id="registration-form" class="tab-pane fade">
<form action="/">
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name" name="name">
</div>
<div class="form-group">
<label for="newemail">Email:</label>
<input type="email" class="form-control" id="newemail" placeholder="Enter new email" name="newemail">
</div>
<div class="form-group">
<label for="newpwd">Password:</label>
<input type="password" class="form-control" id="newpwd" placeholder="New password" name="newpwd">
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Does anybody please know, what is wrong with the code?