SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding multiple emails

    Hi,

    I want to be able to add an endless amount of emails that a user will add to a textbox and append the value to a label adding a hidden field. This needs to be done hopefully with jQuery.

    An image of what i am trying to do is attached to this post.

    I have the following HTML:

    Code:
        <form action="" method="post" name="preAlertEmail" id="preAlertEmail" class="pre-alert-email-form">
            <div class="email-list">
                <div class="email-list-item">
                    <input type="hidden" name="email[]" value="abc.def@ghi.com" /><b>abc.def@ghi.com</b>
                </div>
            </div>
            <div class="contents">
                <h3 class="toggle-additional-emails">Add additional emails</h3>
                <div class="additional-emails">
                    <div class="form-item">
                        <span class="form-body">
                            <input type="email" name="preAlertEmail" id="preAlertEmail" class="email four add-email-input"
                                placeholder="Enter an email address (e.g j.smith@bt.com)" />
                        </span>
                    </div>
                    <input type="button" class="button left add add-email" id="addEmail" name="addEmail" value="Add email" />
                </div>
            </div>
    </form>
    Basically what needs to happen is when the "Add email" button is clicked it needs to append a field like so:

    <input type="hidden" name="email[]" value="abc.def@ghi.com" /><b>abc.def@ghi.com</b>
    And keep adding them every time the user enters another email and clicks on the Add email button.

    I had a go at doing this and come up with this:

    Code:
    function _addEmail(){
    	
    	$('.add-email').unbind('click').click(function(e){
    		e.preventDefault();
    		var url = $(this).parents('form').attr('action');
    
    		$.ajax({
    	  		url: url,
    	  		dataType: 'html',
    	  		cache: false,
    	  		success: function(data){
    	  			$(this).parents('form').find('ul.email-list').append('<li>'+data+'</li>');
    	  			alert($(this).parents('form').find('ul.email-list').text())
    	  		},
    	  		error: function(){
    	  			alert('Sorry, there was an error with your request. Please try again.')
    	  		}
    		});
    	});
    
    }
    But that doesn't work, it keeps going into the error function. Can anybody help me out?

    Kind regards,
    Attached Images Attached Images
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


Bookmarks

Posting Permissions

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