I am trying to make a form that has three different submit buttons or inputs. I read that to do that I have to provide a name and a value attribute to the button. I already tried the button tag and input tag. But when I try to submit them and then print the POST request from within Django. nothing is printed. Only the csrf token is included with the POST request.
This is the code I am trying. It only works when there is an input tag other than the submit type. but then I can't seperate them because any button will post everything in the form. THanks!
<input type="submit" name="first_choice" value="first" class="btn btn-danger" >
<input type="submit" name="first_choice" value="second" class="btn btn-info" >
<input type="submit" name="first_choice" value="third" class="btn btn-success" >
Try:
<input type="submit" name="choice1" value="first" class="btn btn-danger" >
<input type="submit" name="choice2" value="second" class="btn btn-info" >
<input type="submit" name="choice3" value="third" class="btn btn-success" >
In the view
if 'choice1' in request.POST: ...
Related
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 two buttons with inputs, like this:
<div class="input-group col-5 align-self-center">
<input id="endeDate" class="form-control" placeholder="dd.mm.yyyy" name="endeDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateEnd')"
ngbDatepicker #endeDate="ngbDatepicker" formControlName="dateEnd" (focus)="endeDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="endeDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
<div class="input-group col-5 align-self-center">
<input id="startDate" class="form-control" placeholder="dd.mm.yyyy" name="startDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateStart')"
ngbDatepicker #startDate="ngbDatepicker" formControlName="dateStart" (focus)="startDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="startDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
I need to write unit tests. Unit test has to check datepicker.
it('check Validation field Ende', () => {
let datepicker = fixture.debugElement.nativeElement.querySelector('button').endeDate.toggle();
expect(document.querySelector('.dropdown-menu.show')).toBeNull();
datepicker.click();
expect(document.querySelector('.dropdown-menu.show')).not.toBeNull();
});
But in first and second it opened the same first button.
I tried also this:
let datepicker =
fixture.debugElement.query(By.css('input[id=endeDate]'));
datepicker.nativeElement.click();
but it doesn't work.
Have somebody another Idea
Typically - with Angular being more of the UI component - I will not recommend doing this as a "unit test" from inside Angular. This is more of an end-to-end test you are performing, so why not make use of something like Selenium?
Also - you are selecting the element by CSS - highly recommend you do it by ID instead.
I have 2 submit buttons in my form.
<input type="submit" value="Save as Draft">
<input type="submit" value="Save">
Basically, what I want to do is when the user clicks on Save as Draft, it will proceed to bring all the form details to _update.cfm (without validating) and when the user clicks on Save, it will proceed to _validate.cfm and then to _update.cfm(validating and updating the database.)
HTML:
<cfset tx_name = "">
<cfif isDefined("form.tx_name")>
<cfset tx_name = form.tx_name>
</cfif>
<cfinclude template="_validate.cfm">
<cfif isDefined("form.tx_name")>
<cfinclude template="_update.cfm">
</cfif>
<form name="something">
<input type="text" name="tx_name" value="#tx_name#">
<input type="submit" value="Save as Draft">
<input type="submit" value="Save">
</form>
So basically what the above form does is that, by default, tx_name = " " and when user types something and submits, it will do all the validation in _validate.cfm and then proceed to _update.cfm to update it.
This is the intended way to work when the user clicks on Save button. However, for Save as Draft, I would like it to skip the _validate.cfm and straight bring all the form field data to _update.cfm.
The following is what I tried:
Attempt 1:
Instead of having <input type="submit" value="Save as Draft">, I used <input type="button" value="Save as Draft" onClick="location.href='_update.cfm';". And this didn't bring the form fields to _update.cfm and I figured out the reason, its because it is just redirecting to _update.cfm upon clicking the button.
So this made me think that I really need a submit button (to bring form data to the _update.cfm page).
But here is where I am lost as I have now 2 submit buttons. 1 of it is to work with _validate.cfm and the other to work without _validate.cfm.
So how do I go about to make Save as Draft not validate but update and Save to validate and update?
I would go down the road of both buttons having the same name, but a different value. I would also use button tags so that I could have better control over the display vs the value submitted. I would then not have to deal with if the display needs change, I would not have to change the processing. Last but not least I would wrap it so that it only operates in post
<cfscript>
if (cgi.request_method == "post") {
if (form.keyexists("tx_name") tx_name = form.tx_name;
if form.SaveMode == "Save") include "_validate.cfm";
if (form.keyexists("tx_name") include "_update.cfm";
}
</cfscript>
<form name="something" method="post">
<input type="text" name="tx_name" value="#tx_name#">
<button type="submit" name="SaveMode" value="Save as Draft">Save As Draft</button>
<button type="submit" name="SaveMode" value="Save">Save</button>
</form>
For that you have to add name for the two submit buttons. And using that name we can prevent the _validate.cfm inclusion, while submitting the form through clicking "Save as draft" button.
Also the form method should be POST, so that form scope will be available on action page, otherwise it'll available in URL scope.
<cfset tx_name = "">
<cfif isDefined("form.tx_name")>
<cfset tx_name = form.tx_name>
</cfif>
<cfif isdefined("form.Save")>
<cfinclude template="_validate.cfm">
</cfif>
<cfif isDefined("form.tx_name")>
<cfinclude template="_update.cfm">
</cfif>
<form name="something" method="post">
<input type="text" name="tx_name" value="#tx_name#">
<input type="submit" name="SaveAsDraft" value="Save as Draft">
<input type="submit" name="Save" value="Save">
</form>
I use a hidden form field called action. On the buttons I attach an onClick to change the value of action. On the form's action page I read that value and determine what to do. EX:
<input type="hidden" name="action" value="save" id="action">
<button type="submit" class="button button-basic-green" onclick="document.getElementById('action').value='save';"><span class="fa fa-save"></span> Save</button>
<button type="submit" class="button button-basic" onclick="document.getElementById('action').value='reload';"><span class="fa fa-repeat"></span> Save & Reload</button>
<button type="submit" class="button button-basic" onclick="document.location.href='./';return false;"><span class="fa fa-arrow-circle-o-left"></span> Cancel</button>
I'm looking for a way to not automatically show the CMS toolbar (version 3.3.0) when a 'staff-user' logs in.
The toolbar should only be activated when ?edit is in the URL.
The documentation mentions the CMS_TOOLBAR_HIDE option, but I don't see any effects when enabled. Also the description:
"If True, the toolbar is hidden in the pages out django CMS."
seems not totally clear to me...
Any ideas?
If you add ?toolbar_off to the URL the toolbar disappears completely (no toggle button). ?edit turns it back on.
To automatically turn it off:
(A) You'd could add something like a middleware or hook into the login chain and add the parameter there.
(B) You might subclass/extend the CMSToolbar to override the following default behavior:
def init_toolbar(self, request):
self.request = request
self.is_staff = self.request.user.is_staff
self.edit_mode = self.is_staff and self.request.session.get('cms_edit', False)
self.show_toolbar = self.is_staff or self.request.session.get('cms_edit', False)
if self.request.session.get('cms_toolbar_disabled', False):
self.show_toolbar = False
Especially the last lines would have to be changed to use a default of True:
if self.request.session.get('cms_toolbar_disabled', True):
self.show_toolbar = False
I have overridden the login.html and adding a trailing ?toolbar_off to the {{ next }} hidden input value.
<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
<div class="form-element-wrapper">
<input class="form-input" type="text" name="username" autofocus="" maxlength="254"
required="" id="id_username" data-cip-id="id_username">
<span class="form-input-highlight"></span>
<span class="form-input-bar"></span>
<label for="username" class="form-label">Username</label>
</div>
<div class="form-element-wrapper">
<input class="form-input [% password_css %]" type="password" name="password" required=""
id="id_password" data-cip-id="id_password">
<span class="form-input-highlight"></span>
<span class="form-input-bar"></span>
<label for="password" class="form-label">Passwort</label>
<!-- THIS IS THE IMPORTANT LINE! -->
<input type="hidden" name="next" value="{{ next }}?toolbar_off"/>
</div>
<div class="form-element-wrapper">
<button class="form-element form-button" type="submit"
value="{% trans 'Log in' %}">{% trans 'Log in' %}</button>
</div>
</form>
Just a little solution if a user signs in via the login page. This does not affect the login via ?edit.
I have a bootstrap button group in my Ember 2.2 app that looks like this:
<div class='btn-group' role='group' aria-label='...'>
<button type="button" class="btn btn-primary btn-xsm active={{aIsActive}}" >A</button>
<button type="button" class="btn btn-primary btn-xsm active={{bIsActive}}" >B</button>
<button type="button" class="btn btn-primary btn-xsm active={{cIsActive}}" >C</button>
</div>
'aIsActive', 'bIsActive', and 'cIsActive' are defined in the associated controller, and only one will be 'true' at a given time. The syntax shown above doesn't work. What's the proper way of doing this?
Here you go: if-helper
<button class="btn {{if aIsActive 'active'}}" >A</button>
btw, if you are creating navigation you should do it with link-to helper. It will add active class automatically when route is active.