I have a problem with changing my variable based on a selected value.
<div x-data="{material_enabled : false}">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select #change="$event.target.value = 'Material fehlt' ? material_enabled=true : material_enabled=false" id="category" name="category" autocomplete="category" class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option >ungeplanter Stillstand (Maschinenstillstand)</option>
<option >geplanter Stillstand (Instandhaltung geplant)</option>
<option >Rüsten</option>
<option >Wartung durch Mitarbeiter</option>
<option >Material fehlt</option>
</select>
</div>
</div>
<div x-show="material_enabled" class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="order_number" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
Auftragsnummer
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" name="order_number" id="order_number" autocomplete="" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
value="{{ old('order_number', '') }}" />
#error('order_number')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
</div>
</div>
I want to change the material_enabled variable fomr the x-data block to true if the selected value is 'Material fehlt', but this does not work.
Thanks, Armin
Your check for Material fehlt is not right. Use
#change="$event.target.value == 'Material fehlt'
not
#change="$event.target.value = 'Material fehlt'
You compare values with == and assign those with =. So what you did was not a comparison.
Here is a complete example I used:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js"
defer
></script>
<link
href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div x-data="{material_enabled : false}">
<div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select
#change="$event.target.value == 'Material fehlt' ? material_enabled=true : material_enabled=false"
id="category"
name="category"
autocomplete="category"
class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
>
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option>ungeplanter Stillstand (Maschinenstillstand)</option>
<option>geplanter Stillstand (Instandhaltung geplant)</option>
<option>Rüsten</option>
<option>Wartung durch Mitarbeiter</option>
<option>Material fehlt</option>
</select>
</div>
</div>
<div class="mt-4">
Value of <strong>material_enabled</strong>:
<span x-text="material_enabled"></span>
</div>
</div>
</body>
</html>
Related
Is it possible to actually override a TailwindCSS class with #error from Laravel Validation?
My inputs all have border-none, but I want to apply a border (that is red) only when we throw a validation error.
<form action="/contact" method="POST" class="flex flex-col space-y-8">
{{ csrf_field() }}
<div class="flex flex-col space-y-8 md:flex-row md:space-y-0 md:space-x-5">
<div class="relative">
<label for="text" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Full Name</label>
<input type="text" class="form-input rounded-lg bg-blue-200 border-none shadow #error('full_name') border border-red-500 #enderror" name="full_name" placeholder="John Doe" value="{{ old('full_name') }}" required />
#error('full_name')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<div class="relative">
<label for="email" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">E-mail</label>
<input type="email" class="form-input rounded-lg bg-blue-200 border-none shadow #error('email') border border-red-500 #enderror" name="email" placeholder="email#example.com" value="{{ old('email') }}" required />
#error('email')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
</div>
<div class="relative">
<label for="text" class="absolute -top-6 left-3 text-sm">Phone Number</label>
<input type="text" class="form-input rounded-lg w-full bg-blue-200 border-none shadow #error('phone_number') border border-red-500 #enderror" name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />
#error('phone_number')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<div class="relative">
<label for="textarea" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Message</label>
<textarea type="textarea" class="form-textarea rounded-lg w-full bg-blue-200 border-none shadow #error('message') border border-red-500 #enderror" name="message" rows="6" placeholder="Message" value="{{ old('message') }}" required></textarea>
#error('message')
<div class="text-sm font-thin text-red-500">{{ $message }}</div>
#enderror
</div>
<button type="submit" class="rounded-lg w-full md:w-1/2 self-end bg-neutral-900 uppercase font-black text-blue-400 border-none p-2">Send</button>
</form>
Since #error is after border-none, I'd think it would override it...
Use the following option to specify a new input field class
<input type="text" class="form-input rounded-lg w-full bg-blue-200 #if($errors->has('phone_number')) border border-red-500 #else border-none shadow #endif" name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />
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
I have different inputs depends on radio buttons. How to validate them according to selection?
<div class="sm:col-span-2">
<div class="mt-4">
<nav class=" " aria-label="Tabs">
<div class="border-gray-300 border-2 rounded-lg pl-3 py-2 w-40" :class="tab == 'tab1' ? ' bg-green-200 border-green-500 ' : ''">
<input type="radio" #click="tab = 'tab1'" checked="tab == 'tab1' ? true: false" name="person_company"> <span class="text-gray-600 font-medium text-sm pl-2">person</span> </input>
</div>
<br>
<div class="border-gray-300 border-2 rounded-lg pl-3 py-2 w-40" :class="tab == 'tab2' ? ' bg-green-200 border-green-500 ' : ' '">
<input type="radio" #click="tab = 'tab2'" name="person_company"> <span class="text-gray-600 font-medium text-sm pl-2">company</span> </input>
</div>
</nav>
</div>
</div>
<div class="sm:col-span-2 " x-show="tab == 'tab1'">
<label for="identity_no" class="block text-sm font-medium text-gray-700">Identity</label>
<div class="mt-1">
<input type="text" name="identity_no" id="identity_no" class="block w-full py-4 border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
</div>
<div class="sm:col-span-2" x-show="tab == 'tab2'">
<label for="company" class="block text-sm font-medium text-gray-700">Company name</label>
<div class="mt-1">
<input type="text" name="company" id="company" class="block w-full py-4 border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div>
</div>
this code needs both of them that's not what I want
$this->validate($request,[
'identity' => 'required',
'company' => 'required',
]);
You should use jquery to manage it. First of all, you will have to take values to radio inputs. And then apply the required property through jquery condition.
<input type="radio" #click="tab = 'tab1'" checked="tab == 'tab1' ? true: false" name="person_company" value = "tab1"> <span class="text-gray-600 font-medium text-sm pl-2">person</span> </input>
<input type="radio" #click="tab = 'tab2'" name="person_company"> <span class="text-gray-600 font-medium text-sm pl-2" value = "tab2">company</span> </input>
$('input[type=radio][name= person_company]').change(function() {
if (this.value == 'tab1') {
$("#identity_no").prop('required',true);
$("#company").prop('required',false);
}
else if (this.value == 'tab2') {
$("#company").prop('required',true);
$("#identity_no").prop('required',false);
}
});
Pardon me, cause I was just using this StackOverflow account...
So for this one what I want is 2 list all the product brands for a specific user, so for this one I had it like
So the user object would look like {name:'Andy','last_name':'Lee' .... brands : {} }
<div class="w-full flex">
<label for="name" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">List all the Attributes
</label>
<span>
<i class="fas fa-plus-circle h-4 w-4 text-grey-darker" #click="add(k)" v-show="k == inputs.length-1">
</i>
</span>
</div>
<div class="w-full flex inline-block" v-for="(input,k) in inputs" :key="k">
<!-- if there's no products for this person -->
<div v-if="user.products.length === 0" class="flex inline-block w-full">
<select v-model="inputs.crime_id" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
<option v-for="products in products">{{ products.brand }} </option>
</select>
<div id="input-group" class="ml-4 w-3/5">
<input type="text" v-model="inputs.name" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Attribute Details" required>
</div>
<span>
<i class="fas fa-minus-circle" #click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
</i>
<i class="fas fa-plus-circle" #click="add(k)" v-show="k == inputs.length-1">
</i>
</span>
</div>
<div class="w-full inline-block" v-else>
<div v-for="products in user.products">
<!-- <p>{{ products.brand }} </p> -->
<div class="flex inline-block">
<select class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
<option v-for="products in products">{{ products.brand }} </option>
</select>
<div class="flex inline-block">
<div id="input-group" class="ml-4 w-3/5">
<input type="text" :value="user.profile.weight_in_kilos" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Crime Details" required>
</div>
<span class="mr-2">
<i class="fas fa-minus-circle" #click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
</i>
<i class="fas fa-plus-circle" #click="add(k)" v-show="k == inputs.length-1">
</i>
</span>
</div>
</div>
</div>
</div>
</div>
So looking at the code that I have, I want to display all the brands / attributes in case of this one into something that's working since it's not working on my end. You can send me a chat thru Skype or Discord, whatever you say I'll use it.. Cause I need some help
I have a single file for creating and updating the category data.
while creating category, i am using v-model in title to also create slug in the same form.
works well when creating but i am facing issue with update / edit form part.
below is my code :
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug" placeholder="Category Title" value="{{ $category->name ?? '' }}">
adding whole blade file code for reference:
#extends('layouts.backend.app')
#php
if(isset($record) && $record != null){
$edit = 1;
} else {
$edit = 0;
}
#endphp
#section('content')
<section id="app" class="container mx-auto">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold">
#if($edit) Edit #else Create #endif Category Form
</h1>
Back
</div>
<div class="border rounded mt-8 p-8">
<form action="#if($edit) {{route('category.update', $record->id)}} #else {{route('category.store')}} #endif" method="POST">
#csrf
<label class="block mb-4">
<span class="text-gray-700 font-bold">Name</span>
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug" placeholder="Category Title" value="{{ $category->name ?? '' }}">
#error('name')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-4">
<span class="text-gray-700 font-bold">Slug</span>
<input
class="form-input mt-1 block w-full"
name="slug"
id="slug"
v-model="slug"
placeholder="Slug / Pretty URL">
#error('slug')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-8">
<span class="text-gray-700 font-bold">Banner</span>
<input
class="form-input mt-1 block w-full"
name="banner"
value="#if($edit) {{$record->banner}} #else https://source.unsplash.com/random #endif"
placeholder="Banner / URL">
</label>
<div class="flex justify-between">
<button class="px-4 py-2 border bg-gray-200 text-gray-900 rounded" type="submit">Submit</button>
<button class="px-4 py-2 border bg-red-400 text-white rounded" type="rest">Reset</button>
</div>
</form>
</div>
</section>
#endsection
as you can see the title input is use to create the slug on keyup event. now the given code don't use the data from database for pre populating the edit form title input field. because i am using v-model="title" which is in my app.js and is null at the moment.
How to either assign v-model="title" my current value from database.
This is not a vue component. its a laravel blade file. Kindly guide me for this.
Thanks
You can move the app.js code to the Blade view and populate title with the Blade expression
#extends('layouts.backend.app')
#php
if(isset($record) && $record != null){
$edit = 1;
} else {
$edit = 0;
}
#endphp
#section('content')
<section id="app" class="container mx-auto">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold">
#if($edit) Edit #else Create #endif Category Form
</h1>
Back
</div>
<div class="border rounded mt-8 p-8">
<form action="#if($edit) {{route('category.update', $record->id)}} #else {{route('category.store')}} #endif"
method="POST">
#csrf
<label class="block mb-4">
<span class="text-gray-700 font-bold">Name</span>
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug"
placeholder="Category Title" value="{{ $category->name ?? '' }}">
#error('name')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-4">
<span class="text-gray-700 font-bold">Slug</span>
<input class="form-input mt-1 block w-full" name="slug" id="slug" v-model="slug"
placeholder="Slug / Pretty URL">
#error('slug')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-8">
<span class="text-gray-700 font-bold">Banner</span>
<input class="form-input mt-1 block w-full" name="banner"
value="#if($edit) {{$record->banner}} #else https://source.unsplash.com/random #endif"
placeholder="Banner / URL">
</label>
<div class="flex justify-between">
<button class="px-4 py-2 border bg-gray-200 text-gray-900 rounded" type="submit">Submit</button>
<button class="px-4 py-2 border bg-red-400 text-white rounded" type="rest">Reset</button>
</div>
</form>
</div>
</section>
{{-- Place the script here, after closing the section with id of app --}}
<script>
const app = new Vue({
el: '#app',
data() {
return {
title: '{{ $category->name }}'
}
},
methods: {
getSlug() {
this.title = this.title.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'');
}
}
});
</script>
#endsection
Hope this helps
In The End, I went back to the old style of doing things.
code as below:
getSlug() {
var title = document.getElementById('title').value;
document.getElementById('slug').value = title.replace(/\s+/g, '-').toLowerCase().trim();
},
and replaced v-model with id tag on the input field.