Adding multiple emails

JavaScript
1

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:


    <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:


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,

2

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:

<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>
3

Thanks,

That worked :slight_smile: