Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Using HTML form inside jQuery growl plugin...?

    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?

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I figured out my issue. Turns out, since the growl plugin calls the HTML, the ID was being duplicated and there was no unique identifier for the JS to bind to.

    I gave the form a class identifier:
    Code:
    <form class="mailinglistSubmit" method="get" .....
    and then changed the JS to:
    Code:
            $(document).ready(function() {
    	$(document).on('submit', '.mailinglistSubmit', function(){
    Now there is a new problem! The variables from the form are not being sent into the script properly, in fact, they are not being sent in at all! And my 'message' div is not being populated either. I am assuming these are both due to similar identifier issues. But I dont know the problem. Any takers this time around?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •