Отправить форму кнопку застрял после ajax сообщение

Question

Привет, у меня есть форма, которая использует Ajax, чтобы сделать сообщение в Rails 4. javascript запускает некоторую проверку и должен возвращать предупреждающее сообщение, как только сообщение будет успешным. В настоящее время кнопка отправки остается нажатой, и хотя сообщения формы не сообщаются, уведомление не появляется. Я не знаю, что я делаю неправильно, и просто хочу, чтобы форма предупреждала сообщение, а затем перезагружалась.

$('#submit1').click(function(e){ 
    e.preventDefault(); 
    var name = $('input#name').val(); 

    if (name == "") { 
    alert("please enter a name!"); 
    $('input#name').focus(); 
    return false; 
    } 
    var email = $('input#email').val(); 

    if (email == ""){ 
    alert("please enter your email"); 
    $('input#email').focus(); 
    return false; 
    } 
    var content = $('textarea#text').val(); 

    if (content == ""){ 
    alert("please enter a comment"); 
    $('textarea#text').focus(); 
    return false; 

    } 

    var dataString = 'name=' + name + '&email=' + email + '&content=' + content; 


    $.ajax({ 
    type: "POST", 
    url: "emailer", 
    data: dataString, 
    dataType: 'json', 
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}, 
    success: function(){ 
     alert("mappy jappy"); 
     $('input#name').reset(); 
     $('input#email').reset(); 
     $('textarea#text').reset(); 
    } 
    }); 
    return false; 
}); 

Answer 1

Вы предотвращаете неправильное происшествие. Вам нужно событие onsubmit формы, а не событие onclick кнопки отправки.

$('#myform').on('submit', function(event){ 
    event.preventDefault(); 
    /* your code here */ 
}); 

Для получения дополнительной информации, пожалуйста, прочитайте: How to prevent form from being submitted?

Answer 2

Прежде всего функция сброса не для текста boxes..it будет работать для формы. Таким образом, исправленный код будет ...

<script> 
$(function(){ 
$('#submit1').click(function(e){ 
    e.preventDefault(); 
    var name = $('input#name').val(); 

    if (name == "") { 
    alert("please enter a name!"); 
    $('input#name').focus(); 
    return false; 
    } 
    var email = $('input#email').val(); 

    if (email == ""){ 
    alert("please enter your email"); 
    $('input#email').focus(); 
    return false; 
    } 
    var content = $('textarea#text').val(); 

    if (content == ""){ 
    alert("please enter a comment"); 
    $('textarea#text').focus(); 
    return false; 

    } 

    var dataString = 'name=' + name + '&email=' + email + '&content=' + content; 


    $.ajax({ 
    type: "POST", 
    url: "user_availability.php", 
    data: dataString, 
    dataType: 'json', 
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}, 
    success: function(){ 
     alert("mappy jappy"); 
     $('#contact-form')[0].reset(); 
    } 
    }); 
    return false; 
}); 
}); 
</script> 

И HTML-часть будет как ценам ниже

<form id="contact-form" method="post" enctype="multipart/form-data"> 
<input type="text" id="email" name="email" /> 
<input type="text" id="name" name="name" /> 
<textarea name="text" id="text"></textarea> 
<input type="submit" value="submit" id="submit1" /> 
</form> 

Пожалуйста, проверьте и дайте мне знать ...