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.
Related
I have a submit button and on its click, both validation and confirm box pop up are happening at the same time. Is there any way where on click, it validates first and on its success confirm modal box appears.
Note that I'm using the following for confirmation box
$("#submit").modalconfirm({
afterconfirm:function{
$(this).parents("form").submit;}
});
Validations are being done using '.validate'
And the following to validate on click of submit
$("#submit").click(function(){
$("#form").valid();
}
And the following in HTML
Inside a div:
<button id="submit" class="" data-confirmation-content="#some"> Submit</button>
After the div:
<div id="some" title"confirmation">
<p> Are you sure? </p>
</div>
I've also tried another way including a new modal with class modal fade and modal-header,body,footer and implemented submit handler in the js but after validation when I click on submit the screen is being blurred out but the confirm dialog box is not appearing.
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I am new to this field. I am trying to build a joomla website, in which I would like a subscription form (acy mailing). The form I 'd like it to be a pop-up window. I searched the other inquiries in this forum and I have achieved the most of it. Now I have a pop-up form (acy mailing subscription module), but the form closes when I click in the form. When I click outside the form does nothing as I want it.
Here is the code I used:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<div class="popup" onclick="myFunction()">CLICK HERE TO SUBSCRIBE
<span class="popuptext" id="myPopup">
<table class="acym_form">
*(the acy mailing form module here)*
</table>
</span>
</div>
Does anyone have a solution for this?
Thank you very much in advance!
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>
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();">