javascript - 使用 Bootstrap JQuery 和 Mandril 表单中的复选框

Question

我正在尝试改编 Mikhail Niedre 的 Bootstrap 和 JQuery 表单。表格发布在这里:https://codepen.io/webcane/pen/LBspI 。基本上它包含如下联系表格。这按预期工作:

<form class="form-horizontal callmeform" id="contact_form">
  <fieldset>
  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-3 control-label" for="name">Name</label>  
    <div class="col-md-6">
      <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md">
    </div>
</div>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-3 control-label" for="name">Email</label>  
    <div class="col-md-6">
    <input id="email" name="email" type="text" placeholder="Name" class="form-control input-md">   
    </div>
</div>
<p>&nbsp;</p>
<!-- Button -->
  <div class="form-group">
    <label class="col-md-3 control-label" for="submit"></label>
        <div class="col-md-6">
          <button id="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
  </div>
  </fieldset>
</form>
</div>
<script>
  jQuery(function ($) {
$('#contact_form').submit(function () {
    var name = $('#name').val();
    var msg = $('#name').val() + $('#options').val();
    $.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages/send.json',
        data: {
            'key': 'xxx',
            'message': {
                'from_email': 'info@mail.com',
                'from_name': 'From',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': 'info@mail.com',
                        'name': 'Fill name here',
                        'type': 'to'
                    }]
            }
        }
    }).done(function (response) {
        $('#name').val('');
        $('#email').val('');
        window.location.href = '/thankyou';



    }).fail(function (response) {
        alert('Error sending message.');
    });
    return false;
});
});    </script>

我添加了一个 View 选择框，我想使用此表单邮寄。不知怎的，我无法让它发挥作用。邮件中的回复是“未定义”。也许你可以给我一些提示，我做错了什么。这是我到目前为止的代码。我正在尝试从邮件中的选项中获取值:

    <form class="form-horizontal callmeform" id="contact_form">
    <fieldset>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="name">Naam *</label>  
      <div class="col-md-6">
        <input id="name" name="name" type="text" placeholder="Naam" class="form-control input-md">   
      </div>
    </div>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="phone">E-Mail</label>  
      <div class="col-md-6">
        <input id="email" name="email" type="text" placeholder="Uw E-mail adres" class="form-control input-md">
      </div>
    </div>

    <div class="input-box">
            <ul id="options-1-list" class="options-list">
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_1" value="1"  /><span class="label"><label for="options_1_2">option 1 </label></span></li>
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_2" value="2"  /><span class="label"><label for="options_1_3">option 2 </label></span></li>
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_3" value="3"  /><span class="label"><label for="options_1_4">option 3</label></span></li></ul>            
    </div>
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-3 control-label" for="submit"></label>
      <div class="col-md-6">
          <button id="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
    </fieldset>
    </form>
    </div>
    <script>
  jQuery(function ($) {
$('#contact_form').submit(function () {
    var email = $('#email').val();
    var name = $('#name').val();
    var options = $("input[name='options[]']:checked");
    var msg = $('#name').val() + '\n' + $('#email').val() + '\n' + $('#options').val();
    $.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages/send.json',
        data: {
            'key': 'xxx',
            'message': {
                'from_email': 'info@mail.com',
                'from_name': 'name',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': 'info@mail.com',
                        'name': 'Name goes here',
                        'type': 'to'
                    }]
            }
        }
    }).done(function (response) {
        $('#name').val('');
        $('#email').val('');
        var values = new Array();
        $.each($("input[name='options[]']:checked"), function() {
        values.push($(this).val());
        window.location.href = '/thankyou';


    }).fail(function (response) {
        alert('Error sending message.');
    });
    return false;
});
});
</script>

工作版本:

<form class="form-horizontal callmeform" id="contact_form">
    <fieldset>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="name">Naam *</label>  
      <div class="col-md-6">
        <input id="name" name="name" type="text" placeholder="Naam" class="form-control input-md">   
      </div>
    </div>
    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-3 control-label" for="phone">E-Mail</label>  
      <div class="col-md-6">
        <input id="email" name="email" type="text" placeholder="Uw E-mail adres" class="form-control input-md">
      </div>
    </div>

    <div class="input-box">
            <ul id="options-1-list" class="options-list">
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_1" value="1"  /><span class="label"><label for="options_1_2">option 1 </label></span></li>
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_2" value="2"  /><span class="label"><label for="options_1_3">option 2 </label></span></li>
            <li><input type="checkbox" class="checkbox product-custom-option" name="options[]" id="options_1_3" value="3"  /><span class="label"><label for="options_1_4">option 3</label></span></li></ul>            
    </div>
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-3 control-label" for="submit"></label>
      <div class="col-md-6">
          <button id="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
    </fieldset>
    </form>
    </div>
    <script>
  jQuery(function ($) {
$('#contact_form').submit(function () {
    var email = $('#email').val();
    var name = $('#name').val();
    var options = $("input[name='options[]']:checked");
    var values = [];
    $.each($("input[name='options[]']:checked"), function() {
    values += $(this).val()+', ';
    });
    var msg = $('#name').val() + '\n' + $('#email').val() + '\n' + values;
    $.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages/send.json',
        data: {
            'key': 'xxx',
            'message': {
                'from_email': 'info@mail.com',
                'from_name': 'name',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': 'info@mail.com',
                        'name': 'Name goes here',
                        'type': 'to'
                    }]
            }
        }
    }).done(function (response) {
        $('#name').val('');
        $('#email').val('');
        $('#msg').val('');
        var values = new Array();
        $.each($("input[name='options[]']:checked"), function() {
        values.push($(this).val());
        });
        window.location.href = '/thankyou';


    }).fail(function (response) {
        alert('Error sending message.');
    });
    return false;
});
});
</script>

Answer 1

$('#options').val(); // this will not work.

检查一下:- Select values of checkbox group with jQuery

编辑:

jQuery(function($) {
$('#contact_form').submit(function(ev) {
ev.preventDefault();
var email = $('#email').val();
var name = $('#name').val();
var options = $("input[name='options[]']:checked");
var values = '';
$.each($("input[name='options[]']:checked"), function() {
  values += $(this).val()+', ';
});
var msg = $('#name').val() + '\n' + $('#email').val() + '\n' + values;
console.log(msg);
$.ajax({
    type: 'POST',
    url: 'https://mandrillapp.com/api/1.0/messages/send.json',
    data: {
        'key': 'xxx',
        'message': {
            'from_email': 'info@mail.com',
            'from_name': 'name',
            'headers': { 'Reply-To': email },
            'subject': 'Subject name',
            'text': msg,
            'to': [{
                    'email': 'info@mail.com',
                    'name': 'Name goes here',
                    'type': 'to'
                }]
        }
    }
}).done(function (response) {
    $('#name').val('');
    $('#email').val('');
    var values = new Array();
    $.each($("input[name='options[]']:checked"), function() {
    values.push($(this).val());
    window.location.href = '/thankyou';


}).fail(function (response) {
    alert('Error sending message.');
});
return false;
});
});

注意:我还没有检查ajax部分，但这将解决未定义的问题。