SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  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

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hy,
    In your form you have the same name and id in <form> tag and input text box "preAlertEmail", but thei mus be different.
    Try this example:
    HTML Code:
    <script type="text/javascript"><!--
    $(document).ready(function() {
      $('#addEmail').click(function() {
        var adem = $('#preAlertEmail').val();
        var inph = '<input type="hidden" name="email[]" value="'+adem+'" /><b>'+adem+'</b><br />';
        $('#inph').append(inph);
      });
    });
    --></script>
    <form action="" method="post" name="formid" id="formid" class="pre-alert-email-form">
      <div class="email-list">
        <div class="email-list-item" id="inph">
          <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>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

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

    That worked
    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
  •