2014-10-10 66 views
0

我有一個小問題,我有一個引導驗證插件,也阿賈克斯後腳本引導的形式。我的問題是,我不知道如何設置一個條件,我要達到使提交按鈕。形成jQuery驗證,然後通過AJAX發送到PHP

我想設置我的提交按鈕默認是關閉的,如果所有的輸入將被填充(自舉驗證條件),則JavaScript可以讓點擊提交按鈕。

謝謝你的答案。

這裏是我的代碼:

<script> 
 
jQuery(document).ready(function() { 
 
    jQuery('#requestquote').bootstrapValidator({ 
 
    \t message: 'This value is not valid', 
 
    \t group: '.form-overenie', 
 
     feedbackIcons: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
      name: { 
 
       message: 'Zadané meno nie je správne', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'Prosím zadajte svoje meno' 
 
        }, 
 
       } 
 
      }, 
 
      company: { 
 
       message: 'Zadaný názov je neplatný', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'Prosím napíšte názov spoločnosti' 
 
        }, 
 
       } 
 
      }, 
 
      phone: { 
 
       message: 'Zadané číslo je neplatné', 
 
       validators: { 
 
       \t stringLength: { 
 
         min: 9, 
 
         message: 'Zadané číslo je príliš krátke' 
 
        }, 
 
        notEmpty: { 
 
         message: 'Prosím zadajte svoje telefónne číslo' 
 
        }, 
 
       } 
 
      }, 
 
      mailovaadresa: { 
 
       message: 'Zadaný email nie je správny', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'Prosím zadajte svoju emailovú adresu' 
 
        }, 
 
       } 
 
      }, 
 
      projecttype: { 
 
       message: 'Zadaný názov je neplatný', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'Prosím zadajte typ projektu' 
 
        }, 
 
       } 
 
      }, 
 
      budget: { 
 
       message: 'Zadaný názov je neplatný', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'Prosím zadajte približnú výšku rozpočtu' 
 
        }, 
 
       } 
 
      }, 
 
      projectdescription: { 
 
       validators: { 
 
       \t 
 
       } 
 
      }, 
 
     } 
 
    }); 
 
}); 
 

 

 

 
jQuery(function() { 
 

 
     jQuery('#requestquote').unbind('submit').bind('submit', function (e) { 
 

 
      e.preventDefault(); 
 

 
      jQuery.ajax({ 
 
      type: 'post', 
 
      url: 'forms/requestquote.php', 
 
      data: jQuery('#requestquote').serialize(), 
 
      success: function() { 
 
       jQuery("#uspesne-odoslane").show(); 
 
       jQuery(".formular-potvrdit").hide(); 
 
       jQuery(".formular-riadok").hide(); 
 
       jQuery(".formular-zavriet").hide(); 
 
      } 
 
      }); 
 
     }); 
 

 
     }); 
 
</script>
<form id="requestquote" action="forms/requestquote.php" method="post" style="width:85%;margin:0 auto;"> 
 
     \t <div class="formular-riadok"> 
 
     <fieldset><div class="form-overenie" style="float:left;"><input type="text" name="name" placeholder="Meno" class="input-lava" /></div> 
 
     <div class="form-overenie" style="float:right;"><input type="text" name="company" placeholder="Spoločnosť" class="input-prava" /></div> 
 
     </div> 
 
     <div class="formular-riadok"> 
 
     <div class="form-overenie" style="float:left;"><input type="text" name="phone" placeholder="Telefón" class="input-lava" /></div> 
 
     <div class="form-overenie" style="float:right;"><input type="email" name="mailovaadresa" placeholder="E-mail" class="input-prava" /></div> 
 
     </div> 
 
     <div class="formular-riadok"> 
 
     <div class="form-overenie" style="float:left;"><select name="projecttype" class="input-lava" style="margin-bottom:30px;"> 
 
     \t <option value="" disabled selected>Typ projektu</option> 
 
     \t <option value="webstranka">Web stránka</option> 
 
     \t <option value="eshop">E-shop</option> 
 
     \t <option value="portal">Portál</option> 
 
     \t <option value="forum">Fórum</option> 
 
     \t <option value="seo">SEO</option> 
 
     \t <option value="korporatnaidentita">Korporátna identita</option> 
 
     \t <option value="logo">Logo</option> 
 
     \t <option value="ine">Iné</option> 
 
     </select></div> 
 
     <div class="form-overenie" style="float:right;"><select name="budget" class="input-prava" style="margin-bottom:30px;"> 
 
     \t <option value="" disabled selected>Rozpočet</option> 
 
     \t <option value="do500">do 500 €</option> 
 
     \t <option value="500az1000">500 € - 1 000 €</option> 
 
     \t <option value="1000az3000">1 000 € - 3 000 €</option> 
 
     \t <option value="3000az5000">3 000 € - 5 000 €</option> 
 
     \t <option value="5000az10000">5 000 € - 10 000 €</option> 
 
     \t <option value="10000az20000">10 000 € - 20 000 €</option> 
 
     \t <option value="nad20000">nad 20 000 €</option> 
 
     </select></div> 
 
     </div> 
 
     <div class="formular-riadok"> 
 
     <div class="form-overenie" style="display:block;"><textarea name="projectdescription" placeholder="Stručný popis projektu" class="formular-textarea"></textarea></div> 
 
     </div> 
 
     <div class="formular-riadok" style="margin-top:30px;"> 
 
     <span class="formular-zavriet" data-dismiss="modal">Zatvoriť</span> 
 
     <button type="submit" class="formular-potvrdit" disabled>Odoslať</button></fieldset> 
 
     </div> 
 
     
 
     <div id="uspesne-odoslane" data-dismiss="modal" hidden><h3><i class="fa fa-check-circle"></i>Správa bola úspešne odoslaná</h3></div> 
 
     </form>

我停用了提交按鈕,但是當我點擊SUMIT,阿賈克斯將發送數據,當任何輸入被填滿。

雖然我只有腳本的第一部分,但一切都正常(只有在每個輸入都已填充的情況下,它才允許我發送表單),但是當我添加一個Ajax時,如果只填充一個輸入,則會將表單發送給PHP ...

回答

0

您應該使用:

data: jQuery('#requestquote').serializeArray(), 

序列化()會給你像一個查詢字符串

相關問題