web-collect-form-multi-lists.html

<script type="text/javascript">

<!--
// isEmail (STRING s [, BOOLEAN emptyOK])
// whitespace characters
var whitespace = " \t\n\r";

//
// Email address must be of form a@b.c ... in other words:
// * there must be at least one character before the @
// * there must be at least one character before and after the .
// * the characters @ and . are both required
function isValidEmail(s)
{
	if (isEmpty(s)) return false;

	// is s whitespace?
	if (isWhitespace(s)) return false;

	// there must be >= 1 character before @, so we
	// start looking at character position 1
	// (i.e. second character)
	var i = 1;
	var sLength = s.length;

	// look for @
	while ((i < sLength) && (s.charAt(i) != "@"))
	{ i++
	}

	if ((i >= sLength) || (s.charAt(i) != "@")) return false;
	else i += 2;

	// look for .
	while ((i < sLength) && (s.charAt(i) != "."))
	{ i++
	}

	// there must be at least one character after the .
	if ((i >= sLength - 1) || (s.charAt(i) != ".")) return false;
	else return true;
}

// Check whether string s is empty.
function isEmpty(s)
{
	return ((s == null) || (s.length == 0))
}

// Returns true if string s is empty or
// whitespace characters only.
function isWhitespace(s)
{
	var i;

    // Is s empty?
    if (isEmpty(s)) return true;

    // Search through string's characters one by one
    // until we find a non-whitespace character.
    // When we do, return false; if we don't, return true.
    for (i = 0; i < s.length; i++)
    {
		// Check that current character isn't whitespace.
		var c = s.charAt(i);

		if (whitespace.indexOf(c) == -1) return false;
    }
    // All characters are whitespace.
    return true;
}

function checkForm() {
	z=0;
	celements=document.getElementsByName('lid');
		for (c=0;c<celements.length;c++){
		if (celements[c].checked){
			z=z+1;
			}
		}
	if (z<1){
	alert("Please select at least one list.");
		return false;
	}
	if (!isValidEmail(document.subscribeForm.elements['Email Address'].value)) {
	document.subscribeForm.elements['Email Address'].style.backgroundColor='yellow';
		alert("Please enter a valid Email Address. (name@host.com)");
		document.subscribeForm.elements['Email Address'].focus();
		return false;
	}
}
//-->

//jQuery

jQuery(document).ready(function($) {

  $('#collegeNewsletterCheckbox').click(function(){
    if($('#collegeNewsletterCheckbox').is(':checked')) {
      var ourLidVal = $('#ourLid').val();
      $('form').attr('action', function(i, value) {
          return value + "&lid=" + ourLidVal;
      });
    }
  });



  if($('#collegeIDTNewsletterCheckbox').is(':checked')) {
    var ourVal = $(this).val();
    $('form').attr('action', function(i, value) {
        return value + "&lid=" + ourVal;
    });
  }

});

//jQuery

</script>

<form action="https://cl.exct.net/subscribe.aspx?SubAction=sub" id="ourSubscribeForm" name="subscribeForm" method="post" onSubmit="return checkForm();">

  <input type="hidden" name="thx" value="https://clas.asu.edu/manage-subscriptions-success" />
  <input type="hidden" name="err" value="https://clas.asu.edu/manage-subscriptions-error" />
  <input type="hidden" name="usub" value="https://clas.asu.edu/manage-subscriptions-unsubscribe" />
  <input type="hidden" name="MID" value="7201485" />
  <input name="ASU College of Liberal Arts and Sciences" type="hidden" value="TRUE" />

  <div class="form-group">
    <label for="firstNameInput">First Name</label>
    <input class="form-control" id="firstNameInput" placeholder="First Name" name="First Name" style="width: 280px;">
  </div>

  <div class="form-group">
    <label for="lastNameInput">Last Name</label>
    <input class="form-control" id="lastNameInput" placeholder="Last Name" name="Last Name" style="width: 280px;">
  </div>

  <div class="form-group">
    <label for="emailAddressInput">Email Address</label>
    <input type="email" class="form-control" id="emailAddressInput" placeholder="Email Address" name="Email Address" style="width: 280px;">
  </div>

  <h4>I am a:</h4>

  <select class="form-control" id="ourLid" style="width: 280px;">
    <option value="9551">Faculty</option>
    <option value="9549">Staff</option>
    <option value="2721">Student (undergrad and grad)</option>
    <option value="2721">Alumni</option>
    <option value="2721">Friend of the college</option>
  </select>

  <h4>I want to sign up for:</h4>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="collegeNewsletterCheckbox" name=lid>College Newsletter
    </label>
  </div>
  <p>Our monthly newsletter covers the best of the best within our college, from new research to notable achievements of students, alumni and faculty. A great way to stay in the know.</p>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="collegeIDTNewsletterCheckbox" name=lid value="9554">IDT Newsletter
    </label>
  </div>
  <p>Published at least twice a semester, this newsletter covers instructional technologies, professional development opportunities, design services and more. Your source for what’s new.</p>

  <button type="submit" class="form-submit btn btn-primary">Submit</button>

</form>