I have a form where all input fields are made reactive with an array of values in a Vuex store.
Here is the form :
<form #submit="submitForm">
<div class="mb-3">
<label for="nom" class="form-label">Nom:</label>
<input :value="nom" #input="onInputChange" type="text" class="form-control" id="nom" placeholder="Nom"
name="NOM">
<span style="color: red">{{ fieldErrors.nom }}</span>
</div>
<div class="mb-3">
<label for="prenom" class="form-label">Prénom:</label>
<input :value="prenom" #input="onInputChange" type="text" class="form-control" id="prenom"
placeholder="Prénom" name="PRENOM">
<span style="color: red">{{ fieldErrors.prenom }}</span>
</div>
<div class="mb-3 mt-3">
<label for="email" class="form-label">Courriel:</label>
<input :value="email" #input="onInputChange" type="text" class="form-control" id="email"
placeholder="Email" name="EMAIL" />
<span style="color: red">{{ fieldErrors.email }}</span>
</div>
<div class="mb-3 mt-3">
<label for="phone" class="form-label">Téléphone:</label>
<input :value="phone" #input="onInputChange" type="text" class="form-control" id="phone"
placeholder="Numéro de téléphone" name="PHONE" />
<span style="color: red">{{ fieldErrors.phone }}</span>
</div>
<div class="mb-3 mt-3">
<label for="postalCode" class="form-label">Code postal:</label>
<input :value="postalCode" #input="onInputChange" type="text" class="form-control" id="postalCode"
placeholder="Code Postal" name="POSTALCODE" />
<span style="color: red">{{ fieldErrors.postalCode }}</span>
</div>
<div class="mb-3 mt-3">
<input :checked="termsAndConditions" #change="onInputChange" type="checkbox" class="me-1" id="chkTerms"
placeholder="TERMS AND CONDITIONS" name="TERMS_AND_CONDITIONS" />
<label for="chkTerms" class="form-label">I accept the terms and conditions:</label>
<span style="color: red">{{ fieldErrors.termsAndConditions }}</span>
</div>
</form>
All inputs share the same function (onInputChange) when there is a change to the value
Here are the computed properties used for the form as well as the function mentionned above:
computed: {
...mapGetters(["nom", "prenom", "email", "phone", "postalCode", "termsAndConditions", "items"]),
},
methods: {
onInputChange(evt) {
const element = evt.target;
const value =
element.name === "TERMS_AND_CONDITIONS"
? element.checked
: element.value;
store.commit('UPDATE_'+element.name, value);
},
As you can see, whenever there is a change in inputs, the appropriate mutation will be called from the store.
Here is the store and all the relevant mutations:
const state = {
fields: {
nom: '',
prenom: '',
email: '',
termsAndConditions: false,
phone:'',
postalCode:'',
},
}
const mutations = {
UPDATE_NOM(state, payload) {
state.fields.nom = payload;
},
UPDATE_PRENOM(state, payload) {
state.fields.prenom = payload;
},
UPDATE_EMAIL(state, payload) {
state.fields.email = payload;
},
UPDATE_PHONE(state, payload){
state.fields.phone = payload
},
UPDATE_POSTALCODE(state, payload){
state.fields.postalCode = payload
},
UPDATE_TERMS_AND_CONDITIONS(state, payload) {
state.fields.termsAndConditions = payload;
},
}
The problem is: Whenever there is a change in state on the checkbox, the values in the textboxes nom, phone and postalCode are cleared. Their corresponding values in the store stay the same though and the textboxes prenom and email don't have their values cleared at all.
What is this behavior and why is it happenning?
Note: For reproduction sake, I am using bootstrap 5 so you might want to remove the classes if they cause a problem
All your <input> elements bind value to a different store getter, not the actual state. You didn't post what your getters are and the error is likely there, but you say your state remains correct when you toggle the checkbox, so just bind your <input> elements to the actual state, i.e. use mapState instead of mapGetters. Even better, two-way bind your state with v-model on your <input> instead of the combination of :value + #input:
<div class="mb-3 mt-3">
<label for="postalCode" class="form-label">Code postal:</label>
<input
v-model="$store.state.fields.postalCode"
type="text"
class="form-control"
id="postalCode"
placeholder="Code Postal"
name="POSTALCODE"
/>
</div>
<span style="color: red">{{ fieldErrors.postalCode }}</span>
<div class="mb-3 mt-3">
<input
v-model="$store.state.fields.termsAndConditions"
type="checkbox"
class="me-1"
id="chkTerms"
placeholder="TERMS AND CONDITIONS"
name="TERMS_AND_CONDITIONS"
/>
<label for="chkTerms" class="form-label"
>I accept the terms and conditions:</label
>
<span style="color: red">{{ fieldErrors.termsAndConditions}}</span>
</div>
no onInputChange(), mapState, or even mutations needed
Did you console.log(element), what do you get there?
I am not sure but I think you need to pass the event to your function call
#input="onInputChange"($event)
I tried looking up at the issue but, it seems like I am doing it right?
So my HTML content shows that
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" [(ngModel)]="email" required>
<label for="username"><b>User Name</b></label>
<input type="text" placeholder="User Name" [(ngModel)]="username" required>
<label for="firstname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" [(ngModel)]="firstname" required>
<label for="lastname"><b>Last Name</b></label>
<input type="text" placeholder="Enter Last Name" [(ngModel)]="lastname" required>
I have errors running through my HTML
Error occurs in the template of component SignupComponent.
and each of them says
Property 'lastname' does not exist on type 'SignupComponent'.
i have a form where every email is registered with #scoops.com but every time i have to enter #scoops.com i want that user just enter email name and #scoops.com auto fill and it will also show at the end of input field ? here it is my code
<div class="form-group" autocomplete="off">
<label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
<input autocomplete="nope" type="text" name="email" id="email" class="form-control input-lg"
placeholder="Enter Email" name="name" required=""/>
<span id="error_email"></span>
#if($errors->has('email'))
<div class="alert alert-danger">
{{ $errors->first('email') }}
</div>
#endif
</div>
i want something like this
Since you use Bootstrap: Try to wrap your mail input into an Inputgroup.
And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.
<div class="input-group">
<input autocomplete="off" type="text" name="email" id="email" class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
<div class="input-group-append">
<span class="input-group-text">#scoops.com</span>
</div>
</div>
Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:
<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>
<script>
function submit(inputValue) {
const email = inputValue + "#scoops.com"
// insert here the code (like a POST request) to send the 'email' constant to wherever you want
}
</script>
I want to ask how to call the value from another table under same database ?
Database table name: bit_app_policy_category
Under the database I have these columns:
ID
code
description
parent_id
status
Another Database Table name under same database : company_policy
Under the database i have these columns:
ID
policy_category_id
policy_title
version_no
policy_details
expiry_date
file_path
As for now I want to link the table bit_app_policy_category and get the columns of id's value into company_policy - policy_category_id. I don't know how to write the code.
Here is my current code :
<form method="post" action="{{route('policy.store')}}">
{{csrf_field()}}
#csrf
<div class="form-group">
<label for="bit_app_policy_category_parent">Parent Category</label>
<select id="bit_app_policy_category_parent" name="parent_id" class="form-control">
<option value=" {{"$parents->id"}} </option>n>
</select>
</div>
<div class="form-group">
<label for="company_policy_policy_title">Policy Title<span class="required">*</span></label>
<input id="company_policy_policy_title" type="text" name="policy_title" class="form-control" placeholder="Please Enter the policy title" />
</div>
<div class="form-group">
<label for="company_policy_version-no">Version-no<span class="required">*</span></label>
<input id="company_policy_version-no" type="text" name="version_no" class="form-control" placeholder="Please Enter the Version-no" />
</div>
<div class="form-group">
<label for="company_policy_policy_details">Policy Details<span class="required">*</span></label>
<input id="company_policy_policy_details" type="text" name="policy_details" class="form-control" placeholder="Please Enter the Policy Details" />
</div>
<div class="form-group">
<label for="company_policy_expiry_date">Expiry Date<span class="required">*</span></label>
<input id="company_policy_expiry_date" type="datetime-local" name="expiry_date" class="form-control" placeholder="Please Enter the Expiry Date time" />
</div>
<div class="form-group">
<label for="company_policy_file_path">Policy File Path<span class="required">*</span></label>
<input id="company_policy_file_path" type="text" name="file_path" class="form-control" placeholder="Please Enter the file path" />
</div>
<div class="form-group">
<input type="submit" class="btn btn btn-primary" />
Back</span>
Back to home</span>
</div>
</form>
</div>
</div>
#endsection
First create two model
1. PolicyCategory and put the code in model
public function companyPolicies()
{
return $this->hasMany('App\CompanyPolicy');
}
2.CompanyPolicy
public function policyCategory()
{
return $this->belongsTo('App\PolicyCategory',policy_category_id);
}
and in you controller then you can get all the info of related table. Like say, you have one/two company under the policy_category which id is 1. Now you can get all the companies info like below
$policy_category = PolicyCategory::find(1);
dd($policy_category->companyPolicies);
try this and let me know is this really you want or not
If I have an HTML form with two inputs that would insert/modify a columns with the same name in two tables in a database.
What would be the best way to name my input elements?
<div class="form-group">
<input type="text" class="form-control" id="mothers_name" name="name" placeholder="Enter Mothers Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="childs_name" name="name" placeholder="Enter Child's Name">
</div>
db-
--table1
---name
--table2
--name
I am trying to save these information using laravels create(request->all())
I see that the request object contains the last input value.
I would name the inputs the same way you have named the ids. (Or something similar.)
<div class="form-group">
<input type="text" class="form-control" id="mothers_name" name="mothers_name" placeholder="Enter Mother's Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="childs_name" name="childs_name" placeholder="Enter Child's Name">
</div>
Within your Controller, you could do something like this:
public function storeNameTable1(Request $request) {
$store_name = new Table1;
$store_name->name = $request->mothers_name;
$store_name->save();
}
public function storeNameTable2(Request $request) {
$store_name = new Table2;
$store_name->name = $request->childs_name;
$store_name->save();
}