I have a form that needs to be filled out.
<form action="../massmail.php" method="post">
<label>Period:</label>
<div class="form-inline"><input class="form-inline input-small" name="month" type="text" placeholder="e.g.: June" />
<input class="input-mini" name="year" type="text" value="2015" />
</div>
<br />
<label>Introductory text:</label>
<div>
<textarea name="introduction" rows="5"></textarea>
</div>
<br />
<label>URL of the newsletter:</label>
<div>
<input class="input-xxlarge" name="newsletter_link" type="url" value="" />
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Send</button>
<button class="btn" formaction="../preview.php" formmethod="get" type="submit">Preview</button>
<a href="index.php"><button class="btn" type="button">Cancel</button></a>
</div>
</form>
The form controls are contained within the last <div>. The second button is intended to show a preview before submitting the form, overriding the default form action.
Although it currently works, I want the preview to appear in a modal window (pop-up). Unfortunately, the modal class only works with <a> elements. In the past, I have resolved this by setting the class of the <a> element to "btn modal", but in this case, I require an actual button due to the need for the 'formaction' attribute.
Here are the things I have attempted along with their outcomes:
<button class="btn modal" formaction="../preview.php" formmethod="get" type="submit" rel="{handler: 'iframe', size: {x: 920, y: 530}}">Preview</button>Outcome: The form behaves as expected, but no pop-up window appears; instead, the results are displayed as if a link has been opened to the PHP page.
<a class="modal" href="preview.php" rel="{handler: 'iframe', size: {x: 920, y: 530}}"> <button class="btn" type="button" formaction="../preview.php" formmethod="get" type="submit">Preview MOD</button> </a>Outcome: This opens the pop-up with the PHP page but does not pass the results from the form to the PHP page.
The snippet includes modal.css, which does not appear to have any specific styling for <a> or <button> elements. Additionally, there is javascript included in modal.js, although my familiarity with it is limited.
I am attempting these modifications within a custom HTML module in Joomla! 3.4.3.
Any assistance would be greatly appreciated.