diff --git a/examples/form.rs b/examples/form.rs index 3637826da..3b8d470b3 100644 --- a/examples/form.rs +++ b/examples/form.rs @@ -20,6 +20,8 @@ fn app(cx: Scope) -> Element { input { r#type: "text", name: "username" } input { r#type: "text", name: "full-name" } input { r#type: "password", name: "password" } + input { r#type: "radio", name: "color", value: "red" } + input { r#type: "radio", name: "color", value: "blue" } button { r#type: "submit", value: "Submit", "Submit the form" } } } diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 3ecfe9913..351189e2b 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -241,25 +241,33 @@ fn virtual_event_from_websys_event( for x in 0..elements.length() { let element = elements.item(x).unwrap(); if let Some(name) = element.get_attribute("name") { - let value: String = (&element) + let value: Option = (&element) .dyn_ref() .map(|input: &web_sys::HtmlInputElement| { + log::info!("Input type: {}", input.type_()); match input.type_().as_str() { "checkbox" => { match input.checked() { - true => "true".to_string(), - false => "false".to_string(), + true => Some("true".to_string()), + false => Some("false".to_string()), } }, - _ => input.value() + "radio" => { + match input.checked() { + true => Some(input.value()), + false => None, + } + } + _ => Some(input.value()) } }) - .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| input.value())) - .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| input.value())) - .or_else(|| target.dyn_ref::().unwrap().text_content()) + .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| Some(input.value()))) + .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| Some(input.value()))) + .or_else(|| Some(target.dyn_ref::().unwrap().text_content())) .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener"); - - values.insert(name, value); + if let Some(value) = value { + values.insert(name, value); + } } } }