Подтверждение формы PHP и изменение кнопки отправки вместо перенаправления на страницу статуса

Question

У меня есть базовая форма PHP, которая отправляет электронное письмо при отправке:

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    </p>
</form>

Эта форма работает хорошо, но в настоящее время у меня нет проверки, поэтому, если форма отправлена, даже если поля не заполнены. Разве нельзя сделать проверку с помощью jquery?

Как только форма отправлена, она ОТПРАВЛЯЕТСЯ в файл контроллера в codeigniter, который выполняет логику отправки по электронной почте, используя помощника по электронной почте в codeigniter. Смотрите здесь:

if($this->email->send())
    {
        echo 'Message has been sent';
    }
    else
    {
        show_error($this->email->print_debugger());
    }

Как вы можете видеть, это перенаправляет в представление email_form и выводит результаты. Можно ли просто остаться на той же странице контактов, которая имеет форму, и показать результаты публикации вместо перенаправления в представление <?=base_url()?>contact/email_form? Я думал о том, чтобы изменить текст кнопки «Отправить» на «Сообщение отправлено» или что-то в этом роде, а затем очистить поля формы. Таким образом, они остаются на странице контактов.

Возможно ли все это с помощью jquery? Спасибо!

Answer 1

Да, это все возможно.

В частности, вы бы сделали что-то вроде этого:

$( '#submitbutton' ).click(function(){
    $.ajax(); //do ajax

    return false; //should override default form submission
});

Вы бы искали функцию $.post(),Однако мне нравится сохранять как можно больше контроля, поэтому я использую функцию $.ajax().

Они принимают URL-адреса и данные для обработки, так что это было бы очень полезно для вас.

Вы обработали бы успешное возвращение (предположительно, с конкретным кодом успеха для обработки) в параметре "success:" $.ajax() или обратном вызове успеха $.post().
Изнутри.с помощью этой функции вы можете изменить содержимое элементов DOM (например, кнопки в вашем примере), используя селекторы CSS и функции jQuery, такие как .html().

некоторые учебные пособия , чтобы начать использовать jQuery!

Помните, просто проверки электронной почты недостаточно.Вам также нужно проверить другие возможности!
Кроме того, убедитесь, что вы выполняете проверку на сервере после POST .Javascript можно отключить, а затем (если вы выполняете проверку в браузере) вся ваша проверка будет делать ничего для защиты вашего сервера или общественности в целом.

В итоге выможно использовать $.post() или $.ajax() в jQuery для передачи данных на сервер для обработки.

Answer 2

Этим утром я сделал в точности то же самое:

$('#contact_form').submit(function() {
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
        return false;
    }
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      {name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
      function(data) {
          // this checks the return value from the submit
          if (data == 'Message has been sent') {
               // do something
               $('#contact p.alt').html('Message Sent');
          } else {
               // the send email function returned something other than success
               alert('failed');
          }
      }
    return false;
}

Answer 3

Вы всегда должны выполнять проверку сервера, потому что у пользователя может быть отключен JavaScript.Я бы проверил каждый ввод на предмет допустимых значений, чтобы ваше приложение было безопасным, и вы не превратились в пушку спама.Я бы сделал это, добавив токен в форму, который гарантирует, что ваше приложение является тем, которое создало форму, и, следовательно, можно перейти к части отправки электронного письма.См. Следующий пост:

Токены подлинности PHP