Квадратче за отметка във формуляр с Bootstrap JQuery и Mandril

Опитвам се да адаптирам тази форма на Bootstrap и JQuery от Mikhail Niedre. Формулярът е публикуван тук: 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': '[email protected]',
                'from_name': 'From',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': '[email protected]',
                        '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>

Добавих полета за избор на изглед, които искам да изпратя чрез този формуляр. Някак си не мога да накарам това да работи. Отговорът в имейла е „недефиниран“. Може би можете да ми дадете съвети какво правя грешно. Ето кода, който имам досега. Опитвам се да получа стойностите от опциите в пощата:

    <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': '[email protected]',
                'from_name': 'name',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': '[email protected]',
                        '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': '[email protected]',
                'from_name': 'name',
                'headers': { 'Reply-To': email },
                'subject': 'Subject name',
                'text': msg,
                'to': [{
                        'email': '[email protected]',
                        '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>

javascript checkbox jquery twitter-bootstrap mandrill
person matthijshofstede    schedule 14.06.2017    source източник

Отговори (1)


arrow_upward
0
arrow_downward 

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

Проверете това:- Изберете стойности на група от квадратчета с 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': '[email protected]',
            'from_name': 'name',
            'headers': { 'Reply-To': email },
            'subject': 'Subject name',
            'text': msg,
            'to': [{
                    'email': '[email protected]',
                    '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, но това ще реши недефинирания проблем.

person Nidhin Chandran    schedule 14.06.2017
comment
Добре, там е грешката. Направих някои корекции на моя пример. Някакви мисли как да получа масива по пощата? - person matthijshofstede; 14.06.2017
comment
Благодаря, успях. Ще актуализирам публикацията си с конкретния код след около ден. - person matthijshofstede; 14.06.2017