Case à cocher avec Bootstrap JQuery et Mandril

J'essaie d'adapter cette forme Bootstrap et JQuery de Mikhail Niedre. Le formulaire est posté ici: https://codepen.io/webcane/pen/LBspI. Fondamentalement, il contient un formulaire de contact comme ci-dessous. Cela fonctionne comme prévu:Case à cocher avec Bootstrap JQuery et Mandril

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

J'ai ajouté une vue sélectionnez les boîtes que je veux envoyer en utilisant ce formulaire. D'une manière ou d'une autre, je n'arrive pas à faire fonctionner ça. La réponse dans le mail est 'indéfinie'. Peut-être pourriez-vous me donner quelques conseils sur ce que je fais de mal. Voici le code que j'ai jusqu'ici. Je suis en train d'obtenir les valeurs des options dans le courrier:

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

version de travail:

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

Source

2017-06-14 matthijshofstede

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

Vérifiez ceci: - Select values of checkbox group with jQuery

Edit:

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; 
}); 
});

Note: Je n'ai pas vérifié la partie ajax mais cela va résoudre le problème non défini.

Source

2017-06-14 10:00:47

Ok, il y a l'erreur. J'ai fait quelques ajustements à mon exemple. Des idées sur la façon d'obtenir le tableau dans le courrier? – matthijshofstede

Merci, j'ai eu ce travail. Je vais mettre à jour mon message avec le code défini dans un jour ou deux. – matthijshofstede

Case à cocher avec Bootstrap JQuery et Mandril

Répondre

Questions connexes