I am fairly new to jQuery and have come across an issue with a plugin. Now, this issue is not necessarily specific to this plugin, so please read on as any information will prove useful!
I have a plugin that displays mac like Growl display boxes on the website. The code for the Growl box is as follows (in header):
Code:
<!--Growl Mailing List Script-->
<script type="text/javascript">
jQuery(function($) {
$("#msgMailingList").ready(function(){
$.Growl.show($("#mailinglist").html(),{
'title' : "title text goes here
'icon' : "envelope",
'timeout': false,
'speed': "900"
});
});
});
</script>
This code displays a message box when the user enters the website asking to join a mailing list. It is linked to display a specific HTML div called 'mailinglist'. Mailinglist looks like (in body):
Code:
<div id="mailinglist" style="display:none;">
<form class="mailinglistSubmit" method="get" action="/"><input type="hidden" name="tx_stwjqueryfeedback_pi1[action]" value="send"/>
<h7><strong>Mailing List Signup</strong></h7>
<fieldset>
<label for="tx_stwjqueryfeedback_pi1[fName]">First Name: </label><input type="text" name="fname" id="fname" value=""/><br/>
<label for="tx_stwjqueryfeedback_pi1[lEmail]">Last Name: </label><input type="text" name="lname" id="lname" value=""/><br/>
<label for="tx_stwjqueryfeedback_pi1[cEmail]">Email: <span class="tx-stwjqueryfeedback-required-mark">* </span></label><input type="email" name="email" id="email" value=""/><br/>
<br/>
<input type="submit" value="submit" id="SendButton"/>
</fieldset>
</form>
<br>
<mlerror><div id="message"></div><br><br><br></mlerror>
</div>
This submit button calls a javascript (in body):
Code:
<script type="text/javascript">
var emailEntered,
fnameVal,
lnameVal;
$(document).on("submit", "mailinglistSubmit", function(){
$(".error").hide();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#email").val();
if(emailaddressVal == '') {
$("#message").html('<span class="error">Enter your email address before submitting.</span>');
return false;
}
else if(!emailReg.test(emailaddressVal)) {
$("#message").html("<span class='error'>You have entered an invalid email address.</span>");
return false;
}
else {
emailEntered = escape($('#email').val());
}
fnameVal = escape($("#fname").val());
lnameVal = escape($("#lname").val());
});
$('#signup').submit(function() {
$("#message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php',
data: 'ajax=true&email=' + emailEntered +'&fname=' + fnameVal + '&lname=' + lnameVal,
success: function(msg) {
$('#message').html(msg);
}
});
return false;
});
</script>
The aformentioned javascript will connect with a PHP file that connects to a MailChimp API to update mailing list records.
Here is the issue: The submit button in the growl box is not functioning and does nothing but reload the page. However, if I pull that form out of the mailinglist div, it functions perfectly. Any ideas why putting this div inside the growl box would stop it from functioning? I have been working on this for close to 2 weeks now, to no avail. Any help would be very much appreciated!
Addition: I recently changed the form over to a class, getting rid of the 'id' as it appears that the id was essentially duplicating itself once it was copied to the growl box... this may have caused some identity issues with jquery. However, I know there is probably something more incorrect with the way I am naming/calling the specific class... because the form no longer works when pulled out of the div. Anyhow... any ideas?
Before you post, read our: 
Using HTML form inside jQuery growl plugin...?
