Блог

По какой-то причине форма не отправляется. Я использовал ajax form для сохранения сведений о форме в моей базе данных.

Вот ссылка на сайт:http://www.famproperties.com/mudon/Abu-Dhabi/villas.html

Вот код скрипта.

    <script>
$(document).ready(function() {
    $("#submit-form-button").click(function() { submitForm(); });
});
function submitForm() {

    if ( $("#NAME").val() == '' ||
  $("#EMAIL").val()  == '' ||
  $("#MOBILE").val()   == '' ||
  $("#NOTE").val() == '' )
  { alert ("All field are required");}
else {
     $.ajax({
      type: "POST",
      url: "http://famproperties.com/real_estate/property/contact/lead/",
      data: {  
   NAME:   $("#NAME").val(), 
   EMAIL:  $("#EMAIL").val(), 
   MOBILE: $("#MOBILE").val(), 
   NOTE:   $("#NOTE").val(),
   SOURCE: 'MSB.COM'
   },
      success: function() {
         alert("Thanks, Our specialist will contact you soon.");
      },
      dataType: 'html'
    });
  $("#NAME").val(''); 
  $("#EMAIL").val(''); 
  $("#MOBILE").val(''); 
  $("#NOTE").val('');
}};

</script>
  

Вот код формы.

 <!--NEW FORM -->
                        <div class="form-horizontal" role="form" accept-charset="UTF-8" action="http://famproperties.com/real_estate/property/contact/lead/" autocomplete="on" id="pro-form" method="post">
                <div class="form-group">
                     <label for="NAME" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="NAME" required="" placeholder="Name">
                    </div>
                </div>
                <div class="form-group">
                     <label for="EMAIL" class="col-sm-2 control-label ">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="EMAIL" required="" placeholder="me@example.com">
                    </div>
                </div>

                                <div class="form-group">
                     <label for="MOBILE" class="col-sm-2 control-label">Mobile</label>
                    <div class="col-sm-10">
                        <input type="phone" class="form-control inputs" id="MOBILE" required="" placeholder="Mobile">
                    </div>
                </div>

                               <div class="form-group">
                     <label for="NOTE" class="col-sm-2 control-label">Message</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="NOTE" required="" placeholder="Note">
                    </div>
                </div>

                                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">

<a href="#" onclick="return false" class="btn btn-default  btn-lg button" id="submit-form-button" style="background-color: #ffc600;
color: #2a292a;
width: 100%;"> Submit <span class="fa fa-chevron-right fa-1x"></span><span class="fa fa-chevron-right fa-1x"></span>  </a>
                    </div>
                </div>

            </div>
            <!--NEW FORM-->
  

Просмотр страницы на http://www.famproperties.com/mudon/Abu-Dhabi/villas.html вы даже не загружаете jquery, проверьте консоль, и вы увидите эту ошибку:

Ошибка неперехваченной ссылки: $ не определен

Вот почему ajax не работает

Редактировать: Извините, проверяя ваш код еще раз, я увидел, что вы загружаете jQuery, но вы пытаетесь использовать jQuery перед его загрузкой. Итак, попробуйте переместить тег jquery script в заголовок или переместить свой js под тег jQuery script.