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!
Related
I have a web-form written in ASp.Net MVC5 which is used to gather some details from the user. However, before I get them to submit the form, I want them to have the option to look at another web-page (in a new window or tab) which gives them more information if they need it prior to submitting the page. To that end, on the web-form, I have a form with the following buttons:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button onclick="getMoreInfo()">More Information</button>
<button type="button">Submit Form</button>
</form>
Then, at the bottom of the page I have the following javascript defined:
<script>
function getMoreInfo()
{
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse);
return false; // trying to stop the form submission from occurring
}
</script>
My problem is that when this "More Information" button is clicked, it has the effect of submitting the form [which I don't want to do yet] - since there is a separate submit button for doing that task. Is there a way to use a button to jump to another page without actually submitting the current form?
thanks heaps,
David.
I found that answer #3 at this question helped me:
How do I cancel form submission in submit button onclick event?
My solution was to change the code thus:
I changed the button code to look like this:
<form action="/Application/MyAction" method="post" id="myForm">
// various fields ...
<button id="moreInformationButton" >More Information</button>
<button type="button">Submit Form</button>
</form>
And then I changed the javascript to look like this:
$("#moreInformationButton").click(function (event) {
event.preventDefault(); // This stops the submit form being triggered
var urlToUse = 'http://some-other-page.html';
window.open(urlToUse); // open the help page
});
This allowed me to open up another window or tab with more information without actually submitting the form.
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>
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 modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)
OK so I haven't messed with JavaScript in a long time but I do remember some. I have tried Google but it hasn't proved to be what i wanted.
Let's say I have a link... when you click it -- a window pop-up box appears. You can submit the form... then when you press submit! The pop-up box with the form you just filled out would close and the page you clicked the box up box would be redirected....
How would I make that happen?
Try this:
Parent page:
<script type="text/javascript">
window.name="dansMainPage";
function popWin(link) {
var w = window.open(link.href,link.target,'width=500,height=600,resizable');
return w?false:true; // if popup blocker, use the default behaviour of the link
}
</script>
<a href="pagewithform.html" target="_blank"
onClick="return popWin(this)">Pop form</a>
child page:
<form target="dansMainPage" onSubmit="setTimeout(function() { window.close() },1000)">
.
.
.