2016-10-09 12 views
1

私はいくつかの必須フィールドを含むウェブサイトに連絡フォームを持っています。連絡フォーム送信ボタンが押されても更新されない

フィールドを入力してすべてのフィールドに入力するように求められた場合は、すべてのフィールドに入力して送信を押すと何も起こりません。

ページ全体をリフレッシュしてもう一度開始する必要があります。

基本的には、SENDボタンを一度押すと、ページを更新しない限り、再び動作しません。これをどうすれば解決できますか?

HTMLとスクリプトのコードの下。どんな助けも高く評価されます。

$('#form-send').click(function() { 
 
$('#form-send').attr('disabled', 'disabled'); 
 

 
var name = $('#form-name').val(); 
 
var email = $('#form-email').val(); 
 
var telephone = $('#form-telephone').val(); 
 
var message = $('#form-msg').val(); 
 
var option = $('#form-select').val(); 
 
var error = 0; 
 

 
if (name === '' || email === '' || message === '' || telephone === '') { 
 
    error = 1; 
 
    $('#details-error').fadeIn(200); 
 
} else { 
 
    $('#details-error').fadeOut(200); 
 
} 
 

 
if (!(/(.+)@(.+){2,}\.(.+){2,}/.test(email))) { 
 
    $('#details-error').fadeIn(200); 
 
    error = 1; 
 
} 
 

 
var dataString = '&option=' + option + '&name=' + name + '&email=' + email + '&telephone=' + telephone + '&text=' + message; 
 

 
if (error === 0) { 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: "mail.php", 
 
    data: dataString, 
 
    success: function() { 
 
     $('#details-error').fadeOut(1000); 
 
     $('#form-sent').fadeIn(1000); 
 
    } 
 
    }); 
 
    return false; 
 
} 
 

 
}); 
 

 
});
<div class="form-input"> 
 
    <div class="form-title">NAME</div> 
 
    <input id="form-name" required type="text"></input> 
 
</div> 
 

 
<div class="form-input"> 
 
    <div class="form-title">EMAIL</div> 
 
    <input id="form-email" required type="text"></input> 
 
</div> 
 

 
<div class="form-input"> 
 
    <div class="form-title">TELEPHONE</div> 
 
    <input id="form-telephone" required type="text"></input> 
 
</div> 
 

 
<div class="form-input"> 
 
    <div class="form-title">MESSAGE</div> 
 
    <textarea id="form-msg" type="text"></textarea> 
 
</div> 
 

 
<div class="form-input"> 
 
    <div class="form-title">&nbsp;</div> 
 
    <button id="form-send">SEND</button> 
 
</div> 
 

 
</div> 
 
<!--end of form holder--> 
 

 

 

 
<div id="details-error">Please complete all fields and include a valid email</div> 
 
<div id="form-sent">Thank you for your enquiry - We will be in touch shortly!</div> 
 
</div> 
 
</div> 
 
</div> 
 

 
</div>

答えて

2

はこれを使用して:すべての

error = 1; 
+0

$("#form-send").prop('disabled', false); 

これは完璧です!治療をしました。 – Wallyl81

+0

フォームが受信されたときに、電話番号が名前の直後にスペースを含まずに1行に表示され、他のすべてのフィールドがそれ自身の行に表示される理由を、別のメモで教えてください。 – Wallyl81

+0

参照:http://stackoverflow.com/a/9944122/6908226 – Giliapps

関連する問題