Added autofocus and clear name on sumbit
This commit is contained in:
parent
76af0becf9
commit
d1aea4886e
@ -49,15 +49,44 @@ async fn add_participant(name: String, group: String) -> Result<(), ServerFnErro
|
|||||||
/// Renders the home page of your application.
|
/// Renders the home page of your application.
|
||||||
#[component]
|
#[component]
|
||||||
pub fn AddParticipant() -> impl IntoView {
|
pub fn AddParticipant() -> impl IntoView {
|
||||||
let form_submit = create_server_action::<AddParticipant>();
|
let name = create_rw_signal("".to_string());
|
||||||
|
let group = create_rw_signal("A1".to_string());
|
||||||
|
|
||||||
|
let name_input_ref: NodeRef<html::Input> = create_node_ref();
|
||||||
|
|
||||||
|
let form_submit_action = create_action(|input: &(String, String)| {
|
||||||
|
let input = input.to_owned();
|
||||||
|
|
||||||
|
async move { add_participant(input.0, input.1).await }
|
||||||
|
});
|
||||||
|
|
||||||
|
let form_submit = move |ev: ev::SubmitEvent| {
|
||||||
|
ev.prevent_default();
|
||||||
|
|
||||||
|
form_submit_action.dispatch((name.get(), group.get()));
|
||||||
|
|
||||||
|
name.set("".to_string());
|
||||||
|
let _ = name_input_ref.get().unwrap().focus();
|
||||||
|
};
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<h2>"Deelnemer toevoegen"</h2>
|
<h2>"Deelnemer toevoegen"</h2>
|
||||||
<ActionForm action=form_submit>
|
<form on:submit=form_submit>
|
||||||
<label>Naam</label>
|
<label>Naam</label>
|
||||||
<input type="text" name="name" autocomplete="off" />
|
<input
|
||||||
|
type="text"
|
||||||
|
autocomplete="off"
|
||||||
|
node_ref=name_input_ref
|
||||||
|
on:input=move |ev| {
|
||||||
|
name.set(event_target_value(&ev));
|
||||||
|
}
|
||||||
|
prop:value=name
|
||||||
|
/>
|
||||||
<label>Groep</label>
|
<label>Groep</label>
|
||||||
<select name="group" autocomplete="off">
|
<select on:change=move |ev| {
|
||||||
|
let new_value = event_target_value(&ev);
|
||||||
|
group.set(new_value);
|
||||||
|
} autocomplete="off">
|
||||||
<option value="A1">A1</option>
|
<option value="A1">A1</option>
|
||||||
<option value="A2">A2</option>
|
<option value="A2">A2</option>
|
||||||
<option value="A3">A3</option>
|
<option value="A3">A3</option>
|
||||||
@ -94,6 +123,6 @@ pub fn AddParticipant() -> impl IntoView {
|
|||||||
<option value="Z6">Z6</option>
|
<option value="Z6">Z6</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="submit" value="Deelnemer toevoegen" />
|
<input type="submit" value="Deelnemer toevoegen" />
|
||||||
</ActionForm>
|
</form>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user