Custom buttons in forms and quizzes

(Rperry) #1

I'm struggling to overcome using default html buttons by trying to nest %submit_button% in an anchor tag:


Attempt #1:



<a href="./?a=277604_formid=277626">

<img src="./?a=282153" alt="Take quiz" />

</a>





Attempt #2:



<a id="submit_button" class="sq-form-field" value="Submit" name="submit_button">

<img alt="Take quiz" src="http://www.education.tas.gov.au/__data/assets/image/0003/282153/quiz-button.gif"/>

</a>



As I need to use this form for 40 different quizzes, I would like to use some kind of dynamic link to submit the form if possible.



Or is this needing the dirty solution of positioning an image over the top of the submit button?



Thanks for looking.

(Robin Shi) #2

Did you try using CSS to do so?

    
    input[type="submit"] {
    background-image:url(http://www.education.tas.gov.au/__data/assets/image/0003/282153/quiz-button.gif);
    ...
    }

Then link the CSS via the design customisation to restrict the style to an area.

(Ryan Callaghan) #3

And are you talking about a constant button (Directs someone to place to START the quiz) and not actually the submit button of the quiz itself?

(Robin Shi) #4

No Ryan, I am suggesting use Style Sheet to change the button's look.

(Ryan Callaghan) #5

Ummm,


My suggestion would be like what Robin said adding it in the css, the way you do that - I can't really say a lot more on it because I'm not sure of the structure but if you've already created 40 forms on the website you might want to add it as a "global" style so its added to all your forms and forms you create.

(Rperry) #6

tried Robin's suggestion -made sense to handle it through CSS, but no luck so far:

    
    input[type="submit"] {
    background-image:url(http://www.education.tas.gov.au/__data/assets/image/0003/282153/quiz-button.gif);
    }
    

<div class="input" id="input"> %submit_button% </div></pre><br />




Also, yes [b]Ryan[/b], this button submit in this case is for user details form, but I still want to replace html buttons generally.
(Shane Weddell) #7

Rick


If you are going to try and use an anchor link to submit the form you will need to use javascript to do it like;


    need some help


I like Robins suggestion much better as submit buttons are for submitting forms and links are for linking.

Constant buttons were king in the MySource Classic days and should have been left there.
(Robin Shi) #8

[quote]
tried Robin's suggestion -made sense to handle it through CSS, but no luck so far:


    
    input[type="submit"] {
    background-image:url(http://www.education.tas.gov.au/__data/assets/image/0003/282153/quiz-button.gif);
    }
    

<div class="input" id="input"> %submit_button% </div></pre><br />




Also, yes [b]Ryan[/b], this button submit in this case is for user details form, but I still want to replace html buttons generally.

[/quote]


    
    input[type="submit"] {
    background-image:url(http://www.education.tas.gov.au/__data/assets/image/0003/282153/quiz-button.gif);
    width:96px;height:25px;
    color: transparent;
    }
    


Tweak the style Rick.
(Robin Shi) #9

[quote]
Rick



If you are going to try and use an anchor link to submit the form you will need to use javascript to do it like;


    need some help


I like Robins suggestion much better as submit buttons are for submitting forms and links are for linking.

Constant buttons were king in the MySource Classic days and should have been left there.
[/quote]

Hi Shane,

I still see Constant buttons in the design manual but i don't think they are designed for form submit buttons. From my view they should be used more likely for links e.g. feedback, about us etc.
(Shane Weddell) #10

[quote]
Hi Shane,



I still see Constant buttons in the design manual but i don't think they are designed for form submit buttons. From my view they should be used more likely for links e.g. feedback, about us etc.

[/quote]



Hi Robin



Yes they are in the design manual, Matrix included them in the early days as it was how classic managed the ability to change links per sections. Classic had a different way of managing design customisations. It was quickly discovered that constant buttons added a performance hit to the site and were mostly being used for links that were static anyway. They remain because they remain i guess but there are so many more elegant ways to achieve what they do but while there are so many sites out there using the design area they won't go away. My statement wasn't about using them in the form, this would be completely ludicrous and you would have to question anyone who would think to use it there;)

(Robin Shi) #11

Hi Shane,


Oh I must have misunderstood your point. Yes I agree with you that there are quite a lot alt ways to do the constant button's job. I think it's design for the instance that the user only has Matrix cache rather than Matrix and other Cache proxy.



We are using Squid which makes us not need to concern much about the Matrix server load thus we don't use constant buttons.



:lol:

(Nic Hubbard) #12

Why not just use javascript and add a click event to an image, which would then submit the form?


Here is some jQuery:


    $('img').click(function() {
    	$('form').submit();
    });
(Ryan Callaghan) #13

onClick = bad :P!


jQuery Event bind imo

(Nic Hubbard) #14

[quote]
onClick = bad :P!



jQuery Event bind imo

[/quote]



Are you saying the jQuery .click() function is bad? That DOES bind a click event. :slight_smile:

(Shane Weddell) #15

[quote]
onClick = bad :P!



jQuery Event bind imo

[/quote]



Yes Ryan, would be good if you explain what on earth you actually mean by this. Do you have an example of what it is that is "bad" and what the good would actually be?

(Rperry) #16

Thank you all as I am up and rolling! :smiley:

(Nic Hubbard) #17

[quote]
Yes Ryan, would be good if you explain what on earth you actually mean by this. Do you have an example of what it is that is "bad" and what the good would actually be?

[/quote]



If Ryan means that using the jQuery .click() function to bind is bad, then I never want to be good again. I want to be bad for the rest of my live, because I LOVE jQuery and all its event binding goodness.

(Shane Weddell) #18

I suspect it may have been a dig at me with the onclick in the a tag and a suck up to you Mr jQuery, just poorly written.


How did you solve it in the end Rick. CSS, jQuery or A tag hackery?