Right way to pass value using button click on question page

Question

I'm using the below code to mark a question as read (for each individual user). But using the postid as button value is causing problem in many default q2a themes. Is there a better way for this?

$q_view['form']['buttons'][] = array("tags" => "name='read-button' value='$postid' title='".qa_lang_html('featured_lang/read_pop')."'", "label" => qa_lang_html('featured_lang/read'));

Output from Muffin theme - Expected (same for Donut).

Output from Snow theme - newly added buttons are displaying their value instead of label. 

Comments

I'd say any button that contains a number rather than an action is already smelly.

Aside from that, what exactly is the issue there? I see buttons with numbers and the code you're showing is generating a button with numbers. With that information, I'd say it is generating the expected result. What's the exact issue? Or maybe, what is the expected output?

---

I have added that in the question now. Confusion is with respect to the usage of label and value fields of the buttons.

Answer 1

The official way of creating a button is defined by the base theme. in short, it should be this way:

$qa_content['q_view']['form']['buttons']['button-id'] = array(

    'tags' => 'name="a-name"',

    'label' => 'A label',

    'popup' => 'A title',

);

You might complain and say SnowFlat doesn't show the label. That's true, because this theme expects buttons to be images. You can turn your button to contain text by just applying some CSS to it:

 .qa-form-light-button-button-id {

    text-indent: initial;

    padding: 0 10px;

    width: initial;

}

Now, if you need to pass a post ID, you can use a hidden field in the form. Or even better, just: qa_request_part(0), after making sure the qa_clicked('button-id') is the one you expected.

Comments

Thank you pupi. I'll update the code.

---

Thanks again :) It worked great. Just needed this small change.
.qa-form-light-button-lists {
    text-indent: initial!important;
    padding: 0 10px!important;
    width: initial!important;
}