apparently it seems like this fancybox only works for anchor tags that has an ID or class ?, but i want to use it in a submit button...is there a way to use it in that element ?

e.g this doesn't work because fancybox needs an href that will pull the contents

<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />

fancy box code

$("#submitme").fancybox();

apparently it seems like this fancybox only works for anchor tags that has an ID or class ?, but i want to use it in a submit button...is there a way to use it in that element ?

e.g this doesn't work because fancybox needs an href that will pull the contents

<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />

fancy box code

$("#submitme").fancybox();

• javascript
• jquery
• html
• fancybox

• what are you trying/want to display in the fancybox? – lukeo Commented Feb 22, 2013 at 7:25
• You missed # $("#submitme").fancybox(); will work Please vote up the ment if its useful thanks – Vignesh Subramanian Commented Feb 22, 2013 at 7:30
• am gonna display another form ,and this form inside the fancy box, will have a submit button as well, whereby , it will submit the data from it's own input fields and from the parent form data – sasori Commented Feb 24, 2013 at 14:42

3 Answers 3

Refer it by #,

$("#submitme").fancybox();

The issue is not whether fancybox can be bound to a submit button or not. The actual issue is that your submit button doesn't tell fancybox the target content to open and the type of content it is.

So having this :

<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />

... will work if you hard code the missing elements href and type in your costom script like :

$("#submitme").fancybox({
    type : "iframe",
    href : "http://jsfiddle"
});

See JSFIDDLE

Optionally, you can hard code any html content too like :

$("#submitme").fancybox({
    content : "<p>Any html as content</p>"
});

See JSFIDDLE

You are missing the # in your node reference. But that's probably just because you typed out your code in the question. You could always style a hyperlink to look like a button, give it a URL and attach the fancybox to it:

<!--<input type="submit" id="submitme" name="submitme" value="SUBMIT ME" />-->
<a href="somewhere.htm" id="submitme" name="submitme" value="SUBMIT ME" >SUBMIT ME</a>

$("#submitme").click(function(event){
    event.preventDefault();//stop the hyperlink from navigating away from the current page
}).fancybox();