does leptos support multiple submit button?

[kzhui125]

https://www.geeksforgeeks.org/how-to-use-multiple-submit-buttons-in-an-html-form/

<form class="row" on:submit=greet on:submit2=greet2>
    <input
        id="greet-input"
        placeholder="Enter a name..."
        on:input=update_name
    />
    <button type="submit">"Greet"</button>
    <button type="submit" formaction="/submit2">"Greet"</button>
</form>

[gbj]

Yes.

Is there a question behind the question? i.e., "I'm trying to do X but Y doesn't work"?

In your example of course greet2 will never be called because there's no DOM event called submit2.

[kzhui125]

This is my code, when I click button submit2, I want to display "456", but it seems on:submit2=greet2 doesn't work.

Thanks,

use leptos::leptos_dom::ev::SubmitEvent;
use leptos::*;
use serde::{Deserialize, Serialize};
use serde_wasm_bindgen::to_value;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "tauri"])]
    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

#[derive(Serialize, Deserialize)]
struct GreetArgs<'a> {
    name: &'a str,
}

#[component]
pub fn App() -> impl IntoView {
    let (name, set_name) = create_signal(String::new());
    let (greet_msg, set_greet_msg) = create_signal(String::new());
    let (greet_msg2, set_greet_msg2) = create_signal(String::new());

    let update_name = move |ev| {
        let v = event_target_value(&ev);
        set_name.set(v);
        // set_name.update(|value| *value = String::from("123"));
    };

    let greet = move |ev: SubmitEvent| {
        ev.prevent_default();
        spawn_local(async move {
            set_greet_msg.set("123".to_string());
        });
    };

    let greet2 = move |ev: SubmitEvent| {
        ev.prevent_default();
        spawn_local(async move {
            set_greet_msg2.set("456".to_string());
        });
    };

    view! {
        <main class="container">
            <div class="row">
                <a href="https://tauri.app" target="_blank">
                    <img src="public/tauri.svg" class="logo tauri" alt="Tauri logo"/>
                </a>
                <a href="https://docs.rs/leptos/" target="_blank">
                    <img src="public/leptos.svg" class="logo leptos" alt="Leptos logo"/>
                </a>
            </div>

            <p>"Click on the Tauri and Leptos logos to learn more."</p>

            <p>
                "Recommended IDE setup: "
                <a href="https://code.visualstudio.com/" target="_blank">"VS Code"</a>
                " + "
                <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank">"Tauri"</a>
                " + "
                <a href="https://github.com/rust-lang/rust-analyzer" target="_blank">"rust-analyzer"</a>
            </p>

            <form class="row" on:submit=greet on:submit2=greet2>
                <input
                    id="greet-input"
                    placeholder="Enter a name..."
                    on:input=update_name
                />
                <button type="submit">"Greet"</button>
                <button type="submit" formaction="/submit2">"Greet"</button>
            </form>

            <p><b>{ move || greet_msg.get() }</b></p>
            <p><b>{ move || greet_msg2.get() }</b></p>
        </main>
    }
}

[gbj]

As I said above, there is no such thing as a submit2 event so that will never fire. You should either use an on:click on that second button, or use on:submit on the form and check which element is the submitter with the submitter() method on SubmitEvent https://docs.rs/web-sys/latest/web_sys/struct.SubmitEvent.html#method.submitter