Get value from different element without form

Questions / Help
1

Is there a way to get value of element by click event on another element without using form for example

<input id="input1" />
<button type="button" :on-click="next" />

by clicking the button I pass value of input1 as param or access it somehow.

as far as I know only by using form and submit I can get input values or is there another way?

2

Javascript can do that kind of interactivity…

I think there is a typo on :on-click.

3

You can use the Phoenix.HTML functions without form data. Never used that with a button, but as I understand the docs it should work.

4

This does not seem to work!

The idea was this:

<form action="" phx-change="changed">
  <%= text_input :user, :inp_1 %>
  <%= text_input :user, :inp_2 %>
  <%= submit :user %> <!-- not possible -->
</form>

When I change one of the inputs I get these params for "changed"

%{
  "_target" => ["user", "inp_2"],
  "user" => %{"inp_1" => "test 1", "inp_2" => "test 2"}
}

But you can’t trigger changed with a button.

This:

Without form data
Sometimes we may want to generate a text_input/3 or any other tag outside of a form. The functions in this module also support such usage by simply passing an atom as first argument instead of the form.

is not applicable to submit

1 Like
5

Thanks for trying, I guess the only solution is using JS hooks :pensive:

6

did you manage to figure it out using JS hooks?

7 
    <input type="text" id="some-id" />
    <button type="button" id="hooks-require-an-id" phx-hook="fun-time" data-target="#some-id">
      Have Fun Time
    </button>

let funTime = {
  mounted() {
    this.el.addEventListener("click", () => {
      let valEl = document.querySelector(this.el.dataset.target)
      // NOTE: valEl.value IS NOT the same as valEl.getAttribute("value")
      // probably you also want to "if valEl" ... etc
      alert(valEl.value)
    })
  }
}

This is one way to do it.

Possibly it would be nicer to put the hook on the form and dispatch events to it if you needed more than one button <-> input pairing. The original posts actual intent isn’t super clear. You can get the id’s of an input with the Phoenix.HTML.Form functions (called something like id_for_input?), as well as generating ids for the button etc if you want.

You can then push the value up in an event, or alter the value of another input with it and optionally dispatch an “input” event on that element to trigger the regular form on-change event.

1 Like
8

image
image1149Ă—442 41.3 KB

Hooks.EditableTag = {
  inputFieldSelector() { return this.el.dataset.input_elem },
  eventName() { return this.el.dataset.event_name },
  target() { return document.querySelector(this.el.dataset.target_selector) },
  mounted() {
    this.el.addEventListener("click", e => {
      let inputField = document.getElementById(this.inputFieldSelector())
      console.log(this.el.dataset);
      // this sends event to the live_component with `editable_tags` (non-live) component 
      this.pushEventTo(this.target(), this.eventName(), { tag: inputField.value })

    })
  }
}

This is how I achieved this. Pretty similar.

Thanks @soup

1 Like
9

What if we keep the submit button inside the form and pass the value from outside the form to the submit button. Will this be possible if there is not one but whole list of details of a student for example?