how to add fancybox when an input submit button is clicked?

2
votes

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();
4
javascriptjqueryhtmlfancybox
what are you trying/want to display in the fancybox? - lukeocom
You missed # $("#submitme").fancybox(); will work Please vote up the comment if its useful thanks - Vignesh Subramanian
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

4 Answers

3
votes

Refer it by #,

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

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.net"
});

See JSFIDDLE

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

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

See JSFIDDLE

1
votes

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();
0
votes

I was trying to add this into shopify

<form action="//mailchimpurlcodehere" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>


<input type="email" value="" name="EMAIL" style="padding:10px; background:#C7DAE5; border:0px; color:#000; width:220px; font-weight:bold;" id="mce-EMAIL" placeholder="Email address here" required><input style="padding:10px; background:#134F73; border:0px; color:#000; font-weight:bold;" type="submit" value="STAY TUNED" name="subscribe" id="mc-embedded-subscribe" class="button"

but I dont know where to put the javascript string it doesnt work. I even tried to add a folder and name it jquery.fancybutton.js for this code:

 $("#mc-embedded-subscribe").fancybox({
type : "iframe",
href : "mailchimpurlcodehere"});

so I can add this as {{ 'jquery.fancybutton.js' | shopify_asset_url | script_tag }} but it doesnt work help.