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

Question

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

Я использую типичную форму и уже имею проверку электронной почты и пустое значение. Прямо сейчас, при отправке формы, пользователь переходит на страницу с подтверждением php с формой-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-файл и остаться на одной странице?

Answer 1

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

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

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

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

Answer 2

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

Answer 3

Да, это так. Я хотел бы предложить введение некоторых 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> 

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

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