I have been trying to view whether the checkbox is checked (value: Add customer) or unchecked ( value: 0) based on the database value. But the checkbox show checked when the database (MySQL) value is 0 in Livewire.
"change_metadata1"=>$this->change_metadata1,
"change_metadata2"=>$this->change_metadata2,
"change_metadata3"=>$this->change_metadata3,
"change_metadata4"=>$this->change_metadata4,
"change_metadata5"=>$this->change_metadata5,
"change_metadata6"=>$this->change_metadata6,
Customer name
Customer address
<label for="change_metadata">
<input type="checkbox" id="standards" value="Scope" wire:model="change_metadata3"> Scope
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="New contact" wire:model="change_metadata4"> New contact
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="Number of employees" wire:model="change_metadata5"> Number of employees
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="New decision" wire:model="change_metadata6"> New decision
</label>
Related
I have a Django form field that is prefilled and using widget gave it a class. The form is rendered out in html as
<div id="id_clothingType" class="closet-form-section form-clothing-type">
<div>
<label for="id_clothingType_0">
<input type="radio" name="clothingType" value="11" class="closet-form-section form-clothing-type" required="" id="id_clothingType_0">
Accessory
</label>
</div>
<div>
<label for="id_clothingType_1">
<input type="radio" name="clothingType" value="12" class="closet-form-section form-clothing-type" required="" id="id_clothingType_1" checked>
Top
</label>
</div>
</div>
How do I style the radio inputs as buttons such that it changes its background color when it is checked without changing the html (form template)?
The problem is that the input is within the labels, so I am unable use the conventional way of the input:checked + label to style them.
Result view after check [x ]Car 1: checked both
[ x]Car 1 [x ]Car 2
Code:
Component:
public $plan_requirement2 = [];
View:
<label for="requirement2">
<input type="checkbox" id = "requirement2" value="Red car" wire:model="plan_requirement2"> Car 1
</label>
<label for="requirement2">
<input type="checkbox" id = "requirement2" value="Blue car" wire:model="plan_requirement2"> Car 2
</label>
public $plan_requirement2 = [];
checkbox attribute must be array
try this
<label>
<input type="checkbox" value="Red car" wire:model.defer="plan_requirement2" wire:key="requirement1"> Car 1
</label>
<label>
<input type="checkbox" value="Blue car" wire:model.defer="plan_requirement2" wire:key="requirement2"> Car 2
</label>
How can I let livewire know that a model is a particular modal
I have this in my livewire component
public $itemname;
public function updateReceivedKg()
{
$this->validate([
'itemname' => 'required',
]);
dump($this->itemname)
}
On livewire view, I have this
#foreach($result->products as $index=>$data)
<form wire:submit.prevent="updateReceivedKg()">
<div class="input-group">
<input required wire:model.defer="itemname" type="text" class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-sm btn-success">Update</button>
</span>
</div>
</form>
#endforeach
After generating the form, I have about 11 forms. The issue is that livewire always submit the last itemname that was entered. For example, if on the first form, I entered "Mango" and go to another form and enter "Apple", if I go back to the form which I have already written "Mango" and click the submit (without typing anything) button, if I dump the submitted form and check the itemname, it shows it is the Apple. This is wrong because I submitted the Mango form.
In normal Laravel, I have no issue with this type of form submission. It will detect which form I submitted.
Please how can I achieve the same result using Livewire
You have the same itemname for a lot of elements. You should probably append the index to the modelname.
public $itemname1;
public $itemname2; // etc..
#foreach($result->products as $index=>$data)
<form wire:submit.prevent="updateReceivedKg()">
<div class="input-group">
<input required wire:model.defer="itemname{{$index}}" type="text" class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-sm btn-success">Update</button>
</span>
</div>
</form>
#endforeach
I have a dummy project in Flask, which consists in a web form, where you fill in 3 cities, which are then printed upon submition.
This is my init.py file:
#app.route('/average_temperatures/<city1>/<city2>/<city3>', methods=['POST', 'GET'])
def results_temperature(city1, city2, city3):
return "The cities are: {}, {}, {}".format(city1, city2, city3)
The function works, but I am unable to pass the variables from the form straight into the function, as parameters.
edit:
My goal is to have the city variables as part of the URL in the clean form of /city1/city2/city3.
This is the form:
<div class="input-group">
<form action="{{ url_for('results_temperature', city1=city1, city2=city2, city3=city3) }}" method="POST">
<input type="text" class="form-control" placeholder="City 1" name="city1"></input>
<input type="text" class="form-control" placeholder="City 2" name="city2"></input>
<input type="text" class="form-control" placeholder="City 3" name="city3"></input>
<div class="row" style="margin-bottom: 20px;"></div>
Filling out the form results in a URL
http://example.com/average_temperatures///
So I evidently fail to pass the form fields in the form action part.
Any hits are appreciated, cheers.
You should get the cities from the request.form variable.
#app.route('/average_temperatures', methods=['POST', 'GET'])
def results_temperature():
return "The cities are: {}, {}, {}".format(request.form['city1'], request.form['city2'], request.form['city3'])
In your HTML form:
<form action="{{ url_for('results_temperature') }}" method="POST">
<input type="text" class="form-control" placeholder="City 1" name="city1"></input>
<input type="text" class="form-control" placeholder="City 2" name="city2"></input>
<input type="text" class="form-control" placeholder="City 3" name="city3"></input>
</form>
I have a simple input radio for toggling between active and inactive. I can not figure out how to get Ember to tie this to the model. My RAW html currently looks like this:
<fieldset class="checkboxes">
<label class="active" for="is_active">
<input type="radio" id="is_active" name="status" value="1" checked="">
<span>Active</span>
<div class="input"></div>
</label>
<label class="sep">/</label>
<label class="inactive" for="inactive">
<input type="radio" id="inactive" value="0" name="status">
<span>Inactive</span>
<div class="input"></div>
</label>
Does anyone have any ideas on how to do this using the Ember form model binding?
make your labels action, that will allow you to play with them in the controller. I hope this help....
<fieldset>
<label class="option-buttons" for="reason1" {{action "setDeclineReason" "Too Expensive" on="mouseDown"}}>
<input name="decline-reason" id="reason1" value="Too Expensive" type="radio">
<span>
<div class="check"></div>
Too expensive
</span>
</label>
<label class="option-buttons" for="reason2" {{action "setDeclineReason" "Lack of Amenities" on="mouseDown"}}>
<input name="decline-reason" id="reason2" value="Lack of Amenities" type="radio">
<span>
<div class="check"></div>
Lack of amenities
</span>
</label>
</fieldset>
App.DeclineController = Ember.Controller.extend({
declineReason: null,
decline: function(){
var update = this.store.update('request', {
id: this.get('model').id,
user_decline_reason: this.get('declineReason')
});
update.save();
actions:{
setDeclineReason: function(declineReason){
this.set('declineReason', declineReason);
}
}
});