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();
Share
Improve this question
edited Feb 22, 2013 at 7:49
sasori
asked Feb 22, 2013 at 7:20
sasorisasori
5,46319 gold badges93 silver badges146 bronze badges
3
- 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
Reset to default 3Refer 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();