Переключение формы отправки на ajax-я могу просто изменить действие отправки? - PullRequest
2 голосов
/ 01 февраля 2010

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

Я использую типичную форму, и у меня уже есть электронная почта и проверка пустых значений. Прямо сейчас, отправляя форму, пользователь попадает на страницу подтверждения php с form-submit.php.

Я бы хотел изменить это, просто предоставив пользователю строку на текущей странице "Ваша форма отправлена"

Вот моя форма:

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td align="left"><b>Name:</b></td>
    <td><input name="name" id="name" size="25" value="" type="text" /></td>
   </tr>
  <tr>
    <td align="left"><b>Email:</b></td>
    <td><input name="email" id="email" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Confirm Email:</b></td>
    <td><input name="email_confirm" id="email_confirm" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Subject:</b></td>
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><b>Message:</b></td>
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
  </tr>
  <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>

Так можно ли просто изменить on submit или onclick, чтобы иметь возможность как отправить форму через внешний php-файл, так и остаться на той же странице?

Ответы [ 3 ]

1 голос
/ 01 февраля 2010

Вы можете преобразовать существующую форму, но это не так просто, как просто изменить события onSubmit или onClick.

Когда вы используете jQuery или другую библиотеку Ajax для обратного вызова, вы загружаете новый контент всуществующая страницаДля этого вам понадобится помеченный блок, обычно div, содержащий любые данные для изменения.Вам также нужно написать код переноса для обратного вызова, чтобы отправить его и обновить HTML страницы.

Быстрая и грязная версия в вашей форме будет заключаться в том, чтобы обернуть таблицу в тег div и вернуть вызов Ajax.новый HTML для этого div.Вашей новой целью для onsubmit будет код переноса для обратного вызова, который я описал выше.

Вам все еще нужно выполнить всю работу, чтобы использовать jQuery и указать его в нужных местах.Поскольку я использую prototype.js, я не могу подробно описать процесс jQuery, но все учебники, которые вы читаете, могут.

1 голос
/ 01 февраля 2010

Да, это так. Я хотел бы предложить немного Javascript (в следующем примере используется jQuery):

<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
    // bind some code to the form's onsubmit handler
    $('form[name=theForm]').submit(function() {
        if(formCheck(this)) {
            // $.post makes a POST XHR request, the first parameter takes the form's
            // specified action
            $.post($("form[name=theForm]").attr('action'), function(resp) {
                if(resp == '1') {
                    alert('Your form has been submitted');
                } else {
                    alert('There was a problem submitting your form');
                }
            });
        }
        return false;
    });
});
</script>

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

Я хотел бы отметить, что всегда полезно предоставить пользователю реалистичную обратную связь. Другими словами, публикация формы в формате AJAX может захватывать некоторые признаки этого с сервера. В приведенном выше примере я предположил, что «1» означает, что запись была успешно сохранена, а «0» означает, что она не была сохранено (запрос не выполнен и т. д.). Отображаемое пользователю сообщение зависит от этого результата.

0 голосов
/ 01 февраля 2010

Да, вы можете изменить действие формы onclick на функцию javascript: myajaxsubmit ().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...