I've got a form and I want a modal to fire when the submit button is clicked. I'm using the Zurb Reveal.js plugin, and am calling jQuery and the relevant reveal.js.
I've got the following code:
<input type="submit" id="submit-button" data-reveal-id="myModal" value="Submit this support request">
And this at the foot of the page (before the end body tag):
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function() {
$("#myModal").reveal();
});
});
</script>
The data-reveal-id works when there is an anchor tag firing the modal, so I thought that I could fire it programmatically with the above JS (given on the plugin site), but that doesn't seem to work either. Help?
As your button is a submit button, when you will click on it, the page will be refreshed according to the form options. If you are not using a form, you need to use <button> instead.
reveal is not a JQuery standard method
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function(event) {
//Prevent form submission to avoid page refreshing
event.stopPropagation()
//Show your div
$("#myModal").fadeIn(300);
});
});
</script>
You need to prevent button's default character first then open modal.
<script type="text/javascript">
$(document).ready(function() {
$("#buttonForModal").click(function(event) {
event.preventDefault();
$("#myModal").reveal();
});
});
</script>
Related
Spend good few hours on this one and couldn't find a good solution so here goes:
I am having a tracking pixel in an iframe. On button click I want to firstly fire the tracking pixel and then submit a form. Usually I would have a page in the middle where I fire a pixel and pass a form but in this project I have no access to the backend and cannot make intermediate page. I have tried to simply add onClick='firePixel()' to button assuming it will submit the form AND load iframe but it does not. I have also tried to create 2nd function and add callback in a way: onClick(firePixel(submitForm)) having submitForm as a callback - also with no luck.
P.S Also I have tried to have button outside of the form (as seen below) as well as inside the form - no luck.
Not sure what's the best practice here? I don't mind if iframe is being fired in the background - user is never seeing it - it's just a tracking pixel.
Please find code (which does not work) below:
<iframe id='conversioniFrame' data-src="testFrame.html"
src="about:blank" width='100px' height="100px">
<div class='panel clearfix'>
<form id="options-go-to-insurer" action="/life/buy/" method="post">
<!-- Form stuff -->
</form>
<button id="conversionButton" class="button primary expand apply-button" onclick="conversionFunction(submitForm())"><b>Apply Now</b></button>
</div>
<!-- STOP -->
<script>
function conversionFunction(callback) {
var iframe = $("#conversioniFrame");
iframe.attr("src", iframe.data("src"));
callback();
}
function submitForm() {
document.getElementById("options-go-to-insurer").submit();
}
</script>
Note the type="button" is mandatory to not submit the form
If the page and the iframe code is from the same domain, you could just return
<script>parent.document.getElementById("options-go-to-insurer").submit()</script>
from the testIframe.html
If not, try this
$(function() {
$("#conversionButton").on("click", function() { // when button is clicked
var $tracker = $("#conversioniFrame");
$tracker.attr("src", $tracker.data("src")); // load the page
});
$("#conversioniFrame").on("load", function() { // when page has loaded
$("#options-go-to-insurer").submit(); // submit the form
});
});
<iframe id='conversioniFrame' data-src="testFrame.html" src="about:blank" width='100px' height="100px">
<div class='panel clearfix'>
<form id="options-go-to-insurer" action="/life/buy/" method="post">
<!-- Form stuff -->
</form>
<button type="button" id="conversionButton" class="button primary expand apply-button"><b>Apply Now</b>
</button>
</div>
Using jQuery I need to hide a DIV and show an image when the Submit button on a form is clicked.
The relevant part of the HTML is below:
<div class="form-group">
<div id="submitDiv" class="col-md-offset-4 col-md-1">
<button id="Submit" name="Submit" type="submit" class="btn btn-primary">Submit</button>
</div>
<div id="SpinWheelDiv" class="col-md-offset-4 col-md-1">
<img id="SpinWheel" height="20px" src="../img/spin.gif" hidden="">
</div>
</div>
The jQuery script being used is below:
<script type="text/javascript">
$('#formCForm').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
$('#SpinWheel').removeAttr('hidden');
$('#submitDiv').attr("hidden","true");
return true;
}
});
</script>
The problem is that when return is set for false this works on both Safari and Chrome. With the return set to true it does not work on Safari anymore. Strangely enough if a put an alert("Hello") before the return Safari does show the alert but fails to hide the div and show the image.
On Chrome everything works as expected.
Maybe I should add that I am using Bootstrap along with Bootstrap Validator
Any ideas please?
Try using:
$('#submitDiv').attr("hidden","hidden");
instead of using
$('#submitDiv').attr("hidden","true");
Simply you can write following code to show an element.
$('#submitDiv').show();
To show or hide best and easy way is to use method .show() and .hide()
e.isDefaultPrevented() by the jQuery API's definition is only true when you e.preventDefault();
I'm not sure if this checks does what you want, but if you don't prevent the default behavior of your submit button; it will trigger an action on the above laying <form> which usually results in a page refresh.
Do e.preventDefault() and start handling your form from there.
I am new at Javascript and jQuery. I want to show a "loading-gif" after the user submitted a form but can't figure out why my code is not working. That's the situation:
the form has the id="form"
the loading-div has the id="loading" and the style="display:none" (and some others of course)
the submit-button has the class="formtrigger" (and no type="submit")
That's my javascript (initialized after jquery at the bottom of the html-page):
$('.formtrigger').click(function() {
$('#loading').show();
$('#form').submit();
});
When I click the button, the form is submitted, but the loading-div doesn't appear. I tried the line "$('#loading').show();" without binding it on the click-event and it worked. I also tried this code:
$('.formtrigger').click(function() {
alert('blablabla');
$('#form').submit();
});
and both statements worked! First the alert is shown and then the form is submitted. Why does the other code not work?
Thanks in advance.
EDIT: I've also tried the following variations without success
$('.formtrigger').click(function() {
$('#form').submit();
});
$('#form').submit(function() {
$('#loading').show();
});
and
$('.formtrigger').click(function() {
$('#loading').show();
window.setTimeout($('#form').submit(), 5000);
});
and
//HTML
<button type="submit">...</button>
//JS
$('#form').submit(function() {
$('#loading').show();
});
In your .submit(), show your loading spinner:
$("#loading").show();
And after your .submit() is done, hide it:
$("#loading").hide();
And make your spinner display: none; by default since the jQuery above simply changes the css properties for your specified element.
I provided you with a simple demo where I have an AJAX function echoing your message from the text input. It will show a loading spinner until it reaches success.
Fiddle Demo
In the Head put...
<script type="text/javascript">
<!--
function showHide(){
//create an object reference to the div containing images
var oimageDiv=document.getElementById('searchingimageDiv')
//set display to inline if currently none, otherwise to none
oimageDiv.style.display=(oimageDiv.style.display=='none')?'inline':'none'
}
//-->
Put this where you want the spinner to appear... (of course you'll need to find an animated gif for a spinner)
<div id="searchingimageDiv" style="display:none"> <img id="searchingimage1" src="http://www.pathtoyourimage/images/searching.gif" alt="" /> </div>
Your submit button text should be...
<input type='submit' value='Next' name='submit' onclick='showHide()'>
How can I call a function only when a form validates?
My submit button opens a modal when pressed, but it does this even when the form does not validate. How can I tie the modal to the validation aspect so that the modal only shows when the form is valid?
HTML:
<head>
<script src="js/additional-methods.js"></script>
<script src="js/jquery-validate.min.js"></script>
<script src="js/modalEffects.js"></script>
<div class="md-modal md-effect-16" id="modal-16">
<div class="md-content">
<h3>Thank you for signing up!</h3>
<div>
<p>We're excited to have you onboard as launch in late July.</p>
<ul>
<li><strong>Read:</strong> Check your email. Make sure you're subscribed to the email list.</li>
<li><strong>Surprise:</strong> Thanks for believing in us. As a gesture of thanks, you're getting the first batch of $50 giftcards to use on VERSEUX.</li>
<li><strong>Share:</strong> There are still some giftcards left. Share them with your friends, family, and fashionistas.</li>
</ul>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
<div class="md-overlay"></div><!-- the overlay element -->
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
JSfiddle
The JS and CSS code is pretty long, so It's on the fiddle
Quote OP:
"My submit button opens a modal when pressed, but it does this even when the form does not validate. How can I tie the modal to the validation aspect so that the modal only shows when the form is valid?"
Within the jQuery Validate plugin, the submitHandler callback function only fires on the click of the submit button when the form is valid. So you'd trigger the opening of your modal from inside this.
See: http://jqueryvalidation.org/validate
However, despite that you've included the jQuery Validate plugin files in your code, you are not using the .validate() method anyplace in your OP or your jsFiddle.
I have a button example below
<button id="startrunning">go</button>
There is no form or anything I'm using on the same page java script to detect it's click. It will work like I want it to when I click it. I want to see when the page is loaded it will automatically submit it's self is there a way?
Thank you
jsFiddle: http://jsfiddle.net/QEu84/10/
<script type="text/javascript">
function submit()
{
document.getElementById("startrunning").click(); // Simulates button click
document.submitForm.submit(); // Submits the form without the button
}
</script>
<body onload="submit()">
<form id="submitForm">
<button id="startrunning">go</button>
</form>
</body>
You can automatically click it when the page loads, using the code below, but you need a form to submit something (you submit a form, not a button)
<body onLoad="document.getElementById('startrunning').click();">