Highlighting buttons to send to server

[bit-n...@hotmail.com]

I have a situation, where I have a couple of buttons, of which ONE has to be selected, and then a say, SUBMIT button called to contact the server. That is to say, if say, these buttons are GREY in colour, and called "Shop", "Eat" and "Drink", when "Eat" is clicked, it'll turn RED. Only ONE button can be red out of all the 3 - if say, "Drink" is clicked subsequent to that, IT will turn red and the 2 others will turn (or remain) grey.

I'm a little flummoxed as to how to architect this entire thing. How do I "select" one particular button? It will (obviously) involve CSS, but besides that - I'm especially worried as to how to let the *SERVER* get the argument of which button was highlighted - ie. if "Shop" was selected, the server has to know that it was "Shop" that the user selected.
How? :)

Not sure, but I'm posting this here on the JS group, not HTML or CSS or whatever.


Thanks.

[Julio Di Egidio]

On Monday, July 24, 2017 at 1:11:04 PM UTC+2, bit-n...@hotmail.com wrote:

> I'm a little flummoxed as to how to architect this entire thing.

Learn Knockout.js, the idea and then use it, because it's really great.

> How do I "select" one particular button? It will (obviously) involve CSS,

The idea is a button's click shall change the state (the model); the
state shall in turn reflect into a CSS class applied (or not applied)
to the button(s).

> I'm especially worried as to how to let the *SERVER* get the argument of
> which button was highlighted

You can put it into the value of a hidden field. Again, ideally where that
value just reflects the underlying state.

And you can certainly do that without a binding engine, but the ideal
architecture remains the same, just you'd have to write all the plumbing
yourself (*a lot* of plumbing generally) and still learn the relevant
abstractions.

Now, of course, there is also an easier approach, that you do it all
directly in the click handlers: set the CSS classes and set the hidden
field's value. It just won't "scale", i.e., roughly, the amount of
plumbing and cross-referencing involved grows exponentially with the
number of interface elements: which means that pretty soon one is back
to reinventing a binding engine anyway, just without knowing...

HTH,

Julio

[Evertjan.]

bit-n...@hotmail.com wrote on 24 Jul 2017 in comp.lang.javascript:

> I have a situation, where I have a couple of buttons, of which ONE has
> to be selected, and then a say, SUBMIT button called to contact the
> server. That is to say, if say, these buttons are GREY in colour, and
> called "Shop", "Eat" and "Drink", when "Eat" is clicked, it'll turn RED.
> Only ONE button can be red out of all the 3 - if say, "Drink" is clicked
> subsequent to that, IT will turn red and the 2 others will turn (or
> remain) grey.

If onlly one can be active, input-radio is the better option, methinks.

the selected option in css can change the color and the onclick can do the
form submit().

> I'm a little flummoxed as to how to architect this entire thing. How do
> I "select" one particular button?

By clicking on it, I presume.

> It will (obviously) involve CSS, but
> besides that - I'm especially worried as to how to let the *SERVER* get
> the argument of which button was highlighted

Why should the server need to know the highlighting?

> - ie. if "Shop" was
> selected, the server has to know that it was "Shop" that the user
> selected. How? :)

The server would know the clicking action by the submission of a form,
or the onclick XMLHttpRequest() interaction.

[the form submission should target another window, or your highlighting will
be gone anyway]

A XMLHttpRequest() could return the result of a toggle or select-option
action, and so synchronize the server and the client state.

> Not sure, but I'm posting this here on the JS group, not HTML or CSS or
> whatever.

Did you yet test any ideas?

In fact you should ask the Q, not just stating your lack of cetainty.
Well, I am shure, that is what you meant.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)