html和javascript中的聯系表

我想請你幫忙。

我用 HTML 和 JavaScript 創建了一個聯系表單，但是當我嘗試發送電子郵件時，它什么也沒做，什么也沒有發生。

請參閱下面的代碼：

/*----------------------------------------------------*/
/*  contact form
------------------------------------------------------*/

$('form#contactForm button.submit').click(function() {

  $('#image-loader').fadeIn();

  var contactName = $('#contactForm #contactName').val();
  var contactEmail = $('#contactForm #contactEmail').val();
  var contactSubject = $('#contactForm #contactSubject').val();
  var contactMessage = $('#contactForm #contactMessage').val();

  var data = 'contactName='   contactName   '&contactEmail='   contactEmail  
    '&contactSubject='   contactSubject   '&contactMessage='   contactMessage;

  $.ajax({

    type: "POST",
    url: "inc/sendEmail.php",
    data: data,
    success: function(msg) {

      // Message was sent
      if (msg == 'OK') {
        $('#image-loader').fadeOut();
        $('#message-warning').hide();
        $('#contactForm').fadeOut();
        $('#message-success').fadeIn();
      }
      // There was an error
      else {
        $('#image-loader').fadeOut();
        $('#message-warning').html(msg);
        $('#message-warning').fadeIn();
      }

    }

  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form -->
<form action="mailto:[email protected]" method="post" enctype="multipart/form-data" id="contactForm" name="contactForm">
  <fieldset>

    <div>
      <label for="contactName">Nome <span class="required">*</span></label>
      <input type="text" value="" size="35" id="contactName" name="contactName">
    </div>

    <div>
      <label for="contactEmail">E-mail <span class="required">*</span></label>
      <input type="text" value="" size="35" id="contactEmail" name="contactEmail">
    </div>

    <div>
      <label for="contactSubject">Assunto</label>
      <input type="text" value="" size="35" id="contactSubject" name="contactSubject">
    </div>

    <div>
      <label for="contactMessage">Mensagem <span class="required">*</span></label>
      <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
    </div>

    <div>
      <button class="submit" action="mailto:[email protected]">Enviar</button>
      <span id="image-loader">
                        <img alt="" src="images/loader.gif">
                     </span>
    </div> -->

  </fieldset>
</form>
<!-- Form End -->

我希望你能幫助我。

先感謝您。

如果這是一個簡單的問題，我深表歉意，但我還是編程新手。

uj5u.com熱心網友回復：

$(document).ready(function(){
$('.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName='   contactName   '&contactEmail='   contactEmail  
'&contactSubject='   contactSubject   '&contactMessage='   contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
});

uj5u.com熱心網友回復：

我找到了一個更快、更簡單且非常酷的解決方案。

請參閱下面的代碼：

               <form action="https://formspree.io/f/mbjwrqov" method="POST" enctype="multipart/form-data" id="contactForm" name="contactForm">
                    <fieldset>

                  <div>
                           <label for="contactName">Nome <span class="required">*</span></label>
                           <input type="text" value="" size="35" id="contactName" name="Nome">
                  </div>

                  <div>
                           <label for="contactEmail">E-mail <span class="required">*</span></label>
                           <input type="text" value="" size="35" id="contactEmail" name="Email">
                  </div>

                  <div>
                           <label for="contactSubject">Assunto</label>
                           <input type="text" value="" size="35" id="contactSubject" name="Assunto">
                  </div>

                  <div>
                     <label for="contactMessage">Mensagem <span class="required">*</span></label>
                     <textarea cols="50" rows="15" id="contactMessage" name="Mensagem"></textarea>
                  </div>

                  <div>
                     <button class="submit">Enviar</button>
                     <span id="image-loader">
                        <img alt="" src="images/loader.gif">
                     </span>
                  </div>

                    </fieldset>
                   </form>
              <!-- Form End -->

Formspree http://formspree.io/

該網站本身已經創建了 HTML，我只需要對 JavaScript 部分進行評論，以免出現問題或沖突。

基本上，該網站已經做了中介。

注意：我創建的站點托管在 GitHub Pages 上。

標籤：javascript html

上一篇：更新嵌套物件值的陣列

下一篇：insertAdjacentHTML不適用于創建的元素