You can also use the name and value attribute for buttons and rely purely on browser behavior to get the value in your LiveView.
egze
3
lubien
I’m fond of that solution, used it recently here:
https://github.com/lubien/sorteios/blob/main/lib/sorteios_web/templates/session/new.html.heex#L48
https://github.com/lubien/sorteios/blob/main/lib/sorteios_web/controllers/session_controller.ex#L19
0
werkzeugh
werkzeugh
here’s my alpine-js workaround to it, in case someone can use it:
(in this case i needed a “test” button to pre-evaluate a form before really submitting it and closing the modal)
<div
x-data="{
submitAndTest: function() {
const field=this.getNextActionField();
field.value='test';
document.getElementById('editform').dispatchEvent(new CustomEvent('submit', { bubbles: true }));
field.value='';
},
getNextActionField() {
const form=this.$el.closest('form');
const field=form.querySelector('#_next_action_field');
if(field) {
return field;
} else {
var input = document.createElement('input');
input.type = 'hidden';
input.id = '_next_action_field';
input.name = 'action[name]';
const newfield=form.appendChild(input);
return newfield;
}
}
}"
>
<.form
:let={f}
for={@form}
as={:fdata}
phx-change="validate"
phx-submit="save"
phx-target={@myself}
id="editform"
>
<div>
<a x-on:click.stop.prevent="submitAndTest" href="#" >
Test Filter-Rules
</a>
</div>
then, in the live-component you can pattern match for the action parameter alongside your form-data:
def handle_event("save", %{"action" => %{"name" => "test"}, "form" => form}, socket) do
0
mitkins
Gosh, it’s been a while! The following article was in DockYard’s newsletter today:
Please read the article, but in my case this:
<.form for={@form} phx-submit="save">
...
<button name="save" value="work">Work</button>
<button name="save" value="break">Break</button>
</.form>
Would work with this:
def handle_event("save", %{"save" => save_type}, socket) do
# `save_type` will be either "work" or "break"!
{:noreply, socket}
end
Much simpler! 
10
D4no0
It should be mentioned that on older liveview versions this was not possible, the only way you could achieve this before (excluding the abominations where JS is involved) was to declare a a link with value and style it as a button.
0